高德地图用法

一.地图引入

<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>

二.挂载地图

创建一个盒子 给上宽高

<div id="map"></div>

初始化地图

this.map = new AMap.Map('map', {
    zoom: 16,  //设置地图显示的缩放级别
    center: [114.366248, 30.53886],//设置地图中心点坐标
    // mapStyle: 'amap://styles/',  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
});

注销地图

beforeDestory() {
    this.map.destory()
},

三.添加点位

var marker = new AMap.Marker({
    position: arr,
    icon: new AMap.Icon({
        image: img,
    }),
    offset,
})
this.markArr.push(marker)
// 弹框
var infoWindow = new AMap.InfoWindow({
    content: this.createInfoWindow(content, name, inMid, tips, bottomName),
    anchor: 'bottom-center',
    isCustom: true,
    closeWhenClickMap: true,
    offset: infoOffset
});
// 点击事件
marker.on('click', () => {
    infoWindow.open(map, arr);
})

map.add(marker);

高德地图跟百度地图一样自定义弹框就是往弹框盒子里自己添加 div 然后写样式

createInfoWindow(content, name, inMid, tips, bottomName) {
    var info = document.createElement("div");
    var middle = document.createElement("div");
    var inMiddle = document.createElement("div")
    var spans = document.createElement("div")
    var divtop = document.createElement("div")
    var divnbottom = document.createElement("div")
    divtop.className = 'fff'
    divnbottom.className = bottomName
    divtop.innerHTML = content
    divnbottom.innerHTML = tips
    spans.appendChild(divtop);
    spans.appendChild(divnbottom);
    middle.className = name;
    inMiddle.className = inMid;
    middle.appendChild(inMiddle);
    middle.appendChild(spans);
    info.appendChild(middle);
    return info;
},

如果弹框内添加点击事件只能去写定时器判断这个 dom 是否存在存在用 js 动态添加不能在动态添加 HTML 的时候在标签里写上 onClick 或者 @click 事件这样是没有用的动态添加 element 组件也是没用的

this.setint = setInterval(() => {
    if (document.getElementById("lastImg")) {
        let con = document.getElementById("lastImg")
        con.onclick = () => {
            let list = []
            this.showInDialogImgList = []
            this.showInDialogWhereList = []
            let devChnId = con.getAttribute('devChnId')
            this.positionList.forEach(item => {
                if (item[0].devChnId == devChnId) {
                    list = item
                }
            })
            list.forEach(item => {
                console.log(item);
                if (item.imgUrlS3 && item.imgUrlS3.length) {
                    this.showInDialogImgList.push(item.imgUrlS3)
                } else {
                    this.showInDialogImgList.push(item.imgUrlDahua)
                }
                this.showInDialogWhereList.push({
                    time: item.capDate,
                    name: item.admDevEncoderChnEntity.channelName
                })
            })
            console.log(this.showInDialogWhereList);
            this.innerVisible = true
        };
    }
}, 1000);

记得清除

destory() {
    clearInterval(this.setint)
}

四.添加轨迹

let polyline = new AMap.Polyline({
    map: this.inmap, //初始化的地图变量
    path: this.markerList, //折线的存放数组，很重中。一般是好多经纬度组成的数组。
    outlineColor: '#0484E6',
    strokeColor: "#0484E6",
    strokeOpacity: 0.6,
    strokeWeight: 10,
    borderWeight: 1,
    strokeStyle: "solid",
    strokeDasharray: [0, 0, 0],
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 20,
    strokeStyle: "dashed",
    strokeDasharray: [40, 10]
});

polyline.setMap(this.inmap)

markerList 是一个点位数组

this.markerList.push(new AMap.LngLat(lng, lat))

五.清除点位

找到你想清除的点位将点位添加到数组中类似于上方的 markerList

this.map.remove(this.markArr)

六.清除所有图层

this.inmap.clearMap()

七. 改变中心点位

this.map.setZoomAndCenter(15, [114.123, 30.123])