Vue 引入高德地图 vue-amap

一、在高德开发平台，获取Key（已有可跳过）；

高德开发者平台—链接地址

1、控制台——我的应用——创建应用——添加key

创建应用

新建应用

选择web端（JS平台）

last：到这里的 key 就有了，还得到了一个安全密钥；

二、引入vue-amap

1、安装

npm install -S vue-amap

2、在 main.js 里引入

其中更多的插件，请参考：插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com)

import VueAMap from 'vue-amap';Vue.use(VueAMap);// 初始化高德地图的 key 和插件
VueAMap.initAMapApiLoader({key: "这里填写自己的key", // "key"plugin: ['AMap.Autocomplete', // 输入提示插件'AMap.PlaceSearch', // POI搜索插件'AMap.Scale', // 右下角缩略图插件 比例尺'AMap.OverView', // 地图鹰眼插件'AMap.ToolBar', // 地图鹰眼插件'AMap.MapType', // 地图类型切换插件，可用于切换卫星地图'AMap.PolyEditor', // 多边形编辑器，绘制和编辑折现'AMap.CircleEditor', // 圆编辑插件'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置'AMap.Geocoder' // 逆地理编码,通过经纬度获取地址所在位置详细信息// 按实际需求添加插件],v: '1.4.4', // amap版本（默认1.4.4）// uiVersion: '1.0' // 地图ui版本（忽略，就是不配置）
});//高德的安全密钥
window._AMapSecurityConfig = {securityJsCode:"这里填写得到的安全密钥" // "安全密钥",
}

3、HTML部分：编写容器


<template><div><el-main><el-card><div class="amap-page-container"><!-- 搜索框 --><el-amap-search-boxclass="search-box":search-option="searchOption":on-search-result="onSearchResult"></el-amap-search-box><!-- 地图 --><el-amapref="map"vid="amapDemo":amap-manager="amapManager":center="center":zoom="zoom":plugin="plugin":events="events"class="amap-demo"><!-- 标记 --><el-amap-markerv-for="(marker, index) in markers":key="'marker' + index":position="marker.position"/><!-- 位置名称显示 --><el-amap-textv-for="(marker, index) in markers":key="'text' + index":text="marker.text":offset="marker.offset":position="marker.position"/></el-amap></div></el-card></el-main></div>
</template>

4、Script 部分：

引入 AMapManager

import { AMapManager } from "vue-amap";

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {data() {const self = this;return {address: null,searchKey: "北京",amapManager,markers: [],marker: "",searchOption: {// city: "北京", //搜索范围// citylimit: true, //限制搜索范围city: "",citylimit: false, // 不限制搜索范围搜索，比如想全国搜索},zoom: 12,lng: "",lat: "",center: [116.377809, 39.878726],// locate:false,loaded: false,events: {init: (o) => {o.getCity((result) => {console.log(result);let par = document.getElementsByClassName("search-box-wrapper")[0];console.log(par.firstChild);par.firstChild.setAttribute("placeholder","您可以在这里输入要搜索的地址");console.log(result);//todo 定位到搜索位置this.searchOption.city = result.city;});},moveend: () => {},zoomchange: () => {},click: (e) => {let { lng, lat } = e.lnglatself.lng = lngself.lat = lat// 这里通过高德 SDK 完成。var geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})geocoder.getAddress([lng, lat], function (status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {console.log(result);self.address = result.regeocode.formattedAddressself.markers = [];const obj = {position: [lng, lat],text: result.regeocode.formattedAddress,offset: [0, 30],};self.markers.push(obj);// self.sure();self.$nextTick()}}})},},// 一些工具插件plugin: [{// 定位pName: "Geolocation",events: {init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {// console.log(JSON.stringify(result));if (result && result.position) {self.lng = result.position.lng;self.lat = result.position.lat;self.address = result.formattedAddress;self.center = [self.lng, self.lat];//   console.log(self.center, 99666);let o = amapManager.getMap();if (!self.marker) {self.marker = new AMap.Marker({position: self.center,});self.marker.setMap(o);}self.marker.setPosition(self.center);}else{self.$message.error("位置信息，获取失败！")}});},},},{// 工具栏pName: "ToolBar",// locate:true, // 定位// direction:true, // 方向键盘是否可见liteStyle: true, // 精简模式// position:"RB", // 位置，默认为LT 代表 左上方},// "Scale", // 比例尺{// 地图类型pName: "MapType",defaultType: 0,events: {init(o) {console.log(o);},},},],};},created(){// this.searchByHand()},methods: {onSearchResult(pois) {if (pois.length > 0) {console.log(pois);let { lng, lat, name, location, address } = pois[0];//?显示this.markers = [];const obj = {position: [lng, lat],text: address+name,offset: [0, 30],};this.markers.push(obj);this.address = address + name;let center = [lng, lat];this.lng = lng;this.lat = lat;this.center = [lng, lat];let o = amapManager.getMap();if (!this.marker) {this.marker = new AMap.Marker({position: center,});this.marker.setMap(o);}this.marker.setPosition(center);}},},
};
</script>

5、Style部分（自己根据实际场景调试）

<style lang="less" scoped>
.amap-demo {height: calc(100vh - 165px);
}.search-box {position: absolute;top: 25px;right: 120px;
}
.amap-page-container {position: relative;
}
</style>>

最后的效果图：

附官方文档：准备-入门-教程-地图 JS API|高德地图API (amap.com)

文章是一个测试demo；希望大家积极指出文章中的不足之处，有经验的小伙伴，也可以把你的见解分享出来；

Vue 引入高德地图 vue-amap相关推荐

vue 引入高德地图
index.html 引入高德地图 <script type="text/javascript" >AMapLoader.load({"key": ...
Vue 引入高德地图+点击定位
1. npm安装高德地图 npm i @amap/amap-jsapi-loader --save 2. 组件中引入 import AMapLoader from '@amap/amap-jsapi- ...
vue 引入高德地图路线规划
由于vue-amap不支持路线规划,因此不予采纳. 效果如图在index.html的header中引入 <script type="text/javascript" src ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. 第二 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...
在vue中引入高德地图
既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍.高德地图官网简单提一下申 ...