高德api 拖拽导航 去掉起点_小程序开发地图定位导航

这周继续小程序的开发，实现上周未完成的功能

设计图三连

附近医院功能调用的是腾讯的API

腾讯API地址：https://lbs.qq.com/

首先需要完成开发者验证，并设置KEY

之后的开发中可以查看自己的配额管理

如果想提升配额的话可以申请企业开发者或者购买配额

目前做好的功能暂未上线无法查看，截图页面样式(来自iphoneX手机)

由于目前没有各个医院的图片，暂时把图片去掉，更换了下排版。

定位曲周

以上两张定位分别是河北省邯郸市曲周县第一中学和公司位置的定位

同样，全城的搜索也会根据当前定位，选择该定位所在省份的所有市(区)

点击“到这去”之后，进入地图界面，默认打开的是腾讯地图，如果想导航到该医院，点击右下角可以跳转到地图(腾讯地图和你手机上安装的地图)，如果你手机上安装了高德地图，会显示下面的截图

医院详情页面除了几个图片替换了，其他的基本没有变化

测评完结果自动推荐本省的医院，并根据距离排序

 

开发过程中遇到的一些问题汇总

一、判断用户登录(openid)是否过期？

原因：OpenId是在Onlaunch中获取，而OnLaunch是小程序启动事调用，第一次后台如果没有退出。第二次则不会执行该方法；

      首页的OnLoad和OnShow是在首页初始化和显示时执行；

      如果在OnLaunch里的代码执行时间足够长，然后又在首页OnLoad或OnShow里使用OnLaunch里获取到的数据，可能会导致OnLaunch还没执行完，没有获取到数据；

解决办法：在首页的OnShow方法进行过期判断，如果过期则提示，并且再次执行OnLaunch里的内容

二、小程序运行报错：‘getLocation需要在app.json中声明permission字段’

   原因：需要获取用户所在地理位置

   解决办法：在app.json中增加permission属性配置。

"permission": {

　　"scope.userLocation": {

　　　　"desc":"你的位置信息将用于小程序位置接口的效果展示"

　　}

}

三、医院根据距离排序

目前距离是保留小数点后两位，sort排序之后发现不对，如果是整数就没问题

解决办法：使用Math.round(),把小数转换成整数进行判断，拍完序之后再显示小数。

四、页面向js的点击事件(bindtap)传值

解决办法：小程序可以自定义属性，data-xxx,在js中取值                              e.currentTarget.dataset.xxx

同时也是打开地图页面的代码

五、下拉菜单太长，页面会出现连同医院一同滑动(遮罩层及遮罩层下的页面同时滚动)

解决办法：可以在下拉菜单标签添加(遮罩层上加)catchtouchmove='ture'，但是由于某种原因最后没有用它。。。

 

分享开发小程序过程中一些有用的网站

保存页面为图片到本地相册：

https://gitee.com/v-Xie/wxCanvasShar

在线经纬度查询：

http://www.gpsspg.com/maps.html

小程序视频教程(还没看，不知道是否是干货)：

http://b.edu.51cto.com/sxsjxw/course/video?lessonId=361964

高德地图API：

https://lbs.amap.com/api

腾讯地图API：

https://lbs.qq.com/

百度地图API：

http://lbsyun.baidu.com/

End