vue中调用高德地图

首先, 要去 高德地图申请开发者key(戳这里)

然后进行安装 :

npm install vue-amap --save
1

main.js

<script>
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 这里需要进行Nginx配置, 详细方法上面的地址里有
  serviceHost: '您的代理服务器域名或地址/_AMapService', 
  // 需要使用的的插件列表
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  v: '1.4.4'
});
script>
1
2
3
4
5
6
7
8
9
10
11
12

vue文件

<template>
            <div class="map">
                <el-amap :dragEnable="true" :zoomEnable="true" class="amap-box" :zoom="zoom" vid="amap-vue" :position="center" :center="center">
                        <el-amap-marker :position="center" :icon="icon">el-amap-marker>
                el-amap>
            div>
template>

<script>
export default {
    data(){
        return {
            center: ['坐标1','坐标2'], // 地图上的点
            icon: '自定义的图标src',
            zoom: '15', //初始化地图级别
        }
    },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果如图: