uniapp中使用高德地图，进行marker标点，点信息展示，支持app端

上次针对web端做了通常用到的地图信息整理。本次安卓移动端更新内容如下

位置定位、点标记、点击信息展示。

声明：uniapp安卓开发地图不支持腾讯地图，使用高德、百度、谷歌都可。建议使用高德，毕竟代码在下面。

知识点：renderjs、vue、renderjs和js数据交互

一、创建一个地图容器，class样式定义地图大小 

二、创建两个js标签、相当于使用了组件，一个正常写js语法，一个写renderjs使用高德地图。申请高德地图需要key值，因为涉及到jre包，可以让后端帮忙申请。重点在于数据交互。写了注释，直接上代码。

<template>
  <view class="map">
    <view class="component-amap">
      <view class="loading">地图加载中</view>
      <view
        id="amap"
        class="amap"
        :pointList="pointList"
        :change:pointList="ModuleInstance.setParkList"
      ></view>
      <!--  :change:pointList="ModuleInstance.setParkList"
	    这个是renjs的语法 作为沟通数据的桥梁
 	  -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 30.218143, // 纬度
      longitude: 120.280798, // 经度
      pointList: [],
    };
  },
  onShow() {
    this.getPointList();
  },
  methods: {
    getPointList() {
          this.pointList = [
            {
              roadId: 331181207320,
              roadTude: 30.210275,
              roadLong: 120.274004,
              roadTeam: null,
              roadType: null,
              roadAddr: "文明路-宁东路路口",
              roadTeamName: null,
              roadTypeName: null,
              roadName: "文明路-宁东路路口",
              accidentNum: 6,
              percentage: 0,
              colorSign: 12,
              colorType: "#171516",
              accidentRoadType: null,
            },
            {
              roadId: 331181207272,
              roadTude: 30.206122,
              roadLong: 120.234643,
              roadTeam: 4,
              roadType: 18,
              roadAddr: "月明路与江干路路口",
              roadTeamName: "乡镇",
              roadTypeName: "镇",
              roadName: "月明路与江干路路口",
              accidentNum: 3,
              percentage: 0,
              colorSign: 10,
              colorType: "#EECF47",
              accidentRoadType: null,
            },
          ];
    },
    //todo子组件点击坐标 触发
    serviceClick(aa) {
      console.log(aa);
    },
  },
};
</script>
<script module="ModuleInstance" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				layer: null,
				parkList: [],
				markerId: ''
			};
		},
		mounted() {
			if (window.AMap) {
				//todo 如果能访问到AMap直接初始化
				this.initAmap();
			} else {
				//todo 动态引入
				const script = document.createElement('script');
				//todo  先申请key值,填在这里
				script.src = `https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxx`;
				script.onload = () => {
					//todo 初始化地图
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					zoom: 13, //显示的缩放级别
					zooms: [12, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [113.276521, 23.133519],//todo 中心点坐标
					mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782' //todo 地图样式
				});
				//todo 地图创建完成 标注点
				this.map.on("complete", () => {
					this.createLabelsLayer();
				});
			},
			//todo 点坐标
			createLabelsLayer() {
				if (!this.map) return;
				if (!this.layer) {
					this.layer = new AMap.LabelsLayer({
						zIndex: 1000,
						collision: false
					});
					//todo 将点坐标添加到地图
					this.map.add(this.layer);
				}
				this.removeAllOverlay();

				var markers = [];
				var icon = {
					type: 'image',
					//todo 点标记 可自己更改 marker-xxx.png
					image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					size: [26, 34],
					anchor: 'bottom-center',
				};
				var text = {
					// 要展示的文字内容
					content: '',
					direction: 'right',
					//todo 文字在 点标记上的偏移量
					offset: [-20, -5],
					// 文字样式
					style: {
						// 字体大小
						fontSize: 12,
						// 字体颜色
						fillColor: '#22886f',
						// 描边颜色
						strokeColor: '#fff',
						// 描边宽度
						strokeWidth: 1,
					}
				};
				//todo parkList就是所有的坐标点
				this.parkList?.forEach((element, index) => {
					text.content = element.accidentNum + '' || '0'
					text.style.fillColor = element.colorType
					element.position = [element.lng, element.lat];
					var labelMarker = new AMap.LabelMarker({
						position: element.position,
						icon: icon,
						text
					});
					markers.push(labelMarker);
					labelMarker.on('click', (e) => {
						// 给marker绑定事件
						this.openInfo(element);
						this.markerId = element.roadId || element.sourceId
						//!!!重点  数据沟通 触发父组件的方法
						this.$ownerInstance.callMethod('serviceClick', this.markerId)
					});
				});

				// 一次性将海量点添加到图层
				this.layer.add(markers);
				if (!this.isExistImplement) {
					this.isExistImplement = true; //只执行一次
					this.map.setFitView(null, false, [60, 15, 30, 15]); //自适应显示多个点标记
					let zoom = this.map.getZoom(); //获取当前地图级别
					if (zoom > 5) this.map.setZoom(5); //设置地图层级
				}

			},
			//todo 窗体中显示的内容
			openInfo(obj) {
				let domStr = `
               <div class="box-content">
         		 <div class="box-left">
					<h2>
						${obj.accidentNum}
					</h2>
					<span class="num-desc">
						事故总数量
					</span>
        	     </div>
				
			     <div class="box-right">
			 			<span>
						单元名称：${obj.roadName || obj.sourceName}</span>
						<span>
						详细地址：${obj.roadAddr || obj.sourceAddr}
						</span>
				 </div>
				</div>`;
				var infoWindow = new AMap.InfoWindow({
					zIndex: 999,
					offset: [0, -38], //偏移
					content: domStr, //使用默认信息窗体框样式，显示信息内容
				});
				infoWindow.open(this.map, obj.position);
			},
			removeAllOverlay() {
				// 清除地图上所有添加的覆盖物
				this.map.clearMap();
			},
			//接收数组参数
			setParkList(newValue, oldValue, ownerInstance, instance) {
				this.parkList = newValue;
				this.createLabelsLayer();
			},

		},
	};
</script>
<style lang="scss">
.component-amap {
  height: 100%;
  position: relative;

  .loading {
    position: absolute;
    top: 35vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .amap {
    min-height: 300px;
    height: 100%;
    position: relative;
    z-index: 8;
  }
}
::v-deep .box-content {
  display: flex;
  justify-content: space-around;

  .box-left {
    width: 300rpx;

    display: flex;
    flex-direction: column;

    h2 {
      font-size: 60rpx;
      color: #f94a37;
      font-weight: 900;
    }

    .num-desc {
      font-size: 30rpx;
      color: #666;
      font-weight: 800;
    }
  }

  .box-right {
    background: #4d272a;
    margin-top: 10rpx;

    span {
      padding: 0 15rpx;
      display: inline-block;
      color: #fb473f;
    }

    span:nth-child(1) {
      margin-bottom: 10rpx;
    }

    span:nth-child(2) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>

重点在于数据交互，在组件引用时通过:change:pointList="ModuleInstance.setParkList" 

将数据传给renderjs进行点渲染。点击点坐标的时候通过this.$ownerInstance.callMethod('serviceClick', this.markerId)将点的id信息给父组件

感谢支持，交流群入口：

 前端之家企鹅群：610408494