目前市面上越来越多的应用都是基于地图进行开发,地图在生活中的作用也越来越重要,今天我们就一起来看一下如何基于高德地图API进行开发一个简单的地图应用

主要效果

今天我们要完成的效果是,在中国地图上显示出各个省会城市的位置,并用标识显示出来,北京和台湾用不同的标识显示。效果图如下

效果图

实现方式

  • 引入相关文件

首先引入相关的JS文件,因为高德的API是需要申请的,在文章中我将key值写了一串随机的字符,另外因为需要在地图上标点,所以要引入表示省会城市坐标的marker.js文件

引入文件

  • html元素

html元素很简单,只需要设置一个div即可

页面元素

  • js代码-初始化地图

初始化地图

  • js代码-添加marker

确认省会的坐标后,通过AMap.Marker()方法,创建一个个的点标注

添加marker

  • js代码-添加工具栏

通常在地图的左上角或者左下角,会有控制地图的工具栏以及缩放功能,这些功能类似于一个个的插件,通过AMap.plugin()方法引入

添加工具栏

总结

上述的代码运行完,就可以出现文章一开始的效果

当然,地图的应用不可能这么简单,我们可以跟着高德地图的API去学习,慢慢做出更加实用的效果

1.《高德api如何隐藏路》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《高德api如何隐藏路》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/keji/3301983.html