1、新建html文档。
2、书写html文档。<div id="allmap"></div>
3、书写css样式。<style>#allmap {width:100%; height:800px;overflow: hidden;margin:0;}</style>
4、添加百度地图的api js<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=B3f7707c25da5b29a6ff69618788a296"></script>
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>
6、整体代码。
7、查看效果
