高德地图api 封装成公共方法用于项目中

目前封装的方法有

入参建议改成对象形式，比较灵活

项目结构

1 主要文件作用

1.1、initMap.js 高德地图api的引入、及注册

import AMapLoader from '@amap/amap-jsapi-loader'const initMap = async (config) => {return new Promise((resolve, reject) => {AMapLoader.load({"key": config.key,"version": "1.4.15","plugins": ['AMap.PolygonEditor' // 插件],"AMapUI": {"version": '1.1',"plugins": [],},"Loca": {"version": '1.3.2'},}).then((AMap) => {resolve(AMap)}).catch(err => {reject(err)})})}export default initMap

1.2 map.js 高德地图api封装方法集合

import initMap from './initMap.js'export const init = (container, props) => {const config = {key: '你的key值'}return new Promise((resolve, reject) => {initMap(config).then(AMap => {resolve(new AMap.Map(container, { ...props }))}).catch(err => {reject(err)})})}/*** * @method {*} getCurrentPosition 定位* @param {*} map 地图实例* @param {Function} success 定位成功的回调* @param {Function} fail 定位失败的回调* @param {Object} otherProps 其他参数，如有需要的话 具体api见/api/javascript-api/reference/location#m_AMap.Geolocation*/export const getCurrentPosition = (map, success, fail, otherProps) => {AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: false,//是否使用高精度定位，默认:truetimeout: 10000, maximumAge: 0, convert: true,showButton: true,buttonPosition: 'RB', showMarker: true,showCircle: true, panToLocation: true, zoomToAccuracy: false, ...otherProps})map.addControl(geolocation);geolocation.getCurrentPosition()AMap.event.addListener(geolocation, 'complete', onComplete)AMap.event.addListener(geolocation, 'error', onError)function onComplete(data) {success(data)}function onError(err) {fail(err)}})}/*** @method {*} addMarker 添加点标记* @param {*} map 地图实例* @param {Array} marker 需要定位的点经纬度集合，结构如 [{ lng: 116.39, lat: 39.9 ，otherProps:{title:'广州'}}]* @param {Function} callback 点标记点击事件回调* @param {Object} otherProps 定位其他属性，止于marker对象数组里面 具体api见/api/javascript-api/reference/overlay#marker* @returns 点标记集合markers*/export const addMarker = (map, marker, callback) => {var markers = marker.map(e => {var mark = new AMap.Marker({position: [e.lng, e.lat], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]...e.otherProps});if (callback) mark.on('click', callback);return mark})map.add(markers);return markers}/*** @method {*} addMarker 移除点标记* @param {*} map 地图实例* @param {Array} marker 由addMarker返回的点标记集合*/export const removeMarker = (map, marker) => {map.remove(marker);}/*** @param {*} map 地图实例* @param {Boolean} noScale 不需要比例尺 true表示不需要* @param {Boolean} noToolBar 不需要工具栏 true表示不需要*/export const initScaleTools = (map, noScale, noToolBar) => {if (!noScale) {map.plugin(["AMap.Scale"], function() {var scale = new AMap.Scale();map.addControl(scale);});}if (!noToolBar) {map.plugin(["AMap.ToolBar"], function() {var tool = new AMap.ToolBar();map.addControl(tool);});}}/*** 信息窗体* @param {*} map 地图实例* @param {Array} center 经纬度* @param {String} content 信息窗体内容*/export const showInfoWindow = (map, center, content) => {var infoWindow = new AMap.InfoWindow({content: content});infoWindow.open(map, center);}/*** * @param {*} map 地图实例* @param {Array} center 经纬度* @param {Number} radius 取值范围：0-50000 范围* @param {Object} otherProps city 页码等其他参数* @param {Function} callback 回调* @param {String} keyword 搜索关键字* /api/javascript-api/reference/search#m_AMap.PlaceSearch*/export const searchNearBy = (map, center, callback, otherProps, keyword, radius) => {map.clearMap()AMap.plugin(['AMap.PlaceSearch'], function() {var placeSearch = new AMap.PlaceSearch({map: map,...otherProps})placeSearch.searchNearBy(keyword || '', center, radius || 1000, callback)})}/*** @param {*} map 地图实例* @param {Function} callback 回调函数* @param {Object} otherProps 其他属性* @param {String} keyword 关键字* @author 曾 -07-09 289515197@*/export const searchByKeyword = (map, callback, otherProps, keyword) => {map.clearMap()AMap.plugin(['AMap.PlaceSearch'], function() {var placeSearch = new AMap.PlaceSearch({map: map,...otherProps,})placeSearch.search(keyword, callback)})}/*** * @param {*} map 地图实例* @param {Number} startLngLat 起点经纬度* @param {Number} endLngLat 终点经纬度* @param {String} city 城市名 默认广州* @param {Function} callback 回调函数* @param {String} panel 容器id* @param {Boolean} isLngLat 是否经纬度查询，如传false 则为名称查询* @param {String} startName 起点名称 * @param {String} endName 终点名称 * @param {Object} otherProps 构造函数其他参数，详见/api/javascript-api/reference/route-search#m_TransferResult*/export const transfer = (map, startLngLat, endLngLat, city, callback, panel, isLngLat = true, startName, endName, otherProps) => {AMap.plugin('AMap.Transfer', function() {var transOptions = {map,city: city || '广州市',panel: panel || 'panel',policy: AMap.TransferPolicy.LEAST_TIME,...otherProps};var transfer = new AMap.Transfer(transOptions);if (isLngLat) {transfer.search(startLngLat, endLngLat, function(status, result) {callback && callback(status, result, transfer)})} else {transfer.search([{ keyword: startName }, { keyword: endName }], function(status, result) {callback && callback(status, result, transfer)})}})}/*** * @param {*} map 地图实例* @param {Number} startLngLat 起点经纬度* @param {Number} endLngLat 终点经纬度* @param {String} city 城市* @param {Function} callback 回调函数* @param {String} panel 容器id* @param {Number} isLngLat 是否经纬度查询 默认是* @param {String} startName 当isLngLat传false时，为起点名称* @param {String} endName 当isLngLat传false时，为终点名称* @param {Object} otherProps 其他属性*/export const walking = (map, startLngLat, endLngLat, city, callback, panel, isLngLat = true, startName, endName, otherProps) => {AMap.plugin('AMap.Walking', function() {var transOptions = {map,city: city || '广州市',panel: panel || 'panel',...otherProps};var warking = new AMap.Walking(transOptions);if (isLngLat) {warking.search(startLngLat, endLngLat, function(status, result) {callback && callback(status, result, warking)})} else {warking.search([{ keyword: startName }, { keyword: endName }], function(status, result) {callback && callback(status, result, warking)})}})}// 清除线路图/*** * @param {*} lineStrory AMap.Walking/transfer 创建的实例对象*/export const clearLine = (lineStrory) => {lineStrory.clear()}// 经纬度获取地址/*** * @param {String} LngLat 经纬度* @param {Function} callback 回调函数* @param {Object} otherProps 其他参数*/export const getAddressByLngLat = (LngLat, callback, otherProps) => {AMap.plugin('AMap.Geocoder', function() {var geocoder = new AMap.Geocoder({...otherProps})geocoder.getAddress(LngLat, function(status, result) {callback(status, result)})})}const mapJS = {init,getCurrentPosition,addMarker,addMarker,initScaleTools,showInfoWindow,searchNearBy,searchByKeyword,transfer,walking,clearLine,getAddressByLngLat}export default mapJS

1.3 map.vue 地图实例页面 其他框架自行修改代码

// 方法引入import { init, getCurrentPosition, addMarker, initScaleTools, removeMarker, transfer, walking, clearLine, searchByKeyword, searchNearBy, getAddressByLngLat } from "@/utils/map.js"// 使用示例 const props = {zoom: 15}init('container', props).then(AMap => {_this.map = AMap_this.map.on('click', this.clickHandler); // 地图点击事件 可获取经纬度等信息getCurrentPosition(_this.map, (res) => {console.log(res);_this.addressComponent = res.addressComponent_this.center = [res.position.lng, res.position.lat]addMarker(_this.map, [{ lng: res.position.lng, lat: res.position.lat, otherProps: { title: '广州' } }], this.markerClick)}, (err) => {console.log(err, '--err');}, {})}).catch(err => {this.$message.error(err);})

另附上两个高德url api在这里插入图片描述

// 关键字搜索window.open(`/search/view/keywords=${keywords}`)// 出行路径规划window.open(`/dir?from[name]=起点&from[lnglat]=${'出发经度'},${'出发维度'}&to[name]=终点&to[lnglat]=${目标经度},${目标维度}&policy=1&type=car`)