您的位置:首页 > Web前端 > JavaScript

根据经纬度坐标值在百度地图上绘制轨迹

2017-12-11 11:08 841 查看
因为项目需要做物体轨迹检测,所以要把物体移动的轨迹在百度地图上进行绘制和显示,于是就在网上找到了这个方法,现在做个记录方便以后查阅:

1、html 部分设置存放地图的容器和设置你的百度地图的ak

html:

<div id="baiduMap"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9H***uNq7M20K1OGAm2***lC7j7t***l">
//v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>


2、js部分,相应的js

<script type="text/javascript">
var map = new BMap.Map("baiduMap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件

var pointStr = "104.038748,30.641821,104.047789,30.648128,104.063959,30.655336,104.067264,30.660307,104.067264,30.664438,104.064008,30.665316".split(",");

var pointArr = [];

for (var k = 0; k < pointStr.length; k += 2) {
pointArr.push({
lng: pointStr[k],
lat: pointStr[k + 1]
});
}
// 生成坐标点
var trackPoint = [];
for (var i = 0, j = pointArr.length; i < j; i++) {
trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
}
map.centerAndZoom(trackPoint[0], 15);

// 画线
var polyline = new BMap.Polyline(trackPoint, {
strokeColor: "#ad0e21",
strokeWeight: 3,
setStrokeStyle:"dashed",
strokeOpacity: 1
});
map.addOverlay(polyline);
// 配置图片
var size = new BMap.Size(22, 22);
var offset = new BMap.Size(0, 0);
var imageSize = new BMap.Size(20, 20);
var icon = new BMap.Icon("./images/f5.jpg", size, {
imageSize: imageSize,
infoWindowAnchor:new BMap.Size(0, -3)
});

// 画图标
for (var i = 0, j = trackPoint.length; i < j; i++) {
var marker = new BMap.Marker(trackPoint[i], {
icon: icon,
offset: offset
}); // 创建标注
map.addOverlay(marker);
marker.addEventListener("click",function () {
// alert(this.getPosition())
var point=this.getPosition();
alert("经度:"+point.lng+"\n"+"纬度:"+point.lat)
})

}

//根据经纬极值计算绽放级别。 (从网上复制)
function getZoom(maxLng, minLng, maxLat, minLat) {
var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。
var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标A
var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B
var distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
if (zoom[i] - distance > 0) {
return 18 - i + 3; //之所以会多3,是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
}
}

//  (从网上复制)
function setZoom(points) {
if (points.length > 0) {
var maxLng = points[0].lng;
var minLng = points[0].lng;
var maxLat = points[0].lat;
var minLat = points[0].lat;
var res;
for (var i = points.length - 1; i >= 0; i--) {
res = points[i];
if (res.lng > maxLng) maxLng = res.lng;
if (res.lng < minLng) minLng = res.lng;
if (res.lat > maxLat) maxLat = res.lat;
if (res.lat < minLat) minLat = res.lat;
}
var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
var zoom = getZoom(maxLng, minLng, maxLat, minLat);
map.centerAndZoom(new BMap.Point(cenLng, cenLat), zoom);
} else {
//没有坐标,显示全中国
map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5);
}
}

setZoom(pointArr)
</script>


原文出自:https://segmentfault.com/a/1190000007319657
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息