vue 高德地图JSAPI（第一篇：创建地图）

 

使用vue-amap

1. 使用npm 安装vue-amap (https://elemefe.github.io/vue-amap/#/)

   npm install vue-amap --save

    

2.  在main.js中引入vue-amap

   import VueAMap from 'vue-amap'
   
   Vue.use(VueAMap)
   
   VueAMap.initAMapApiLoader({
     key: '高德地图申请的key',
     plugin: [//高德地图扩展插件(按需添加)
       'AMap.Autocomplete', // 输入提示插件
       'AMap.PlaceSearch', // POI搜索插件
       'AMap.Scale', // 右下角缩略图插件 比例尺
       'AMap.OverView', // 地图鹰眼插件
       'AMap.ToolBar', // 地图工具条
       'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
       'AMap.PolyEditor', // 编辑 折线多，边形
       'AMap.CircleEditor', // 圆形编辑器插件
       'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置
     ],
     uiVersion: '1.1', // ui库版本，不配置不加载,
     v: '2.0'
   })

    

3. 只需要vue-amap提供的功能请参照https://elemefe.github.io/vue-amap/#/

使用高德官网JSAPI

1. 安装vue-amap，步骤同上
2. 在需要使用高德地图的页面引入lazyAMapApiLoaderInstance，详细功能参考https://lbs.amap.com/

   <template>
     <div>
       <div id="map-test"></div>
     </div>
   </template>
   
   <script>
   import { lazyAMapApiLoaderInstance } from 'vue-amap'
   export default {
     data() {
       return {
         center: [//点标记的坐标
           {
             position: [116.205467, 39.907761]
           }, {
             position: [116.368904, 39.913423]
           }, {
             position: [116.305467, 39.807761]
           }
         ]    
       }
     },
     mounted() {
       lazyAMapApiLoaderInstance.load().then(() => {
         //map-test为div的id
         var map = new AMap.Map('map-test', {
           center: new AMap.LngLat(116.397428, 39.90923)// 地图中心点
         })
         //点标记
         this.center.forEach((center) => {
           new AMap.Marker({
             map: map,//放置点标记的地图
             position: [center.position[0], center.position[1]],
             title: '点标记'
           }).on('click', function() {
             alert('点击了标记')
           })
         })
       })
     },
     methods: {}
   }
   </script>
   
   <style scoped>
     #map-test{
       height:600px;
     }
   </style>

效果图：