目前市面上越来越多的应用都是基于地图进行开发,地图在生活中的作用也越来越重要,今天我们就一起来看一下如何基于高德地图API进行开发一个简单的地图应用
主要效果
今天我们要完成的效果是,在中国地图上显示出各个省会城市的位置,并用标识显示出来,北京和台湾用不同的标识显示。效果图如下
效果图
实现方式
引入相关文件
首先引入相关的JS文件,因为高德的API是需要申请的,在文章中我将key值写了一串随机的字符,另外因为需要在地图上标点,所以要引入表示省会城市坐标的marker.js文件
引入文件
html元素
html元素很简单,只需要设置一个div即可
页面元素
js代码-初始化地图
初始化地图
js代码-添加marker
确认省会的坐标后,通过AMap.Marker()方法,创建一个个的点标注
添加marker
js代码-添加工具栏
通常在地图的左上角或者左下角,会有控制地图的工具栏以及缩放功能,这些功能类似于一个个的插件,通过AMap.plugin()方法引入
添加工具栏
总结
上述的代码运行完,就可以出现文章一开始的效果
当然,地图的应用不可能这么简单,我们可以跟着高德地图的API去学习,慢慢做出更加实用的效果