uniapp开发问题记录之地图模块——（二）

本来需求还算是比较简单的，就是在地图上动态显示一些设备的标注，点击标注弹出一些详情弹窗，然后做一些返回中心点的功能。根据惯例，还是先看文档，从文档可以看出，大部分功能是对nvue的APP和小程序支持，而且官方也建议用nvue写地图组件。

 但是当我们用nvue引入地图时，遇到以下一些问题：

1.css是各种另类的写法，文档也有说明，而且有些最新的css语法还不支持，算是一个比较不习惯的地方吧

2.引入地图，设置宽高后，不知为什么显示的永远只有一小块地方，好像宽高设置没效果一样的。

3.因为全局用了阿里巴巴的iconfont，项目又是唯独地图页面用的nvue，所以字体报错，官方文档也有说明。

最后果断用了vue页面。

1. 使用vue开发的APP，功能有点少，还有就是控件功能也有点鸡肋，因为只可以设置位置，图片，点击事件，既不能编辑自定义模板，又不能控制显示隐藏

2.标注点的渲染问题：因为要渲染多种设备标注点，调用多个接口调取数据，而地图标注点是用一个数组保存，而不是像vue-map一样可以分开渲染，而且因为不是nvue，不支持地图更新事件，所以必然会导致地图已经加载，但是数据还没获取到。可以绑定v-show控制显示隐藏，获取数据后重新显示。

3.还有一点需要注意的是，也许你的坐标数据是百度地图的坐标，但是APP支持的是高德地图的火星坐标系，所以需要转换，不然位置会有偏差，直接去网上找一段转换代码即可。

4.uniapp官方提供了一个cover-view组件，可以覆盖在地图、video、textarea、canvas等组件上，但是里面只可以写文字，连text，view这样的组件都不能嵌套，只可以嵌套cover-image，一般覆盖地图的组件都需要自定义布局，这个就有点鸡肋了。

5.页面之间传值：注意：页面传值所注册的事件是全局事件，所以注册一个事件，其他页面都可以用，而且在接收值页面当页面卸载时需要注销该事件，否则事件会越积越多。

传值页面：

uni.navigateTo({
									    url: '../detail/terminal_detail'
									})
									// 触发自定义事件并进行传值
									uni.$emit('goTerminal', that.datas)

接收值页面（去到的页面）：

onLoad() {
			uni.$on('goLamp', this.goLamp)
		},
		onReady() {
			// 更改导航栏背景色
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#0050D3'
			})
		},
		onUnload() {
			// 移除全局监听事件，否则会越积愈多（与定时器类似）
			 uni.$off('goLamp', this.goLamp)
		},
methods: {
  // 进入灯控详情传入灯控信息
			goLamp(e) {
				this.lampInfo = e
				// H5无效
				uni.setNavigationBarTitle({
				    title: `灯控器详情-${this.lampInfo.comid}`
				})
				console.log('灯控信息', this.lampInfo)
			},
}