vue中调用高德地图

木豆mudou

已于 2022-11-23 15:17:55 修改

阅读量886

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-10 15:29:23 首次发布

本文链接：https://blog.csdn.net/qq_37146616/article/details/127789173

版权

Vue.js 高德地图 API集成地图组件代理服务器

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

然后进行安装 :

npm install vue-amap --save

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>

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>