高德地图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见https://lbs.amap.com/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,//是否使用高精度定位，默认:true
timeout: 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见https://lbs.amap.com/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 搜索关键字
* https://lbs.amap.com/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 曾 2021-07-09 [email protected]
*/
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 构造函数其他参数，详见https://lbs.amap.com/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(`https://m.amap.com/search/view/keywords=${keywords}`)
// 出行路径规划
window.open(`https://gaode.com/dir?from[name]=起点&from[lnglat]=${'出发经度'},${'出发维度'}&to[name]=终点&to[lnglat]=${目标经度},${目标维度}&policy=1&type=car`)
