百度地图api插件

时间:2026-02-14 04:24:55

1、新建html文档。

百度地图api插件

2、书写html文档。

<div id="allmap"></div>

百度地图api插件

3、书写css样式。

<style>

#allmap {width:100%; height:800px;overflow: hidden;margin:0;}

</style>

百度地图api插件

4、添加百度地图的api   js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&amp;ak=B3f7707c25da5b29a6ff69618788a296"></script>

百度地图api插件

5、根据百度地图aip开发文档书写js

<script type="text/javascript">

var map = new BMap.Map("allmap");    

var point = new BMap.Point(106.530482,29.603863);

//map.enableScrollWheelZoom(true);

map.enableScrollWheelZoom(); 

map.enableContinuousZoom(); 

map.centerAndZoom(point, 15);

map.addControl(new BMap.NavigationControl());

var marker = new BMap.Marker(point);

map.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE);

//创建信息窗口

var infoWindow = new BMap.InfoWindow(sContent);

map.centerAndZoom(point, 15);

map.addOverlay(marker);

marker.addEventListener("click", function(){          

   this.openInfoWindow(infoWindow);s

   document.getElementById('imgDemo').onload = function (){

       infoWindow.redraw();

   }

});

</script>

百度地图api插件

6、整体代码。

百度地图api插件

7、查看效果

百度地图api插件

© 2026 小猪经验网
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com