高德地图

高德地图 – 相关配置

1、驾车路线

let drivingOption = {
	policy: AMap.DrivingPolicy.LEAST_TIME,  // 驾车策略：具体请查看 -- https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
	province: "浙", // 车牌省份的汉字缩写
}

// 构造路线导航类
let driving = new AMap.Driving(drivingOption)

//startPoint: 起点   endPoint: 终点
driving.search(startPoint, endPoint, (status, result) => {
	if (status === "complete") {
		if (result.routes && result.routes.length) {
			// 绘制第一条路线，也可以按需求绘制其它几条路线
            drawRoute(result.routes[0]);
            // log.success('绘制驾车路线完成')
          }
	} else {
		// console.log('获取驾车数据失败：' + result)
	}
})

// 绘制路线
function drawRoute (route) {
	let path = parseRouteToPath(route);
    let routeLine = new AMap.Polyline({
		path: path,
        isOutline: true,
        outlineColor: "#ffeeee",
        borderWeight: 2,
        strokeWeight: 5,
        strokeColor: lineColor,
        lineJoin: "round",
	})

    routeLine.setMap(map);
        
	let startMarker = new AMap.Marker({
		position: path[0],
		icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
		map: map,
	})
        
    let endMarker = new AMap.Marker({
       	position: path[path.length - 1],
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
        map: map,
    })
	// 调整视野达到最佳显示区域
	map.setFitView([startMarker, endMarker, routeLine]);
}

function parseRouteToPath (route) {
	let path = [];
    for (let i = 0, l = route.steps.length; i < l; i++) {
		let step = route.steps[i];
        for (let j = 0, n = step.path.length; j < n; j++) {
            path.push(step.path[j]);
        }
    }
    return path;
}

2、只显示一个省

let map = new AMap.Map('container', {
	center: [120.15, 29.38],  // 中心坐标
	viewMode: '3D',
	pitch: 0,  // 维度
	zoom: 8,
	mapStyle: 'amap://styles/35a6bf21531ab1dec6ef0ac93b295c1d',   // 自定义地图样式，需要关联自己的 key
})

let opt = { extensions: 'all', subdistrict: 0 }
let districtSearch = new AMap.DistrictSearch(opt)
districtSearch.search('浙江省', (status, result) => {
// 外多边形坐标数组和内多边形坐标数组
const outer = [
	new AMap.LngLat(-360, 90, true),
	new AMap.LngLat(-360, -90, true),
	new AMap.LngLat(360, -90, true),
	new AMap.LngLat(360, 90, true),
]
const holes = result.districtList[0].boundaries

const pathArray = [outer]
pathArray.push.apply(pathArray, holes)
const polygon = new AMap.Polygon({
	pathL: pathArray,
	//线条颜色，使用16进制颜色代码赋值。默认值为#006600
	strokeColor: 'rgb(255, 217, 0)',
	strokeWeight: 4,
	//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
	strokeOpacity: 0.5,
	//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
	fillColor: 'rgba(255,255,255,0.5)',
	//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
	fillOpacity: 1,
	//轮廓线样式，实线:solid，虚线:dashed
	strokeStyle: 'dashed',
	strokeDasharray: [10, 2, 10]
})
polygon.setPath(pathArray)
map.add(polygon)

3、点标记 – 文本标记

let style = {
	'padding': '0 0',
	'margin-bottom': '0',
	borderRadius,
	backgroundColor,
	// 'opacity': 0.7,
	'width': wh,
	'height': wh,
	'border-width': '1px',
	'border-color': pointColor,
	'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
	'text-align': 'center',
	'line-height': wh,
	'font-size': '14px',
	'font-weight': 'bold',
	'color': pointColor
}
let marker = new AMap.Text({
	text: '', // 自定义文本内容
	anchor: 'center', // 设置文本标记锚点
    draggable: false, // 是否可以拖拽
    cursor: 'pointer',
    angle: 10,
    style: style, // 自定义样式
    position: [lng, lat] // 坐标经纬度
})

// 其中，可以通过 marker.demo 的形式添加自定义属性

其他点标记，请查看官方文档：https://lbs.amap.com/api/javascript-api/example/marker/text

4、信息窗体 – 自定义

// 实例化信息窗体
let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -17) });

// 设置内容
let content = []
content.push(`<p style="font-weight: bold; margin-bottom: 5px; color: red;">高德地图</p>`)
content.push(`<p class="row"><span class="label">序号：</span><span>1</span></p>`)
content.push(`<p class="row"><span class="label">位置：</span><span>杭州</span></p>`)
content.push(`<p class="row"><span class="label">方向：</span><span>杭向</span></p>`)
content.push(`<p class="row"><span class="label">2020-09-18</span></p>`)

// 添加点击事件  marker: 点坐标
AMap.event.addListener(marker, 'click', () => {
    infoWindow.setContent(createInfoWindow(content));
    infoWindow.open(map, marker.getPosition())
})

createInfoWindow (content) {
	let info = document.createElement("div")
	info.className = 'amap-info-content'
	let closeBtn = document.createElement("span")
	closeBtn.innerText = 'x'
	closeBtn.className = 'close-btn'
	closeBtn.onclick = closeInfoWindow
	let bottom = document.createElement("div")
	bottom.className = 'bottom-box'
	let contentBox = document.createElement("div")
	contentBox.className = 'content-box'
	contentBox.innerHTML = content.join('')
	info.appendChild(contentBox)
	info.appendChild(closeBtn)
	info.appendChild(bottom)
	return info
}

// 关闭信息窗体
closeInfoWindow () {
    map.clearInfoWindow()
}

具体请查看官方文档：https://lbs.amap.com/api/javascript-api/example/infowindow/default-style-infowindow

继续补充中。。。