高德地图WEB版基础控件展示 原创

尝试过自己搭建旅游导航项目的开发者，大概率都遇到过这个场景：在搜索引擎里翻找方案时，偶然发现高德地图开放平台，然后惊喜地意识到——原来把地图能力集成到自己的项目中，并没有想象中那么复杂。当时顺手申请了一个Key，打算彻底研究一番。起初啃文档确实有点吃力，但翻了几个案例后，终于把高德JS API里那些基础控件摸了个大概。最终效果就是下面这个动图的样子。

直接上代码，先看JS部分，里面有完整的逻辑实现。

接下来是HTML结构，这部分定义了页面的控件布局和交互按钮。

 
 
显示完整鱼骨隐藏鱼骨方向盘长标尺短标尺
显示比例尺隐藏比例尺
显示鹰眼隐藏鹰眼
添加地图类型切换移除地图类型切换
添加圆形编辑器删除圆形编辑器
添加多边形编辑器删除多边形编辑器
鼠标打点工具清除
鼠标画折线工具清除
鼠标画多边形工具清除
鼠标画圆形工具清除
鼠标画矩形工具清除
鼠标测距工具清除
鼠标测面积移除
鼠标框选缩小鼠标框选放大关闭鼠标放大缩小
测距插件隐藏测距
添加自定义控件移除自定义控件
 
 
坐标拾取控件取消坐标拾取

代码中使用的Key是我自己申请的，直接拿来用没问题。当然，你也可以去高德开放平台申请一个专属Key，流程很简单，几分钟就能搞定。