百度地图在web项目中的使用
在程序中调用百度地图:
具体的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> baidumap </title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b92e64ae5622663ceceaccd8ab8eb1"></script> </head> <body> <div id="bdmap" style="width:500px;height:420px;margin=100px"></div> </body> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("bdmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 创建点坐标 var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925)); // 创建标注 map.addOverlay(marker1); // 将标注添加到地图中 //创建信息窗口 var infoWindow1 = new BMap.InfoWindow("普通标注"); marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);}); </script> </html>
具体的 API 参考:http://developer.baidu.com/map/jsdevelop-2.htm
上面的代码的标注为默认的,红色的叹号,如果想自定义标注符号,可以加入下面的代码,在上面创建点坐
<script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("bdmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 创建点坐标 var myIcon = new BMap.Icon("images/4.png", new BMap.Size(59,42), { offset: new BMap.Size(10, 25)}); //自定义标注符号 var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925), {icon: myIcon}); // 创建标注 map.addOverlay(marker1); // 将标注添加到地图中 //创建信息窗口 var infoWindow1 = new BMap.InfoWindow("<strong>的发的发的发</strong><br>" +"士大夫是否的范德萨发的发生室<br>" +"电话:6756656767<br>" +"邮编:7878787<br>"); marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);}); </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。