标签：
使用百度地图提供的javascript api，给定多点的经纬度坐标，在百度地图上
显示这些坐标点。
其中包括各个点自适应地图显示，自定义坐标点的图标，以及各个点之间添加折线。
实现的效果如下图：
具体步骤如下：
1.页面引用百度地图api脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
其中ak为你申请的百度api密钥。申请ak地址： http://lbsyun.baidu.com/apiconsole/key?application=key
2.根据各个点自适应显示地图：
//根据各个点自适应显示地图
var points = [{"lat":32.320054,"lng":120.620204},{"lat":32.320054,"lng":120.635204},{"lat":32.330054,"lng":120.630204}];
var map = new BMap.Map("allmap");
var view = map.getViewport(points);
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint, mapZoom);
map.enableScrollWheelZoom(true);
3.添加多个坐标点、自定义坐标点的图标：
//添加多个点
for (var i = 0; i < points.length; i++) {
var item = points[i];
var p = new BMap.Point(item.lng, item.lat);
//自定义点图标
var iconUrl = "point.jpg";
var myIcon = new BMap.Icon(iconUrl, new BMap.Size(40, 80));
var marker = new BMap.Marker(p, { icon: myIcon });
map.addOverlay(marker);
}
4.添加坐标点之间的折线：
//添加折线
var pointArray = new Array();
pointArray[0]= new BMap.Point(120.620204,32.320054);
pointArray[1]= new BMap.Point(120.635204,32.320054);
pointArray[2]= new BMap.Point(120.630204,32.330054);
var polyline = new BMap.Polyline(pointArray, { strokeColor: "#5298FF", strokeWeight: 6, strokeOpacity: 1.0 });
map.addOverlay(polyline);
总体代码：
<script type="text/javascript">
window.onload = function () {
var pointArray = new Array();
var points = [{"lat":32.320054,"lng":120.620204},{"lat":32.320054,"lng":120.635204},{"lat":32.330054,"lng":120.630204}];
//根据各个点自适应显示地图
var map = new BMap.Map("allmap");
var view = map.getViewport(points);
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint, mapZoom);
map.enableScrollWheelZoom(true);
//添加多个点
for (var i = 0; i < points.length; i++) {
var item = points[i];
var p = new BMap.Point(item.lng, item.lat);
pointArray[i] = p;
//自定义点图标
var iconUrl = "point.jpg";
var myIcon = new BMap.Icon(iconUrl, new BMap.Size(40, 80));
var marker = new BMap.Marker(p, { icon: myIcon });
map.addOverlay(marker);
}
//添加折线
var polyline = new BMap.Polyline(pointArray, { strokeColor: "#5298FF", strokeWeight: 6, strokeOpacity: 1.0 });
map.addOverlay(polyline);
};
</script>
百度地图JavaScript Api开发平台链接： http://lbsyun.baidu.com/index.php?title=jspopular
标签：
原文地址：http://www.cnblogs.com/miaosha5s/p/5618768.html
