uniapp中使用renderjs（二）引入地图

百度地图

<template>
	<view>
		<view class="message">{{message}}</view>
		<!-- :message="message" :change:message="renderTest.messageChanged"
		 service层一旦message发生改变，会调用 renderjs中的messageChanged的方法
		 -->
		<!-- service层data中数据的改变操作放在service层 -->
		<view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" :prop="message"
			:change:prop="renderTest.changeWatch" id="renderId"></view>
	</view>
</template>

<script>
	// service 层
	export default {
		data() {
			return {
				message: "这是service的测试message"
			}
		},
		onLoad() {
			plus.navigator.closeSplashscreen()
		},
		methods: {
			onViewClick(options) {
				console.log(options)
				this.message = options.test
				uni.showModal({
					title: "数据传递",
					content: options.test
				})
			},
			getMessage(options) {
				console.log("测试renderjs调用此方法：" + JSON.stringify(options))
			}
		}
	}
</script>

<style>
	.message {
		font-size: 22px;
		margin-top: 80px;
	}
</style>

<script module="renderTest" lang="renderjs">
	export default {
		data() {
			return {
				map: null
			}
		},
		mounted() {
			// console.log(this.message,"renderjs中可以使用service层传递来的数据")
			// 引入百度地图
			this.$nextTick(() => {
				let _this = this;
				mymap(_this.ak).then((mymap) => {
					var map = new BMapGL.Map('renderId'); // 创建Map实例
					map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 12);
					
					map.enableScrollWheelZoom(true);
					var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
					map.addControl(scaleCtrl);
					_this.map = map;
				});
			});
		},
		methods: {
			initMaps() {
				var map = new BMapGL.Map("renderId"); // 创建Map实例
				map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
				map.enableScrollWheelZoom(true);
			},
			// id 为 renderId的区域，点击触发的事件
			onClick(event, ownerInstance) {
				// 调用 service层的onViewClick方法,传值
				console.log(this.message, "************************")
				ownerInstance.callMethod('onViewClick', {
					test: '这是点击renderjs的区域，向service层传递变量'
				})
			},
			messageChanged(newValue, oldValue, ownerVm, vm) {
				console.log("newValue*********" + newValue)
				console.log("oldValue*********" + oldValue)
				ownerVm.callMethod('getMessage', {
					test: '123'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	#renderId {
		width: 100%;
		height: 2rem;
		background-color: #00818A;
	}
</style>

高德地图

<template>
	<view>
		<view class="message">{{message}}</view>
		<!-- :message="message" :change:message="renderTest.messageChanged"
		 service层一旦message发生改变，会调用 renderjs中的messageChanged的方法
		 -->
		<!-- service层data中数据的改变操作放在service层 -->
		<view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" :prop="message"
			:change:prop="renderTest.changeWatch" id="renderId"></view>
	</view>
</template>

<script>
	// service 层
	export default {
		data() {
			return {
				message: "这是service的测试message"
			}
		},
		onLoad() {
			plus.navigator.closeSplashscreen()
		},
		methods: {
			onViewClick(options) {
				console.log(options)
				this.message = options.test
				uni.showModal({
					title: "数据传递",
					content: options.test
				})
			},
			getMessage(options) {
				console.log("测试renderjs调用此方法：" + JSON.stringify(options))
			}
		}
	}
</script>

<style>
	.message {
		font-size: 22px;
		margin-top: 80px;
	}
</style>

<script module="renderTest" lang="renderjs">
	var marker=[]
	export default {
		data() {
			return {
				map: null
			}
		},
		mounted() {
			// console.log(this.message,"renderjs中可以使用service层传递来的数据")
			if (typeof window.AMap === 'function') {
				this.initAmap()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=yourkey'
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [117.000923, 36.675807],
					zoom: 11
				})
				let marker = new AMap.Marker({
					position: this.map.getCenter()
				})
				markers.push(marker)
				this.map.add(marker)
			},
			// id 为 renderId的区域，点击触发的事件
			onClick(event, ownerInstance) {
				// 调用 service层的onViewClick方法,传值
				console.log(this.message, "************************")
				ownerInstance.callMethod('onViewClick', {
					test: '这是点击renderjs的区域，向service层传递变量'
				})
			},
			messageChanged(newValue, oldValue, ownerVm, vm) {
				console.log("newValue*********" + newValue)
				console.log("oldValue*********" + oldValue)
				ownerVm.callMethod('getMessage', {
					test: '123'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	#renderId {
		width: 100%;
		height: 2rem;
		background-color: #00818A;
	}
</style>