【vue引用原生高德地图并多点标注】

大家好，又见面了，我是你们的朋友全栈君。

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>

然后在你创建的项目中设置一个div标签，要设置宽高

<template>
  <div>
    <div id="container" style="width: 100%;height: 550px"></div>
  </div>
</template>

在script中

<script>
export default { 

data() { 

return { 

//要标记的所有点的经纬度
lnglats: [
[108.909074, 34.254225],
[108.910766, 34.254348],
[108.910495, 34.253531],
[108.909502, 34.253571],
],
}
},
mounted() { 

this.carGPSIP()
},
methods: { 

carGPSIP() { 

var map = new AMap.Map("container", { 
resizeEnable: true});//初始化地图
//信息窗口实例
var infoWindow = new AMap.InfoWindow({ 
offset: new AMap.Pixel(0, -30)});
//遍历生成多个标记点
for (var i = 0, marker; i < this.lnglats.length; i++) { 

var marker = new AMap.Marker({ 

position: this.lnglats[i],//不同标记点的经纬度
map: map
});
marker.content = '我是第' + (i + 1) + '个Marker';
marker.on('click', markerClick);
marker.emit('click', { 
target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体
}
function markerClick(e) { 

infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
},
}
</script>