百度地图api插件

2025-10-28 01:46:19

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插件

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢