Vue加载高德地图[打点]

1.在高德pai上申请key值

2.在public/index.html中放入申请到的key值

3.上代码

<template><div class="maps"><div id="container"></div></div></template><script>export default {name: 'maps',data () {return {map: null,}},mounted () {this.getMap()},methods: {//初始化地图getMap () {let _this = this;let map = new window.AMap.Map("container", {resizeEnable: true,center: [116.378517, 39.865246],zoom: 11,});map.on("click", showInfoClick);function showInfoClick (e) {map.clearMap();//清理地图let lng = e.lnglat.getLng(); //获取经度let lat = e.lnglat.getLat(); //获取纬度_this.lnglat = [`${lng}`, `${lat}`]//将经纬度赋值//marker点let marker = new window.AMap.Marker({position: _this.lnglat,// label: {// content: `<b>123 <img src="${poGis}"> </b>`,// },});map.add(marker); //加载点// map.setFitView(); //缩放至地图}},},}</script><style>#container {width: 800px;height: 800px;}</style>