高德地图根据条件动态渲染窗体信息内容（用户自定义配置）

最新推荐文章于 2024-07-25 09:24:40 发布

fwf_haohaoxuexi

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量277

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52048170/article/details/138349526

版权

文章讲述了在开发中如何让用户自定义高德地图的显示设置，包括如何使用全局缓存存储用户配置，并提醒读者注意在处理字符串类型判断时的小坑。

摘要由CSDN通过智能技术生成

今天在开发中有这样一个需求需要用户自定义配置高德地图的相关显示的设置如下图,根据用户设

置来自定义高德地图的显示情况：看了很多博客但是有一个小坑大家一定要注意！上代码

一，配置用户的设置进行全局的缓存

   // 目标物选项发生变化
    targetChange(value) {
      if (value.detail.data.length == 0) {
        this.targetSetData = ["pId"];
      }
      localStorage.setItem("tData", JSON.stringify(value.detail.value));
      localStorage.setItem("pId", true);
      localStorage.setItem("position", true);
      this.tData = this.targetSetData;
    },

二，在地图页面加载完成后获取当前的配置选项

在点击地图的时候添加相关的信息窗体然后根据条件配置相关的展示内容，这里有个小坑就是在全局缓存获取的是string类型判断的时候一定要注意

// 添加标记点点击事件监听器
			marker.on("click", function (e) {
				if (e.target.CLASS_NAME === "AMap.Marker") {
					var marker = e.target;
					_this.title = `目标ID：${marker.w.id}`
					_this.isMoving =true
					_this.markerId = marker.w.id
					marker.showpId = _this.showpId  //直接配置到marker中
					marker.showPosition = _this.showPosition
					// 打开模态框
					_this.modalName = "bottomModal";
					_this.showFlag = 2

					// 添加信息窗体
					var infoWindow1 = new AMap.InfoWindow({
						offset: new AMap.Pixel(16, -30),
						content: `<div style="text-align:left;" >批号：${_this.markerId}        
                             </div><div style="text-align:left;" >方位： 
                        ${marker.getPosition().lat}</div>`
					})

					var infoWindow2 = new AMap.InfoWindow({
						offset: new AMap.Pixel(16, -30),
						content: `<div style="text-align:left;" >方位： 
                         ${marker.getPosition().lat}</div>`
					})

					var infoWindow3 = new AMap.InfoWindow({
						offset: new AMap.Pixel(16, -30),
						content: `<div style="text-align:left;" >批号：${_this.markerId} 
                         </div>`
					})
					// 设置信息窗体的内容 这里的判断一定要注意 是全局缓存的数据 为string类型
					function setInfoWindowContent(marker) {
						if ( marker.showPosition == 'true' && marker.showpId  == 'true') 
                            {
							infoWindow1.open(map, marker.getPosition());
						} else if ( marker.showPosition  == 'true' && marker.showpId  == 
                                'false') {
								infoWindow2.open(map, marker.getPosition());
 						} else if( marker.showPosition == 'false' && marker.showpId == 
                               'true') {
								infoWindow3.open(map, marker.getPosition());
						}else{
							console.log(444);
							infoWindow3.open(map, marker.getPosition());
						}
					}
					setInfoWindowContent(marker);
					// 添加模拟移动方法
					marker.moving = function() {
						// 更新模态框数据
						updateModalData(marker);
						// 在地图上打开信息窗体
						setInfoWindowContent(marker);
					};

			}
			});

			markers.push(marker);
		}