百度地图api根据后台数据添加多个坐标点

2024-03-16 01:00| 来源: 网络整理| 查看: 265

百度地图添加多个坐标点

百度地图api添加坐标点，项目中遇到，坐标点根据后台去获取数据，效果如下：在这里插入图片描述点击坐标点弹框，效果如下：首先要引用百度地图api的链接还有密码，下面代码，都能实现上述图标的效果，就是把后台获取的数据，字段名字改一下，就可以了

js代码，这个坐标是从后台获取的经纬度。所以设置了全局变量去保存经纬度了

// // 全局变量这个是坐标的 var mapList = [] // // 请求地图的坐标 $.ajax({ type: 'POST', url: url, async: false, success: function (data) { // console.log(data) if (data.status === 200) { // console.log(data.data) for (var i = 0; i < data.data.length; i++) { // console.log(data.data[i].coordinates.split(',')) // console.log(data.data) mapList.push(data.data[i]) } // console.log(mapList) } } })

下面是初始化地图的，坐标点根据后台返回的一个字段去显示不同的左边颜色，这个坐标我用的是图标的，vue项目中要把那个坐标图片路径用 require()

// 初始化百度地图 var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 9); var marker = new BMap.Marker(point); // map.addOverlay(marker); map.enableScrollWheelZoom(true); function markerFun(points, infoWindows, icon) { var markers = new BMap.Marker(points, { icon: icon }); map.addOverlay(markers); markers.addEventListener('click', function (event) { map.openInfoWindow(infoWindows, points);//参数：窗口、点根据点击的点出现对应的窗口 }) } // console.log(mapList) for (var i = 0; i < mapList.length; i++) { // console.log(mapList[i].coordinates.split(',')) var x = Number(mapList[i].coordinates.split(',')[0]) var y = Number(mapList[i].coordinates.split(',')[1]) // console.log(y) // 根据不同的状态设置不同的标记 if (mapList[i].status != 0) { var icon = new BMap.Icon('/dist/img/map_marker.png', new BMap.Size(20, 32), { anchor: new BMap.Size(10, 30) }) } else { var icon = new BMap.Icon('/dist/img/map_markerb.png', new BMap.Size(20, 32), { anchor: new BMap.Size(10, 30) }) } var html = '井号：' + mapList[i].siloNumber + '' + '地址:' + mapList[i].address + '' + '状态：' + status var points = new BMap.Point(x, y);//创建坐标点 var opts = { width: 300, height: 100, title: '管理员姓名： ' + mapList[i].adminName } var infoWindows = new BMap.InfoWindow(html, opts); markerFun(points, infoWindows, icon); }

【本文地址】

公司简介

联系我们