html实现在地图上自动打点,百度地图--实现增加打点（mark）自定义图标、自定义地图样式、 运动轨迹...

需求背景

1、查看某个地区所有业务员的坐标

2、点击业务员坐标可展示具体信息、当前具体地址

3、点击某个业务员名字，自动关联到地图上的位置

4、查看业务员当天的行程轨迹

5、动态切换地图上坐标的自定义图标

6、支持展示所有业务员在可视区内(自适应缩放地图比例，展示所有业务员位置)

之所以没有选择用vue-baidu-map，是因为有bug。。。

如果你之前没有接触过地图方面的开发，建议先去官网熟悉一下api。

百度地图API(javascript API)

具体的参考类

大概会用到以下几个api:

先看一下最终的效果图

显示轨迹的模块

项目是vue项目 我贴一下map.vue的文件代码

html代码👇

只需要一个显示地图的div

全部

v-show="currentItem==='car'">轨迹

js部分👇

import mapStyle from '@/assets/mapStyleJson.json'

import { drawTrack } from '@/libs/util.js'

export default {

name: 'map-module',

props: {

currentItem: {

type: String,

default: ''

}

},

data() {

return {

stewardCoordList: [],

zoom: 10,

// 地图样式

mapStyle: {

styleJson: mapStyle

},

currentCity: '',

myMap: null,

item: '',

mapShow: true,

infoWindow: null,

trackList: []

}

},

watch: {

list: {

handler(newVal, oldVal) {

if (!newVal.length) {

this.myMap.clearOverlays()

return

}

this.stewardCoordList = newVal

// this.currentItem === 'car' && (this.item = 'all')

let translateList = []

this.stewardCoordList.forEach(e => {

// 数组中加icon的url

e.url = this.currentItem === 'car' ? (!e.currentOrder.length ? (

'/static/img/normal.png') : (

'/static/img/warning.png')) : (e.currentOrder.length ?

('/static/img/servicer-busy.svg') : (

'/static/img/servicer-free.svg'))

// 需要转换的坐标数组

translateList.push(new BMap.Point(e.geo.lng, e.geo.lat))

})

let convertor = new BMap.Convertor();

let myGeo = new BMap.Geocoder();

let that = this;

// 百度地图经纬度解析成具体地址

let geocodeSearch = (pt, item) => {

myGeo.getLocation(pt, function (rs) {

if (rs !== null) item.address = rs.address

});

}

let pageSize = 10,

pageCount = translateList.length % 10 === 0 ? Math.floor(translateList.length / 10) : Math

.floor((

translateList.length / 10) + 1);

for (let i = 0; i < pageCount; i++) {

let startIndex = pageSize * i;

let sliceArr = translateList.slice(startIndex, pageSize * (i + 1));

convertor.translate(sliceArr, 1, 5, function (data) {

if (data.status === 0) {

for (let i = 0; i < data.points.length; i++) {

const el = data.points[i];

that.stewardCoordList[startIndex + i].geo.lng = el.lng

that.stewardCoordList[startIndex + i].geo.lat = el.lat

geocodeSearch(sliceArr[i], that.stewardCoordList[startIndex + i])

}

}

// 添加图标marker

setTimeout(() => {

that.addMarker(that.stewardCoordList)

}, 100);

})

}

},

deep: true

},

currentItem(val) {

this.item = val === 'car' ? 'all' : ''

}

},

computed: {

list() {

return this.$store.getters.getter_stewardCoordList

},

geo() {

return this.stewardCoordList.map(e => {

return new BMap.Point(e.geo.lng, e.geo.lat)

})

},