关于应用JavaScript百度地图的各种问题

最新推荐文章于 2024-04-07 23:09:31 发布

不能仅仅只做个码农而已

最新推荐文章于 2024-04-07 23:09:31 发布

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web应用文章标签： Javascript百度地图

本文链接：https://blog.youkuaiyun.com/xiaoyi_tdcq/article/details/19679831

web应用专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用百度地图API实现地图标注及信息窗体展示。通过JavaScript编程，详细展示了如何加载地图、设置地图中心点和缩放级别，并为不同的地理位置添加自定义图标、标签和弹出窗口，提供业务联系人的职务和电话等信息。

先看效果图。是通过JavaScript的方式显示在网页上面

图1.

图2.

下面是Html的源码，代码可以复制，但是必须应用你自己的key才能访问到数据，如果你没有key请到百度地图去申请，申请百度key，新版的百度key就是你创建应用就是。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#container {
	height: 100%
}
</style>

<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=1.5&ak=我的key"></script>
</head>

<body>
	<div id="container"></div>
	<script type="text/javascript">
	var markerArr=[
		{title:"张三",point:"113.078869,28.255521",job:"业务经理",tel:"123321"},
		{title:"李四",point:"113.04659,28.264833",job:"业务员1",tel:"123456"},
		{title:"赵六",point:"113.02459,28.265833",job:"业务员2",tel:"123456"},
		{title:"王八",point:"113.08269,28.267833",job:"业务员3",tel:"123456"},
		{title:"王五",point:"113.051715,28.25261",job:"业务员4 ",tel:"456554"},];
		var map = new BMap.Map("container"); // 创建地图实例   
		
		var point = new BMap.Point(113.050, 28.250); // 创建点坐标   
		map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别

	    map.enableScrollWheelZoom(); //启动鼠标滚轮缩放地图
	    map.enableKeyboard(); //启动键盘操作地图
	    map.enableContinuousZoom();   // 开启连续缩放效果                 
	    map.enableInertialDragging(); // 开启惯性拖拽效果 
	    
	    for(var i=0;i<markerArr.length;i++){
	    	p0 = markerArr[i].point.split(",")[0]; //
	    	//alert(p0);
	    	p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
	    	var pointMarker = new BMap.Point(p0, p1);  // 创建标注的坐标
	 	   //设置图标的样式，包括本地的图标
	 	   if(i==1){
		 	   var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
	                        offset: new BMap.Size(-10,-20), // 指定定位位置  
	                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
	                    }); 
	    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
	 		   
	 	   }else if(i==2){
	 		  var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
                  offset: new BMap.Size(-10,-20), // 指定定位位置  
                  imageOffset: new BMap.Size(0, 0 - 0 * 25) // 设置图片偏移  
              }); 
	    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
	 	   }else if(i==3){
		 		  var myIcon = new BMap.Icon("images/arrow_down.png", new BMap.Size(23, 25), {  
	                  offset: new BMap.Size(-10,-20), // 指定定位位置  
	                  imageOffset: new BMap.Size(0, 0 - 0 * 50) // 设置图片偏移  
	              }); 
		    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
		 	}else if(i==4){
		 		  var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
	                  offset: new BMap.Size(-10,-20), // 指定定位位置  
	                  imageOffset: new BMap.Size(0, 0 - 12 * 25) // 设置图片偏移  
	              }); 
		    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
		 	}else{
	    	var marker = new BMap.Marker(pointMarker);        // 创建标注
	 		   
	 	   }
	 	   
	 	    var label = new BMap.Label(markerArr[i].title,{"offset":new BMap.Size(-10,-30)});//label的偏移量，为了让label的中心显示在点上，第一个参数是x轴上的位置移动（负数表示向左移动），第二个是y轴上的位置移动（负数表示向上移动）
	         marker.setLabel(label);
	         marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

	         var _iw = new BMap.InfoWindow("<b>职务:"+markerArr[i].job+"</b><br/><div>电话:<a href=\"window.myjavascript.call('"+markerArr[i].tel+ "')\">" +markerArr[i].tel+ "</a></div>");

		//设置点击事件
	         marker.addEventListener("click",function(){
	             this.openInfoWindow(_iw);
	         });
	         _iw.addEventListener("open",function(){
	             marker.getLabel().hide();
	         })
	         _iw.addEventListener("close",function(){
	             marker.getLabel().show();
	         })
	         label.addEventListener("click",function(){
	             marker.openInfoWindow(_iw);
	         })
	 	     map.addOverlay(marker);                     // 将标注添加到地图中
	    }
	   
	    
	    
	</script>
</body>
</html>