uni-app（微信小程序）编写小程序加载map地图总结

因为自己想在手机端开发一个应用要应用Vue框架，所以就想到了uni-app，其中一个模块就要加载地图并获取位置信息。这个uni官网给了api，调用也还方面，现就开发中的思路和几个关键方法进行说明，由于uni-app最开始就是以微信小程序为主的，所以他和微信开发者工具基本很类似，他们两个可以互相参考着学习。这里我还是以uni-app为主。

这里要特别注意的一点就是：绘制地图和获取位置信息是两件事。先获取位置信息，再将位置信息展现在地图上。

---

目录

1.绘制地图在手机端

2.获取位置

3.点击地图确定位置

4.效果图展示：

5.源码展示：

6.打包注意

---

1.绘制地图在手机端

直接将标签放上去就可以通过浏览器F12看到一个小地图了，map标签的属性中中心经度longitude，中心纬度latitude，缩放级别scale是要给的，这些数据都放在data中，绑定在标签里，遵守vue以数据为中心驱动的方式。layer-style是腾讯地图中地图样式，可以不设定使用默认的，markers是用来标记你当前位置的。@tap用来获取你点击地图的操作的，后面会说。

详细信息属性看这里：https://uniapp.dcloud.io/component/map

这里有个小坑，就是你通过获取当前手机屏幕高度，宽度设置750rpx的方式想让地图全屏显示，在H5端调试确实没有问题，但是在HbuilderX中运行到真机基座上就会出现宽度不能填充的情况，无论你设置啥，宽度死活留白。后来发现只有在map标签中style设置width：100%，height：100vh。才能让地图在手机端满屏。

2.获取位置

获取位置在API中的位置模块里。注意的是这部分获取位置在H5端可能获取不到，官方说是因为请求的谷歌浏览器，谷歌被墙了。所以在调试这一块的时候一定要在手机上测试，使用HbuilderX上的真机运行调试基座。连接手机测试。

app平台高德SDK仅支持返回gcj02 

下面看一下我都设置了那些参数：

 

这里说明一下，想获取address必须将geocode设置为true，在上面的data里。否则为空，要设置下timeout超时时间，这样不会无限请求位置。

基本思路就是先获取坐标，之后将坐标给map标签和markers各一份，就可以实现刚进入进行定位绘图功能。这里要注意下vue的生命周期函数执行的顺序时机问题。

3.点击地图确定位置

主要通过uni.chooseLocation接口

uni.chooseLocation({
    success: function (res) {
        console.log('位置名称：' + res.name);
        console.log('详细地址：' + res.address);
        console.log('纬度：' + res.latitude);
        console.log('经度：' + res.longitude);
    }
});

在map标签上注册tap事件，在对应的方法中调用这个接口即可。

4.效果图展示：

 

5.源码展示：

6.打包注意

最后要注意的是，若打包发布要申请对应地图的key ，要是手机APP要申请高德地图的key，微信要申请腾讯地图的key。

不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App和阿里小程序是高德地图，百度小程序是百度地图，详见地图map组件的使用注意事项。app中也可以使用百度定位，在manifest中配置，打包后生效。但app-nvue里只能用百度定位，不能用百度地图。另外选择地图、查看地图位置的API也仅支持高德地图。所以App端如无特殊必要，建议使用高德地图。

详细参考在这里：https://uniapp.dcloud.io/component/map