经验交流区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 前端
查看: 784|回复: 3

[提问] 百度地图信息窗口内自定义按钮无法添加事件

[复制链接]

1

主题

2

帖子

9

积分

新手上路

Rank: 1

积分
9
发表于 2017-9-18 18:18:54 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 daisy 于 2017-9-19 09:19 编辑

如图,点击地图标记点,弹出信息窗口,窗口内自定义了一个“查看图片”按钮,添加不上点击事件。
1.png
分享、交流、沉淀
回复

使用道具 举报

3

主题

22

帖子

168

积分

版主

Rank: 7Rank: 7Rank: 7

积分
168
发表于 2017-9-19 09:19:24 | 显示全部楼层
请将主要的JS代码发上来,以便分析原因。
欢迎访问经验交流区
回复 支持 反对

使用道具 举报

1

主题

2

帖子

9

积分

新手上路

Rank: 1

积分
9
 楼主| 发表于 2017-9-19 09:20:25 | 显示全部楼层
[JavaScript] 纯文本查看 复制代码
var hfwAlarmData;
	function getHfwAlarm(){
		$.ajax({
			type: "get",
			dataType: "json",
			async: false,
			url: rootPath+"/jfwwatcher/getAllHfwWatcher/distribution",
			success: function(res){
				if(res.head.respCode == "0000000"){
					hfwAlarmData = res.body;
				}
			}
		});
		return hfwAlarmData;
	}
	getHfwAlarm();
	
	//获取所有经纬度
	var points = [];
	$.each(hfwAlarmData, function(i, item){
		var hfwAlarmPoint = new Object();
		hfwAlarmPoint.lng = parseFloat(item.xPosition);
		hfwAlarmPoint.lat = parseFloat(item.yPosition);
		points.push(hfwAlarmPoint);
	})
	//信息格式化
	var contents = [];
	$.each(hfwAlarmData, function(i, contentItem){
		contents[i] = '<div class="clearfix pointInfo">'+
			'<p class="clearfix"><label class="control-label fl">项目名称</label><span class="fl">'+contentItem.projectName+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">工地名称</label><span class="fl">'+contentItem.buildingSiteName+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">设备名称</label><span class="fl">'+contentItem.deviceName+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">设备经度</label><span class="fl">'+contentItem.xPosition+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">设备纬度</label><span class="fl">'+contentItem.yPosition+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">报警类型</label><span class="fl">'+contentItem.hfwWatcherTypeName+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">报警描述</label><span class="fl">'+contentItem.jfwWatcherDesc+'</span></p>'+
			'<p class="clearfix"><label class="control-label fl">设备图片</label><span class="fl"><span id="imgBtn" class="btn" onclick="seeImg()">查看图片</span></span></p>'+
			'</div>';
	})
	
	function seeImg(){
		alert(1);
		parent.layer.open({
	            type: 2,
	            closeBtn: 2,
	            title: '监测点图片',
	            shadeClose: true,
	            area: ['80%', '580px'],
	            content: rootPath + "/page/doEnPage?url=/datahfwalarm/dataHfwAlarmList"
	        });
	}
	var opts =   {//信息框设置
		width: 0,
		height : 0,
	} 
	
	//创建地图
	var map = new BMap.Map('hfwwatcherMap', {enableMapClick: false});  
	//根据数据信息获取中心点和最佳地图级别
	var view = map.getViewport(points);
	var mapZoom = view.zoom;   
	var centerPoint = view.center;
	map.centerAndZoom(centerPoint,mapZoom);  //设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl()); //缩放按钮(圆盘和标尺缩放)
	map.addControl(new BMap.ScaleControl());   //比例尺控件
	
	// 向地图添加标注
	for(var i=0;i<hfwAlarmData.length;i++){
		var pt,
		myIcon,
		marker;
		if(hfwAlarmData[i].hfwWatcherTypeName == "沉降"){
			pt = new BMap.Point(parseFloat(hfwAlarmData[i].xPosition),parseFloat(hfwAlarmData[i].yPosition));
			myIcon = new BMap.Icon(rootPath+"/images/iconSettle.png", new BMap.Size(26,26));
			marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker);  
		}else if(hfwAlarmData[i].hfwWatcherTypeName == "倾角"){
			pt = new BMap.Point(parseFloat(hfwAlarmData[i].xPosition),parseFloat(hfwAlarmData[i].yPosition));
			myIcon = new BMap.Icon(rootPath+"/images/iconDip.png", new BMap.Size(26,26));
			marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker); 
		}else if(hfwAlarmData[i].hfwWatcherTypeName == "位轴力"){
			pt = new BMap.Point(parseFloat(hfwAlarmData[i].xPosition),parseFloat(hfwAlarmData[i].yPosition));
			myIcon = new BMap.Icon(rootPath+"/images/iconAxial.png", new BMap.Size(26,26));
			marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker); 
		}
		var content = contents[i];
		addClickHandler(content,marker);
	}
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		)
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
分享、交流、沉淀
回复 支持 反对

使用道具 举报

3

主题

22

帖子

168

积分

版主

Rank: 7Rank: 7Rank: 7

积分
168
发表于 2017-9-19 11:21:44 | 显示全部楼层
本帖最后由 益享天开 于 2017-9-19 11:25 编辑

通过百度地图API实例测试正常,给百度地图“添加图文组合的信息窗口”的测试代码:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
                body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
                #allmap{width:100%;height:500px;}
                p{margin-left:5px; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>添加复杂内容的信息窗口</title>
</head>
<body>
        <div id="allmap"></div>
        <p>点击标注点,可查看由文本,图片构成的复杂型信息窗口</p>
</body>
</html>
<script type="text/javascript">
        // 百度地图API功能
  var sContent = [];
  for(var i=0; i<3; i++){
        sContent.push(
        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + 
        "<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='天安门'/>" + 
        "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的<a href='###' id='ggg' onclick='myFn(this)'>大门"+i+"</a>...</p>" + 
        "</div>");
  }

        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.404, 39.915);
        var marker = new BMap.Marker(point);
        var infoWindow = new BMap.InfoWindow(sContent.join(''));  // 创建信息窗口对象
        map.centerAndZoom(point, 15);
        map.addOverlay(marker);
        marker.addEventListener("click", function(){          
           this.openInfoWindow(infoWindow);
           //图片加载完毕重绘infowindow
           document.getElementById('imgDemo').onload = function (){
                   infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
           }
        });

  function myFn(e){
    alert(e.innerText);
  }
  
</script>


测试的效果:

百度地图API测试效果截图

百度地图API测试效果截图


百度地图 信息窗口示例地址:http://developer.baidu.com/map/jsdemo.htm#d0_2
欢迎访问经验交流区
回复 支持 反对

使用道具 举报

QQ|Archiver|手机版|小黑屋|久久经验网 ( 浙ICP备14027581号

GMT+8, 2018-1-24 05:18 , Processed in 0.310930 second(s), 43 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表