html+jquery使用高德地图api

1.注册key

登录高德开放平台——点击应用管理下的我的应用——添加key

注册弹框中选择你需要的服务平台，我是分别添加了Web端(JS API)和Web服务

贴一下Web服务api地址
https://lbs.amap.com/api/webservice/gettingstarted
JS API实例
https://lbs.amap.com/demo/javascript-api/example/marker/marker-content

2.地图初始化

新建html，引入jQuery和高德，Web端要写安全密钥

window._AMapSecurityConfig = {
				securityJsCode: "和key一起申请到的安全密钥"
			};

plugin是你要用哪些服务，实现功能的时候一定要写

html：

js:

InitMap(12, getCentercode('天安门'));
			// 初始化高德地图
			var map;
			// 地图初始化
			function InitMap(zoom, arr) {
				map = new AMap.Map('container', {
					zoom: zoom, //级别
					center: arr, //中心点坐标
					viewMode: '3D' //使用3D视图
				});
				//鼠标点击的坐标//经度getLng，纬度getLat
				map.on('click', function(e) {
					let arr = [e.lnglat.getLng(), e.lnglat.getLat()];
				});
			}

这里写了一个getCentercode方法，用于将地址转换为坐标

	function getCentercode(address) {
		$.ajax({
			type: "get",
			url: "https://restapi.amap.com/v3/geocode/geo?address=" + encodeURI(address) +
				"&output=JSON&key=web服务key",
			async: false,
			success: function(res) {
				add = res.geocodes[0].location.split(',');
			}
		})
		return add
	}

代码中encodeURI(address)编码是为了兼容IE

3.地图添加标注点（单个&批量）

1. 添加一个标注点，使用上面的地址转换坐标方法，addMarker()实例化标点【标注点的图标和内容都可以自定义，JS API实例中很详细】

function addMarker(arr) {
				// 点标记显示内容，HTML要素字符串
				var markerContent = ''   +
					'<div class="custom-content-marker">' +
					'   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
					' ' +
					'</div>';

				var marker = new AMap.Marker({
					position: arr,
					// 将 html 传给 content
					content: markerContent,
					// 以 icon 的 [center bottom] 为原点
					offset: new AMap.Pixel(-13, -30)
				});

				map.add(marker); //添加到地图
			}

2. 批量标点
   添加一个标注点，我是请求了编码接口，得到了坐标之后进行标点，这样有个弊端就是，当你标点很多的时候，你的key的调用量消耗的就很快，所以还有批量描点的方法，一次性编译多条地址

var mapDatas = {
	"datas": [ {
		"bankName": "地点1",
		"bankaddress": "常熟市辛庄镇新阳大道"
	}, {
		"bankName": "地点2",
		"bankaddress": "句容市华阳北路"
	}, {
		"bankName": "地点3",
		"bankaddress": "启东市近海镇粮站综合楼"
	}]
}
var markers = [];
var address = mapDatas.datas.map(function(item) { return item.bankaddress } );
	var geocoder = new AMap.Geocoder({
		city: "北京",//默认全国
	});
	function getCode(address) {
		markers = [];
		geocoder.getLocation(address, function(status, result) {
			console.log(address)
			if (status === 'complete' && result.geocodes.length) {
				for (var i = 0; i < result.geocodes.length; i += 1) {
					var marker = new AMap.Marker({
						map: map,
						position: result.geocodes[i].location
					});
					markers.push(marker);
					marker.setMap(map);
				}
				map.add(markers);
			}
		});
	}

4.路径规划
这个功能实现效果就是你传入起点、终点及出行方式，页面跳转到高德官方地图，并展示路线
html

		<div id="popover" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell"><a href=""><i class="iconfont icon-buxing"></i>步行</a></li>
				<li class="mui-table-view-cell"><a href=""><i class="iconfont icon-gongjiao"></i>公交</a></li>
				<li class="mui-table-view-cell"><a href=""><i class="iconfont icon-jiache"></i>驾车</a></li>
			</ul>
		</div>

js

				/*
				 * 初始化出行方案
				 */
				var mode = "";//出行方案
				var origin = "";//起点
				var destination="";//终点
				var as = doc.getElementById("popover").getElementsByTagName("a");
				
				// 定位
				AMap.plugin('AMap.Geolocation', function() {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：5s
						buttonPosition: 'RB', //定位按钮的停靠位置
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

					});
					// map.addControl(geolocation);
					geolocation.getCurrentPosition(function(status, result) {
						if (status == 'complete') {
							startPoint = result.position.lat+','+result.position.lng+','+result.formattedAddress;
							for(var i = 0 ; i<as.length;i++){
								if(i==0){
									mode="walk";//步行方案
								}else if(i==1){
									mode="bus";//公交方案
								}else{
									mode="car";//驾车方案
								}
								as[i].href="https://uri.amap.com/navigation?from="+startPoint+"&to="+endPoint+"&mode="+mode+"&policy=1&src=mypage&coordinate=gaode"
							}
							console.log(result,startPoint,endPoint,mode)
						} else {
							console.log(result.message)
						}
					});
				});
				
				
			})(mui, document)

起点和终点传的都是地理编码，上面有地址转换编码的方法
此处贴上URL API的地址，接口参数写的很详细

记录一下使用高德地图的经历，高德的api写的很详细，示例贴到本地都是可以用的。文章写的不是很清晰，建议看官方文档，这里只粘贴了一部分代码