高德地图的开发和常用 API 的使用
1.引入高德地图的 API 文件
2.创建地图容器
在你想要展示地图的页面中，创建一个 div 容器，并制定 id 标识：
同时制定容器大小。
#container {width:300px; height: 180px; } 3.创建地图，设置中心点和级别等配置
mapMethods = new AMap.Map('container', {
center: [113.84513250000002, 32.885113878375115], // 默认中心点
resizeEnable: true,
zoom: 5,
zooms: [3, 12], // 缩放范围, 最大19
mapStyle: 'amap://styles/fresh', // 地图的主题,官方有提供
})4.创建点标记
同地图一样，点标记可以在创建的时候设定位置等属性，如果设定了map属性的话，marker点将被立即添加到地图上：
var startMarker = new AMap.Marker({
position: [116.480983, 39.989628],
icon: getOriginIcon(),
map: mapMethods,
})
mapMethods.add([startMarker])5.创建折线
var routeLine = new AMap.Polyline({
path: path, // 折线的节点坐标数组
borderWeight: 2,
strokeWeight: 5, // 线宽
strokeColor: 'green', // 线条颜色
})
routeLine.setMap(mapMethods) // 设置折线所在的地图。更多详情：请看 高德地图 API 之 Polyline 类绘制折线。
6.创建信息窗体
var infoWindow = new AMap.InfoWindow({
content: `消息内容`,
offset: new AMap.Pixel(16, -45),
})
var onMarkerClick = function (e) {
infoWindow.open(mapMethods, e.target.getPosition()) // 打开信息窗体
// e.target就是被点击的Marker
}
shipMarker.on('click', onMarkerClick)6.地址转经纬度
使用 AMap.Geocoder 方法用于地址描述与坐标间的互相转换
高的开放平台：地理编码（地址转坐标）案例。
handleGeocoder 方法传入 address 参数，返回一个 Promise 对象。将解析成功的地址使用 resolve 方法返回经纬度，否则返回 解析失败。
handleGeocoder (address) {
return new Promise((resolve, reject) => {
AMap.plugin('AMap.Geocoder', function () {
const geocoder = new AMap.Geocoder() // 地址解析对象
geocoder.getLocation(address, (status, result) => {
if (status === 'complete' && result.geocodes.length) {
const position = result.geocodes[0].location
resolve({
lat: position.lat,
lng: position.lng,
})
} else {
reject('地址解析失败, 请刷新重试')
}
})
})
})
},7.创建驾车路线
参考：高德地图驾车服务案例
AMap.plugin(['AMap.Driving'], function () {
// 构造路线导航类
var driving = new AMap.Driving()
// 据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
// result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.log('绘制驾车路线完成')
} else {
console.log('获取驾车数据失败：' + result)
}
})
})new AMap.LngLat() ：经纬度坐标，确定地图上的一个点
new AMap.Pixel()：像素坐标，确定地图上的一个像素点。
mapMethods.setFitView([ startMarker, endMarker, routeLine ])：自动适配到合适视野范围。
无参数，默认包括所有覆盖物的情况；传入覆盖物数组，仅包括数组里的情况；
mapMethods.clearMap() ：清除地图上所有添加的覆盖物