码迷,mamicode.com
首页 > Web开发 > 详细

百度地图JS调用示例

时间:2015-08-18 19:34:58      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<title>百度地图API测试</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">    
	var map = new BMap.Map("allmap");            // 创建Map实例
	var pointA = new BMap.Point(113.92983, 22.509397); // 创建点坐标   地址 蛇口沃尔玛	
	var pointB = new BMap.Point(113.942129, 22.522642); //地址 海岸城

	map.centerAndZoom(pointA, 15);
	map.enableScrollWheelZoom();                 //启用滚轮放大缩小
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	//map.setCurrentCity("北京"); // 设置当前城市信息
	/*
     *  给地图添加监控 获取当前点击经纬度
	    map.addEventListener("click", function(e){
	    alert(e.point.lng + ", " + e.point.lat); 
	    });
	*/

	addMarker(pointA, "蛇口沃尔玛", "地址:工业大道和东滨路交汇处<br/>电话:(0755)26816711");        // 创建标注1  
	addMarker(pointB, "海岸城购物中心", "地址:文心五路33号海岸城东座212号<br/>电话:(0755)86125888");        // 创建标注2  

	//开始测距		
	var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });  //定义折线
	map.addOverlay(polyline);     //添加折线到地图上
	polyline.addEventListener("click", function () {    //监听标注事件		
	    alert('从蛇口沃尔玛到海岸城购物中心的距离是:' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');  //获取两点距离,保留小数点后两位
	});

	//获取驾车路线
	//var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} });
	//driving.search(pointA, pointB);
	
	// 编写自定义函数,创建标注
	function addMarker(point, a, b) {
	    var marker = new BMap.Marker(point);
	    map.addOverlay(marker);
	    //map.removeOverlay(marker);                  // 将标注从地图中移除
	    //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	    marker.addEventListener("click", function () {    //监听标注事件  
	        var opts = {    //创建信息窗口
	            width: 250,     // 信息窗口宽度    
	            height: 100,     // 信息窗口高度    
	            title: a  // 信息窗口标题   
	        }
	        var infoWindow = new BMap.InfoWindow(b, opts);  // 创建信息窗口对象    
	        map.openInfoWindow(infoWindow, point);      //打开信息窗口			
	        //alert("marker的位置是" + p.lng + "," + p.lat);   
	    });
	}
</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

百度地图JS调用示例

标签:

原文地址:http://blog.csdn.net/smartsmile2012/article/details/47754163

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!