vue项目引入高德地图

第一步:先全局安装vue-amap

npm install vue-amap --save(如果有淘宝镜像可以cnpm install vue-amap --save)

第二步:全局引入vue-amap在main.js中

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({

  key: '自己申请的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'

});

如图:

第三步:App.vue中粘贴如下代码(给地图一个盒子):

<template>

  <div id="app">

    <h3 class="title">{{ msg }}</h3>

    <div class="amap-wrapper">

      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>

    </div>

  </div>

</template>

<script>

export default {

  data () {

    return {

      msg: 'vue-amap欢迎您!'

    }

  }

}

</script>

<style>

.amap-wrapper {

  width: 500px;

  height: 500px;

}

</style>

如图:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。