高德地图常用方法封装

在开发中，经常用到高德地图，于是总结了一些常用的方法进行封装

动态创建高德脚本

创建 createAMap.js

import { config } from '../config'
import Bus from '../eventBus.js'
class CreateAMap {
	constructor() {
		this.init()
	}
	init () {
		window.initAMap = () => {
			Bus.$emit('AMapIsExist', null)
		}
		let plugins = 'AMap.Driving,AMap.Geocoder,AMap.Walking,AMap.Riding,AMap.Transfer,AMap.Geolocation'
		let script = document.createElement('script')
		script.type = 'text/javascript'
		script.async = true
		script.src = `https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=${config.amapKey}&plugin=${plugins}`
		// script.onerror = reject
		document.head.appendChild(script)
	}
}
let createAMap = new CreateAMap()
export { createAMap }

在 vue 页面使用

import Bus from '../../common/eventBus.js'
import { createAMap } from '../../common/AMap/create'

// 在mounted里try catch
try {
  if (AMap) {
    this.amapLoad()
  }
} catch {
  Bus.$on('AMapIsExist', this.amapLoad)
}

封装高德常用的方法

amap.js 如下:

/**
 * @Description: 进一步封装高德常用的方法
 * @Author: MuYi086
 * @Email: [e-mail]
 * @Blog: https://github.com/MuYi086/blog
 */
class AMAP {
  constructor () {
    this.init()
  }
  init () {
		// 绑定div对象
		let containerId = 'gd-container'
		// 获取最新map对象
		this.newMap = (center) => {
			if (center) {
				return new AMap.Map(containerId, {
					resizeEnable: true,
					center: center, // 地图中心点
					zoom: 13
				})				
			} else {
				return new AMap.Map(containerId, {
					resizeEnable: true,
					zoom: 13
				})	
			}
    }
		/**
		 * 定位
		 * params: {success: '成功回调', fail: '失败回调'}
		 */
		this.location = (success, fail) => {
			var map = this.newMap()
			var geolocation = AMap.Geolocation({	
				enableHighAccuracy: true,//是否使用高精度定位，默认:true
				timeout: 200,          //超过10秒后停止定位，默认：无穷大
				maximumAge: 0,           //定位结果缓存0毫秒，默认：0
				convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
				showButton: true,        //显示定位按钮，默认：true
				buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
				buttonOffset: new AMap.Pixel(10, 120),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
				showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
				panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
				zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
			})
			map.addControl(geolocation)
			geolocation.getCurrentPosition(function(status, result){
				if (status == 'complete'){
					success(result)
				} else {
					fail(result)
				}
			})
		}
		/**
		 * 路径导航：汽车
		 * params: {center: '中心坐标', startLngLat: '开始坐标', endLngLat: '结束坐标', success: '成功回调', fail: '失败回调'}
		 */
		this.carPathNavigation = (center, startLngLat, endLngLat, success, fail) => {
			var map = this.newMap(center)
			var driving = new AMap.Driving({
				map: map
			})
			driving.search(new AMap.LngLat(startLngLat[0], startLngLat[1]), new AMap.LngLat(endLngLat[0], endLngLat[1]), function(status, result) {
				// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
				if (status === 'complete') {
					success(result)
				} else {
					fail(result)
				}
			})
		}
		/**
		 * 路径导航：步行
		 * params: {center: '中心坐标', startLngLat: '开始坐标', endLngLat: '结束坐标', success: '成功回调', fail: '失败回调'}
		 */
		this.walkPathNavigation = (center, startLngLat, endLngLat, success, fail) => {
			var map = this.newMap(center)
			var walking = new AMap.Walking({
				map: map
			})
			walking.search(startLngLat, endLngLat, function(status, result) {
				if (status === 'complete') {
					success(result)
				} else {
					fail(result)
				}
			})
		}
		/**
		 * 路径导航：骑行
		 * params: {center: '中心坐标', startLngLat: '开始坐标', endLngLat: '结束坐标', success: '成功回调', fail: '失败回调'}
		 */
		this.bikePathNavigation = (center, startLngLat, endLngLat, success, fail) => {
			var map = this.newMap(center)
			var riding = new AMap.Riding({
				map: map
			})
			riding.search(startLngLat, endLngLat, function(status, result) {
				if (status === 'complete') {
					success(result)
				} else {
					fail(result)
				}
			})
		}
		/**
		 * 路径导航：公交
		 * params: {center: '中心坐标', startLngLat: '开始坐标', endLngLat: '结束坐标', success: '成功回调', fail: '失败回调'}
		 */
		this.bikePathNavigation = (center, startLngLat, endLngLat, success, fail) => {
			this.parseCoordinate(center, (res) => {
				// 坐标解析出城市
				let city = res.regeocode.addressComponent.city
				var map = this.newMap(center)
				var transOptions = {
					map: map,
					city: city,
					policy: AMap.TransferPolicy.LEAST_TIME
				}
				transfer.search(new AMap.LngLat(startLngLat[0], startLngLat[1]), new AMap.LngLat(endLngLat[0], endLngLat[1]), function(status, result) {
					if (status === 'complete') {
						success(result)
					} else {
						fail(result)
					}
				})
			}, (err) => {
				console.log(err)
			})
		}
		/**
		 * 坐标=>地址
		 * params: {center: '中心坐标', success: '成功回调', fail: '失败回调'}
		 */
		this.parseCoordinate = (center, success, fail) => {
			var geocoder = new AMap.Geocoder({
				city: "010", //城市设为北京，默认：“全国”
				radius: 1000 //范围，默认：500
			})
			geocoder.getAddress(center, function(status, result) {
				if (status === 'complete' && result.regeocode) {
					success(result)
				} else{
					fail(result)
				}
			})
		}
		/**
		 * 地址=>坐标
		 * params: {address: '地址', success: '成功回调', fail: '失败回调'}
		 */
		this.parseAddress = (address, success, fail) => {
			var geocoder = new AMap.Geocoder({
				// city: "010", //城市设为北京，默认：“全国”
			})
			geocoder.getLocation(address, function(status, result) {
				if (status === 'complete' && result.geocodes.length) {
					// var lnglat = result.geocodes[0].location
					success(result)
				} else{
					fail(result)
					// log.error('根据地址查询位置失败')
				}
			})
		}
		/**
		 * 自定义信息窗体
		 * params: {lnglats: 坐标数组, success: '成功回调', fail: '失败回调'}
		 */
		this.renderInfoWindow = (lnglats) => {
			let map = this.newMap()
			var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)})
			for (var i = 0, marker; i < lnglats.length; i++) {
				var marker = new AMap.Marker({
					position: lnglats[i],
					map: map
				})
				marker.content = '我是第' + (i + 1) + '个Marker'
				marker.on('click', markerClick)
				marker.emit('click', {target: marker})
			}
			function markerClick(e) {
				infoWindow.setContent(e.target.content)
				infoWindow.open(map, e.target.getPosition())
			}
			map.setFitView()
		}
		/**
		 * 自定义marker
		 * params: {lnglats: 坐标数组, type: 'clockPoint或luckyBall', contentArr: 'marker内容'}
		 */
		this.modifyMarker = (center, lnglats, type = 'clockPoint', contentArr, success) => {
			let map = this.newMap(center)
			let markers = []
			let index = 0
			for (let i = 0; i < lnglats.length; i++) {
				let marker =  new AMap.Marker({
					position: lnglats[i],
					content: contentArr[i],
					// 以 icon 的 [center bottom] 为原点
					offset: new AMap.Pixel(-13, -30)
				})
				// 如果type是缘分球
				if (type === 'luckyBall') {
					if (i < lnglats.length - 1) {
						marker.on('click', function () {
							// 导航时传出当前坐标
							success(lnglats[i], 'pathTrans')
						})					
					}
				} else { // 如果type是打卡点
					if (i < lnglats.length - 1) {
						marker.on('click', function () {
							success(lnglats[i], 'detail')
						})					
					}
					if (i === lnglats.length - 1) {
						marker.on('click', function () {
							// 导航时传出当前坐标
							success(lnglats[i - 1], 'pathTrans')
						})					
					}					
				}
				markers.push(marker)
			}
			map.add(markers)
			map.setFitView()
		}
		/**
		 * 自定义路径导航
		 * params: {lnglats: 坐标数组, content: 'marker内容'}
		 */
		this.modifyPathTo = (center, startLngLat, endLngLat, success, fail) => {
			var map = this.newMap(center)
			var drivingOption = {
				policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
				ferry: 1, // 是否可以使用轮渡
				// province: '京', // 车牌省份的汉字缩写  
			}
			// 构造路线导航类
			var driving = new AMap.Driving(drivingOption)
			// 根据起终点经纬度规划驾车导航路线
			driving.search(new AMap.LngLat(startLngLat[0], startLngLat[1]), new AMap.LngLat(endLngLat[0], endLngLat[1]), function(status, result, map) {
				// result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
				if (status === 'complete') {
					if (result.routes && result.routes.length) {
						// 绘制第一条路线，也可以按需求绘制其它几条路线
						success(result.routes[0], map)
					}
				} else {
					fail(result)
				}
			})
		}
		/**
		 * 自定义窗体锚点
		 * params: {map: '当前map对象', center: '中心坐标', anchor: '展示位置:', content: '展示内容'}
		 * anchor: 左上'top-left'; 上中'top-center'; 右上'top-right'; 左中'middle-left'; 中'center'; 右中'middle-right'; 左下'bottom-left'; 下中'bottom-center'; 右下'bottom-right';
		 */
		this.modifyWindowMsg = (map, center, anchor, content) => {
			// let map = this.newMap(center)
			let infoWindow = new AMap.InfoWindow({
        anchor: anchor,
        content: content
			})
			infoWindow.open(map, center)
		}
	}
}

let amap = new AMAP()
export { amap }

amap 挂在 util 对象下，方便调用

import { amap } from './amap.js'

module.exports = {
  amap: amap
}

参考

1. 快速上手