renderjs 高德地图的使用案例

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。
renderjs的主要作用有2个：

• 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
• 在视图层操作dom，运行for web的js库
• renderjs，不止能运行 高德JSAPI，其他如 echart F2、threejs等web库都可以运行

注意事项

• 仅支持 app-vue、h5 端
• 要求 uni-app 2.5.5+以上版本
• app端要求使用v3编译器

示例

ps: 需要给装地图的元素添加高度，不然地图没有高度，显示不出来。

<template>
	<view class="demo"><g-map :mapkey="mapkey" @setMap="setMap"></g-map></view>
</template>

<script>
import gMap from '../components/myMap/index';
export default {
	components: {
		'g-map': gMap
	},
	data(){
		return{
			mapkey:'高德申请key'
		}
	},
	methosd:{
		setMap({myMap, AMap}){
			// 在这里处理 地图的业务
			// 示例 start
			let marker = new AMap.Marker({
				position: new AMap.LngLat(113.656168, 34.746627),
				offset: new AMap.Pixel(-10, -10),
				icon: 'https://vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 实例
				title: '郑州'
			});
			marker.setLabel({
				offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
				content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
				direction: 'bottom' //设置文本标注方位
			});
			myMap.add(marker);
			// 多边形轮廓线的节点坐标数组
			let path = [
					new AMap.LngLat(113.606168, 34.706627),
					new AMap.LngLat(113.676368, 34.748627),
					new AMap.LngLat(113.666268, 34.947627),
					new AMap.LngLat(113.696468, 34.849627)
				],
				path1 = [
					new AMap.LngLat(113.706168, 34.706627),
					new AMap.LngLat(113.776368, 34.748627),
					new AMap.LngLat(113.766268, 34.947627),
					new AMap.LngLat(113.796468, 34.849627)
				];

			let polygon = new AMap.Polygon({
				path: path,
				fillColor: '#fff', // 多边形填充颜色
				borderWeight: 2, // 线条宽度，默认为 1
				strokeColor: 'red' // 线条颜色
			});
			let polygon1 = new AMap.Polygon({
				path: path1,
				fillColor: '#fff', // 多边形填充颜色
				borderWeight: 2, // 线条宽度，默认为 1
				strokeColor: 'red' // 线条颜色
			});

			myMap.add(polygon);
			myMap.add(polygon1);
			// 示例 end
		}
	}
}
</script>

map 组件

想要同时保证在app和h5端都能正常访问到父组件传递的参数， 以:prop="options"为例 options为该组件内接收的父组件参数 'prop’可自定义，但是值得注意的是 :change:prop=“render.updateOption” change后面的’prop’要和刚才自定义的’prop’相同; 'render’为 renderjs标签上module绑定的值 'updateOption’为renderjs内的方法 用于执行更新等操作,意思就是当options值发生变化时 renderjs内的updateOption方法就会被触发。

<template>
  <view class="map-ctx">
    <!-- #ifdef APP-PLUS || H5 -->
    <view
      class="map"
      id="map"
      :mapkey="mapkey"
      :prop="options"
      :status="status"
      :change:mapkey="render.updateKey"
      :change:prop="render.updateOption"
      :change:status="render.setMap"
    ></view>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view>地图组件暂不支持除APP或H5外的其他环境</view>
    <!-- #endif -->
  </view>
</template>

// 在renderjs内加载地图  因为app的环境限制 目前没有找到合适的方法在页面内加载地图实例 所以在renderjs内绘制地图实例如marker点 覆盖物等；
// 示例写在了setMap函数内
<script>
export default {
	props:{
		mapkey: {
	      //地图key值
	      type: String,
	      default: () => {
	        return "";
	      },
	    },
	    options: {
	      //地图配置项
	      type: Object,
	      default: () => {
	        return {
	          zoom: 12, //级别
	          center: [113.656168, 34.746627], //中心点坐标
	          viewMode: "2D",
	          version: "1.4.15",
	        };
	      }
	    },
	    mapSrc:{
	    	type: String
	    }
	},
	data(){
		return {
			status: 1
		}
	},
	methods: {
    	change(data) {
	      this.status = data;
	    }
  	},
}
</script>

<script module="render" lang="renderjs">
let myMap, AMap;
export default {
	mounted() {
		if(!!window.AMap){
			this.initMap()
		} else {
			let v = this.options.version ? this.options.version : '1.4.15';
			let key = this.mapkey,src = this.mapSrc;
			const script = document.createElement('script')
			script.src = `${src}?v=${v}&key=${key}`
			script.onload = this.initMap.bind(this);
			document.head.appendChild(script)
		}
	},
	methods:{
		initMap() {
			AMap = window.AMap
			myMap = new AMap.Map('map', {
				...this.options
			});
			this.$ownerInstance.callMethod('change', {})
		},
		updateOption(newValue) {
			console.log(newValue);
		},
		updateKey(newValue) {
			console.log(newValue);
		},
		setMap(newVal, oldVal, rvm, vm) {
			this.$emit('setMap',{myMap,AMap})
		}
	}
}
</script>

<style lang="scss" scoped>
.map-ctx {
  width: 100%;
  height: 100%;

  .map {
    width: 100%;
    height: 100%;
  }
}

.map-ctx ::v-deep.amap-logo,
.map-ctx ::v-deep.amap-copyright {
  display: none !important;
}
</style>