vue中使用原生高德地图

1. 引入高德地图  html中

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script>

2.配置 vue.config.js

configureWebpack: {

externals: {

'AMap': 'AMap',

'AMapUI': 'AMapUI'

}

  }

3.使用

<template>

  <div id="Sharingrouter">

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

  </div>

</template>

<script>

var map;

export default {

  data() {

    return {

      aMap: null,

    };

  },

  mounted() {

    this.init();

  },

  methods: {

    init() {

      this.aMap = new AMap.Map("container", {

        resizeEnable: true,

        zoom: 12 //地图显示的缩放级别

      });

    },    

  }

};

</script>

<style  scoped>

#container {

  width: 100%;

  height: 100%;

  position: absolute;

  cursor: pointer;

}

</style>