uniapp | 官方提供的map组件使用问题

1、地图SDK的选择

博主在使用uniapp开发地图功能之前，使用过百度地图的SDK开发web地图功能。在最初的开发上希望能够使用百度地图的SDK，但是uniapp在接入地图功能时和web端开发还是有很大区别的，uniapp提供了一个地图组件<map>，因为产品只涉及到APP端，这里使用的是高德地图的SDK（这也是官方的推荐）

注：在真机调试时，APP端的<map>组件使用的就是高德地图，配置其他的SDK会在打包后使用

2、不同页面文件选择

使用uniapp进行APP开发时，可以选择vue页面（后缀为.vue）和nvue页面（后缀为.nvue），<map>组件在两种页面中的差异就是层级问题，因为在开发地图功能时，往往需要在地图之上绘制一些其他内容：

推荐仔细阅读：Uniapp的map组件介绍

使用vue页面开发（存在层级问题）

想要在map组件上添加其他内容：可以使用map组件中的的marker、control和uniapp中的<cover-view>标签；也可以使用subNvue，因为subNvue是原生的页面，和map组件不存在层级问题

注意：uniapp的<cover-view>标签并不支持相互嵌套，在cover-view中能展示的内容非常有限，涉及到复杂的功能，推荐使用vue页面+subNvue混合开发

使用nvue页面开发（不存在层级问题）
使用nvue页面，需要将nvue页面和vue页面一样在pages.json中配置，在nvue页面中不存在层级问题，可以在map组件中随意嵌套标签，但是nvue页面参考的是weex框架，在布局上只支持flex布局，不支持添加阴影，支持的标签和CSS也有限，并不支持SCSS等CSS处理器这里更正一下，nvue页面支持scss

推荐仔细阅读：Uniapp的nvue框架教程

3、开发常见问题总结

问题1：app在打包后地图不显示？

app打包后地图不显示可能是在manifest.json中没有勾选map组件并配置高德地图或者百度地图的秘钥，这种情况下会出现包含地图的页面打开后地图区域显示为白色。

问题2：使用map组件添加markers后不显示？

这种情况通常是我们需要从后端获取定位点信息，将定位动态展示为地图上的marker，此时的markers绑定的数组是动态改变的，在改变markers绑定的数组后，需要对markers所绑定的数组进行重新赋值，例如：

markers=[{
    
	latitude: 获取的纬度,
	longitude: 获取的经度,
}]//每次都对markers重新赋值

问题3：Android上的marker正常显示，但是ios上的marker不能显示？

这种情况可能是markers在使用的时候没有配置id属性导致的（亲测），这里建议使用时可以参考Uniapp的hello-uniapp中的用法

问题4：map组件的相关JS API使用无效？

这种情况下，通过uni.createMapContext获取到了地图对象，但是使用相关的API却无效。我们使用map的页面必须是在pages.json配置，并且可以使用路由跳转的页面，否则就会导致相关的JS API使用无效，博主遇到此问题时，是在subNvue页面中使用了相关的JS API。

️️博主也是一个使用uniapp开发的小白，如有不对的地方，谢谢指正！️️