vue高德地图（英文地图+点标记+信息窗体）

npm install vue-amap --save

main.js

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',
  uiVersion: '1.0.11'
});

vue.config.js

configureWebpack: {
    name: name,
    externals: {
      AMap: "AMap",
      AMapUI: "AMapUI"
    }
  },

页面

<template>
  <div id="container"></div>
</template>

<script>
export default {
  data() {
    return {
      ico:require("../../assets/images/img.png"), 
    };
  },
  methods: {
    point() {
      var map = new AMap.Map("container", { 
      resizeEnable: true ,
      lang: "en", // 地图语言（en英文）
      center: [113.918719,22.777607] 
      });
      var lnglats = [[114.070282,24.952484]]; // 点坐标
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -40) });
      for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: lnglats[i],
          map: map,
        });
        marker.content = "<img src='"+this.ico+"' style='float:right;right:0;'/><p>Shenzhen Store Display Tech Inc.</p><p>Address：Store Display Industrial Building, Building B2 ,Tower A，Chen Wenli Industrial Park，Loucun Community,Xinhu Street, Guangming Area,Shenzhen</p><p>Tel:0755-27516651-822</p>";  // 信息窗体显示内容
        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();
    },
  },
  mounted() {
    this.point();
  },
};
</script>

<style lang="scss" scoped>
/deep/.amap-info-content{
  width:500px
}
</style>