高德地图

开始先是试用的百度地图，感觉接口很简单但是自定义的东西也会很少，鱼和熊掌不可兼得嘛，于是转战高德地图，这哥俩简直是两个极端，高德地图的API接口真的好多，无论是web还是Android还是IOS。作为一个认真好学的好前端当然是好好研究一下高德的API文档嘛。
所嵌入的地图主要是通过API接口添加一些地图组件，如比例尺插件、鹰眼插件、鱼骨工具条、测距及地图类型切换和自定义的一个简单的缩放按钮（左下角）。地图的默认缩放级别为10，通过setCity('杭州市')传入省市县中文名称可以将城市定位到国内任意地点。

高德地图组件

核心代码

(function(){
	var map =new AMap.Map('map');
	map.setCity('杭州市');
	map.setZoom(10);
	document.getElementById('zoomin').onclick=function(){
		map.zoomIn();
	}
	document.getElementById('zoomout').onclick=function(){
		map.zoomOut();
	}
	// 地图插件
	// 比例尺插件
	map.plugin(['AMap.Scale'],function(){
		var scale = new AMap.Scale();
		map.addControl(scale);
	});
	// 鹰眼插件
	map.plugin(["AMap.OverView"],function(){
	    view = new AMap.OverView();
	    view.open();
	    map.addControl(view);
	});
	// 地图类型切换
	map.plugin(['AMap.MapType'],function(){
		var type=new AMap.MapType();
		map.addControl(type);
	});
	// 鱼骨工具条
	map.plugin(['AMap.ToolBar'],function(){
		var tool=new AMap.ToolBar();
		map.addControl(tool);
	});
	// map.plugin(['AMap.MouseTool'],function(){
	// 	var mousetool=new AMap.MouseTool(map);
	// 	mousetool.measure();
	// });
	
	// 测距
	map.plugin(['AMap.RangingTool'],function(){
		var ruler=new AMap.RangingTool(map);
		ruler.turnOn();
	});
})();

高德地图公交示意图

核心代码

(function(){
	var map =new AMap.Map('map');
	//公共交通
	AMap.service(['AMap.Transfer'],function(){
		var transOptions={
			map:map,
			city:'济南市',
			panel:'panel',
			policy:AMap.TransferPolicy.LEAST_TIME
			};
			var trans=new AMap.Transfer(transOptions);
		trans.search(
			[{keyword:'山东建筑大学（公交站）'},
			{keyword:'山东省博物馆'}],
			function(status,result){
		});
	});
})();

除此之外，高德地图还有很多其他服务接口，像常用的热力图、点集合、信息窗体、点标记、测距（第一个地图可以左键单击测距，右键完成）、测量面积等等。整个高德地图web开发文档给出了非常详细的开发接口和实例，可以根据需要自行加载自己需要的功能。

高德开放平台

高德地图

高德地图API接口

高德地图

FEATURED TAGS

FRIENDS