百度地图的添加图标,消除,线路图,还有信息展示

---恢复内容开始---

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hKCd6ykQZB3Fk43aPenofzzISyFTkojf"></script>
<title>设置驾车路线途经点</title>
</head>

<body>
<div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(112.32, 28.60), 11); //中心点
map.enableScrollWheelZoom(true); //能否放大缩小

var data = [{
"createTime": "2019-04-04 13:01:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "0000000000000000",
"s": 1,
"y": 28.542857,
"x": 112.34509,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:02:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "9999999999",
"s": 1,
"y": 28.584836,
"x": 112.42792,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:03:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "88888888888888",
"s": 1,
"y": 28.566565,
"x": 112.291665,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:04:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "7777777777",
"s": 1,
"y": 28.488876,
"x": 112.354906,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:05:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "6666666666666",
"s": 1,
"y": 28.53509,
"x": 112.402623,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:06:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "55555555555555",
"s": 1,
"y": 28.579253,
"x": 112.403773,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:07:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "444444444444444",
"s": 1,
"y": 28.531536,
"x": 112.440568,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:08:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "3333333",
"s": 1,
"y": 28.551844,
"x": 112.456666,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:09:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "222222222222",
"s": 1,
"y": 28.558951,
"x": 112.446892,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
},
{
"createTime": "2019-04-04 13:10:10",
"updateTime": null,
"createUser": null,
"updateUser": null,
"id": null,
"e": "11111111",
"s": 1,
"y": 28.454329,
"x": 112.598095,
"g": 6,
"xs": -5.286,
"ys": 0.612,
"zs": -8.427,
"time": 1554354430042,
"cTime": "2019-04-04 13:07:10"
}
]
var arr = [],
tno, infoWindow, err = [],
crr = [];
for(var i = 0; i < data.length; i++) {
err.push(data[i].e)
tno = new BMap.Point(data[i].x, data[i].y) //标记点
var marker = new BMap.Marker(tno);
map.addOverlay(marker); //添加到页面
if(i == 0) {
var p1 = new BMap.Point(data[0].x, data[i].y)
} else if(i == data.length - 1) {
var p2 = new BMap.Point(data[i].x, data[i].y)
} else {
arr.push(new BMap.Point(data[i].x, data[i].y)) //排除第一条和最后一条
}
}
map.addEventListener("click", handlerA.bind(this));
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true //自动调整视野
}
});

map.clearOverlays(arr);//删除指定的坐标点
driving.search(p1, p2, {
waypoints: arr
}); //waypoints表示途经点,
function handlerA(e) {
var allOverlay = map.getOverlays();
var p = e.point;
var opts = {
width: 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "安全帽信息", // 信息窗口标题
enableMessage: true //设置允许信息窗发送短息
}
// var push = [];
// for(var i = 0; i<allOverlay.length;i++){
// push.push(allOverlay[i].point)
// if(push[i] == arr[i]){
// map.clearOverlays(arr);
// console.log(1)
// }
// }



for(var i = 0; i < data.length-1; i++) {
if(data[i].x.toFixed(2) == p.lng.toFixed(2) && p.lat.toFixed(2) == data[i].y.toFixed(2)) {
var infoWindow = new BMap.InfoWindow(data[i].e, opts)
map.openInfoWindow(infoWindow, p); //开启信息窗口
}
}



}
</script>

---恢复内容结束---

猜你喜欢

转载自www.cnblogs.com/bohao9625/p/10688082.html