大前端开发参考库

小程序之高德地图应用

2019-07-01  本文已影响17人  wangxiao001

        小程序地图相关的开发,可以在官方文档上查看基础组件的使用。里面有longitude、latitude、markers和polyline等属性设置,要想开发出比较个性化的地图,还得使用腾讯地图或者高德地图框架。本文主要是基于高德地图的框架使用,完成部分个性化设置。

        步骤一:首先进入高德地图的官网,申请地图使用的key值,如下:

图1、key值的申请

用户可以根据自身需求,更改key值的配置,如下图:

图2、更改配置

     步骤二:下载小程序要使用的SDK文件,并把它放入工程文件中。下载地址:https://lbs.qq.com/qqmap_wx_jssdk/index.html

     步骤三: 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

     步骤四:接下来进行开发流程。如下图,是设置工程使用的key值,并且将SDK 引入工程项目中,此外,还封装了项目常用的高德地图的api,方便用户使用。

图3、公用文件 图4、地图应用的wxml文件

getRegeo() api主要是用于获取用户当前位置;getRoute()主要是获取路线信息;getPoiAround()主要是获取周边信息。

图5、控制页面的js代码 图6、搜索路线 图7、获取周边信息

大致效果如下图:

图8、效果图
上一篇 下一篇

猜你喜欢

热点阅读