vue 引用高德地图

vue 引用地图之傻瓜式教程（复制粘贴即可用）

 

npm 下载

npm install vue-amap --save

 

main.js 代码

import AMap from 'vue-amap';

Vue.use(AMap);

AMap.initAMapApiLoader({

    key: 'XXX',//刚刚开发者申请哪里的key, 自行前往官网 ： https://console.amap.com/dev/key/app  -> 登录，我的应用，添加，选择 web（JS），之后生成的key 复制进来即可

    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']

});

 

vue 代码:

<template>

    　　// 注意： 一定得用 id 不能用 class ，用了 class 地图显示不出来

　　<div id="amap-main">

      </div>

</template>

<script type="text/ecmascript-6">

  import { lazyAMapApiLoaderInstance } from 'vue-amap';

  export default{

    name:'near',

    mounted() {

      lazyAMapApiLoaderInstance.load().then(() => {

        this.map = new AMap.Map('amap-main', {center: new AMap.LngLat(121.59996, 31.197646)});

      });

    }

  }

</script>

<style >

    #amap-main{height: 300px;}

</style>