vue中简单使用高德地图

我的环境

1. 电脑系统为Ubuntu，使用vscode编辑器
2. 使用v-cli搭建的脚手架
3. 地图组件使用vue-amap
4. 使用vuetify组件

组件地址

https://elemefe.github.io/vue-amap/#/

首先需要去高德地图申请一个KEY
终端输入以下命令安装vue-amap组件

npm install vue-amap --save

在.vue文件（要显示地图的页面）中写入以下代码

<!-- 地图开始 -->
<v-flex xs12 md10>
  <div class="amap-wrapper">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center">
      <el-amap-marker
        v-for="marker in markers"
        :position="marker.position"
        :label="marker.label"
        :key="marker.position"
      ></el-amap-marker>
    </el-amap>
  </div>
</v-flex>
 <!-- 地图结束-->
          
<script>
export default {
  data() {
    return {
      zoom: 12,
      center: [100.59996, 26.197646],
      markers: [
        { position: [100.59996, 26.197646], label: {content: "Point 1", offset: [10, 30]} },
        { position: [100.49996, 26.157646], label: {content: "Point 2", offset: [10, 30]} }
      ]
    };
  }
};
</script>

<style>
.amap-wrapper {
  width: 100%;
  height: 500px;
}
</style>

在main.js中写入以下代码

import VueAMap from "vue-amap";

Vue.use(VueAMap);
Vue.config.productionTip = false;

VueAMap.initAMapApiLoader({
  key: "3bb4839d0397298c7b2b56ab6100f1f9", //输入自己申请好的高德地图key
  plugin: ["AMap.Autocomplete", "AMap.PlaceSearch", "AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType", "AMap.PolyEditor", "AMap.CircleEditor"],
  v: "1.4.4"
});