首页 > Web开发 > 详细

百度地图在web项目中的使用

时间:2014-04-14 21:05:57      阅读:592      评论:0      收藏:0      [点我收藏+]

bubuko.com,布布扣


在程序中调用百度地图:

具体的代码如下:

<!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>





百度地图在web项目中的使用,布布扣,bubuko.com

百度地图在web项目中的使用

原文:http://blog.csdn.net/estelle_belle/article/details/23668441

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!