一、效果演示
1. 起点终点选择
2. 地址搜索
二、准备工作
1. 获取高德地图key
1.1 访问高德地图官网注册完成后登录，进入控制台
1.2 左侧 应用管理-我的应用，点击创建新应用
1.3 点击添加
1.4 选择Web端(JS API)
1.5 创建完成，得到key和安全密钥
2. 引入高德地图npm包
npm i @amap/amap-jsapi-loader --save三、正式开始写代码
提示：以下代码全部在*.vue文件中编写，无其他文件
1. 设置key和安全密钥，初始化地图
把xxxxxxxxxxxxxxxxxxx换成自己申请的
import AMapLoader from "@amap/amap-jsapi-loader";// 设置安全密钥window._AMapSecurityConfig = {securityJsCode: 'xxxxxxxxxxxxxxxxx',}export default {mounted() {this.initMap();},data(){return {//提交表单form:{},//地图实例map: null,//路径坐标点集合coordinateList: [],//起点坐标startCoordinate: {},//终点坐标endCoordinate: {},//起点坐标描述startCoordinateDescription: '经度：请选择起点' + ', 纬度：请选择起点' ,//终点坐标描述endCoordinateDescription: '经度：请选择终点' + ', 纬度：请选择终点',//选择起点isStart: true,//起点MarkerstartMarker: null,//终点MarkerendMarker: null,//搜索点MarkersearchMarker: null,// 搜索提示AutoComplete: null,// 搜索关键字keywords: "",// 搜索节流阀loading: false,// 搜索提示信息options: [],}},methods: {//初始化地图initMap() {AMapLoader.reset()AMapLoader.load({key: 'xxxxxxxxxxxxxxxxxxxxxxxxx',version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker'],// 需要使用的的插件列表AMapUI: {version: '1.1',plugins: []}}).then((AMap)=>{// 初始化地图this.map = new AMap.Map('guide-map',{viewMode : "2D",//是否为3D地图模式zoom : 13, // 初始化地图级别center : [113.370824,23.131265], //中心点坐标广州resizeEnable: true,willreadoften: true});//鼠标点击事件this.map.on('click', this.clickMapHandler)// 搜索提示插件this.AutoComplete = new AMap.AutoComplete({ city: "全国" });}).catch(e => {console.log(e);});}}}2. 选取起点和终点
// 点击地图事件clickMapHandler(e){//选择起点if (this.isStart){if (this.startMarker !== null){this.map.remove(this.startMarker)}this.startCoordinate.lon = e.lnglat.getLng()this.startCoordinate.lat = e.lnglat.getLat()this.startCoordinateDescription = '经度：' + this.startCoordinate.lon + ', 纬度：' + this.startCoordinate.lat//标点this.startMarker = new AMap.Marker({position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '起点',label: {content: '起点'}})// 将创建的点标记添加到已有的地图实例this.map.add(this.startMarker)}//选择终点else {if (this.endMarker !== null){this.map.remove(this.endMarker)}this.endCoordinate.lon = e.lnglat.getLng()this.endCoordinate.lat = e.lnglat.getLat()this.endCoordinateDescription = '经度：' + this.endCoordinate.lon + ', 纬度：' + this.endCoordinate.latthis.endMarker = new AMap.Marker({position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '终点',label: {content: '终点'}})this.map.add(this.endMarker)}}3.搜索地址功能
// 搜索地址remoteMethod(query) {if (query !== "") {this.loading = true;setTimeout(() => {this.loading = false;this.AutoComplete.search(query, (status, result) => {this.options = result.tips;});}, 200);} else {this.options = [];}},// 选中提示currentSelect(val) {// 清空时不执行后面代码if (!val) {return ;}// 自动适应显示想显示的范围区域this.map.setFitView();//清除markerif (this.searchMarker){this.map.remove(this.searchMarker)}//设置markerthis.searchMarker = new AMap.Marker({map: this.map,position: [val.location.lng, val.location.lat],});this.keywords = val.name//定位this.map.setCenter([val.location.lng, val.location.lat])}4. 页面代码
选择起点选择终点搜索：{{ item.name }}{{item.district}}5. 全部代码
选择起点选择终点搜索：{{ item.name }}{{item.district}}import AMapLoader from "@amap/amap-jsapi-loader";// 设置安全密钥window._AMapSecurityConfig = {securityJsCode: 'xxxxxxxxxxxxxxxxx',}export default {mounted() {this.initMap();},data(){return {//提交表单form:{},//地图实例map: null,//路径坐标点集合coordinateList: [],//起点坐标startCoordinate: {},//终点坐标endCoordinate: {},//起点坐标描述startCoordinateDescription: '经度：请选择起点' + ', 纬度：请选择起点' ,//终点坐标描述endCoordinateDescription: '经度：请选择终点' + ', 纬度：请选择终点',//选择起点isStart: true,//起点MarkerstartMarker: null,//终点MarkerendMarker: null,//搜索点MarkersearchMarker: null,// 搜索提示AutoComplete: null,// 搜索关键字keywords: "",// 搜索节流阀loading: false,// 搜索提示信息options: [],}},methods: {//初始化地图initMap() {AMapLoader.reset()AMapLoader.load({key: 'xxxxxxxxxxxxxxxxxxxxxxxxx',version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker'],// 需要使用的的插件列表AMapUI: {version: '1.1',plugins: []}}).then((AMap)=>{// 初始化地图this.map = new AMap.Map('guide-map',{viewMode : "2D",//是否为3D地图模式zoom : 13, // 初始化地图级别center : [113.370824,23.131265], //中心点坐标广州resizeEnable: true,willreadoften: true});//鼠标点击事件this.map.on('click', this.clickMapHandler)// 搜索提示插件this.AutoComplete = new AMap.AutoComplete({ city: "全国" });}).catch(e => {console.log(e);});},// 点击地图事件clickMapHandler(e){//选择起点if (this.isStart){if (this.startMarker !== null){this.map.remove(this.startMarker)}this.startCoordinate.lon = e.lnglat.getLng()this.startCoordinate.lat = e.lnglat.getLat()this.startCoordinateDescription = '经度：' + this.startCoordinate.lon + ', 纬度：' + this.startCoordinate.lat//标点this.startMarker = new AMap.Marker({position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '起点',label: {content: '起点'}})// 将创建的点标记添加到已有的地图实例this.map.add(this.startMarker)}//选择终点else {if (this.endMarker !== null){this.map.remove(this.endMarker)}this.endCoordinate.lon = e.lnglat.getLng()this.endCoordinate.lat = e.lnglat.getLat()this.endCoordinateDescription = '经度：' + this.endCoordinate.lon + ', 纬度：' + this.endCoordinate.latthis.endMarker = new AMap.Marker({position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '终点',label: {content: '终点'}})this.map.add(this.endMarker)}},// 搜索地址remoteMethod(query) {if (query !== "") {this.loading = true;setTimeout(() => {this.loading = false;this.AutoComplete.search(query, (status, result) => {this.options = result.tips;});}, 200);} else {this.options = [];}},// 选中提示currentSelect(val) {// 清空时不执行后面代码if (!val) {return ;}// 自动适应显示想显示的范围区域this.map.setFitView();//清除markerif (this.searchMarker){this.map.remove(this.searchMarker)}//设置markerthis.searchMarker = new AMap.Marker({map: this.map,position: [val.location.lng, val.location.lat],});this.keywords = val.name//定位this.map.setCenter([val.location.lng, val.location.lat])}}}参考：vue对高德地图的简单使用：点击标记并获取经纬度和详细地址