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

作者:袖梨 2022-06-25

之前想自己做一个旅游导航的项目,在网上一搜发现了高德地图开放平台,发现原来高德可以很简单的就应用到自己的项目里面,当即我就申请了一个key来学一学,仔细研究了一下,感觉还挺难的,网上找了找案例什么的,经过这几天,小编把高德的一些基础控件差不多弄了一下,效果图如下图所示:

废话不多说,直接上源码,下面是js代码:

 

下面是HTML代码:

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

在js第一行引入高德地图API中,key值是我自己在高德地图里面创建的也可以用,你们也可以上高德开放平台自行申请key值试一试。

高德开放平台:

这里是本效果图源码下载地址,感兴趣的朋友可以直接下载

相关文章

精彩推荐