高德地图
开始先是试用的百度地图,感觉接口很简单但是自定义的东西也会很少,鱼和熊掌不可兼得嘛,于是转战高德地图,这哥俩简直是两个极端,高德地图的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.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开发文档给出了非常详细的开发接口和实例,可以根据需要自行加载自己需要的功能。
高德开放平台