87,902
社区成员
发帖
与我相关
我的任务
分享百度地图API多边形InfoWindow
需求：点击多边形弹出infoWindow显示该多边形的信息
实现：后台数据传到前台，根据e.target.getPath()[0]来找到对应那个多边形的信息。然后在polygon[j]的addEventlistener最后
sContent试了一下alert是可以弹出相应的内容，但是点击多边形没有反应
给了它质心点还是点击无响应
同样的方法标注质心点，并增加监听是可以弹出信息框的
请问多边形的话要怎么改？
实现：后台数据传到前台，根据e.target.getPath()[0]来找到对应那个多边形的信息。然后在polygon[j]的addEventlistener最后
polygon[j].addEventListener("click", function (e) {
var elng = e.target.getPath()[0].lng;//该多边形的第一个点x经度
var elat = e.target.getPath()[0].lat;//纬度
//获取名称
var queryResult_name = Enumerable.From(KANGZHEN)
.Where(function (x) { return x.x0 == elng && x.y0 == elat })
.Select(function (x) { return x.name })
.ToArray();
strResult_name = queryResult_name[0] != "" ? queryResult_name[0] : "-----";
opts = {
width: 450, // 信息窗口宽度
height: 300, // 信息窗口高度
}
sContent =
"<div style='width:45%;float:left;margin-left:20px;font-family: Arial,Helvetica,'Microsoft YaHei',sans-serif;'>" +
"</br><b>建筑物名称：</b>" + strResult_name + "</br>" +
"</div>"
//alert(sContent);//这里没有问题
var infoWindow = new BMap.InfoWindow(sContent, opts); // 创建信息窗口对象
this.openInfoWindow(infoWindow);
})sContent试了一下alert是可以弹出相应的内容，但是点击多边形没有反应
var centerpoint = new BMap.point(strResult_zx, strResult_zy);//strResult_zx, strResult_zy为前面获取的多边形中心xy坐标
this.openInfoWindow(infoWindow，centerpoint)
给了它质心点还是点击无响应
同样的方法标注质心点，并增加监听是可以弹出信息框的
请问多边形的话要怎么改？
...全文
请发表友善的回复…
发表回复
Spirits酱 2016-07-15
- 打赏
- 举报
谢谢！竟然是因为P没有大写！
给自己蠢哭了
どうもありがどうございます！
Go 旅城通票 2016-07-15
- 打赏
- 举报
我用你的代码测试百度的没有问题，注意大小写
var centerpoint = new BMap.point(strResult_zx, strResult_zy);
===>
var centerpoint = new BMap.Point(strResult_zx, strResult_zy);
http://developer.baidu.com/map/jsdemo.htm#c1_10
<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</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>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.enableScrollWheelZoom();
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("北京市海淀区", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
ply.addEventListener('click',function(e){
var elng = e.target.getPath()[0].lng;
var elat = e.target.getPath()[0].lat;
opts = {
width: 450, // 信息窗口宽度
height: 300, // 信息窗口高度
}
sContent =
"<div style='width:45%;float:left;margin-left:20px;font-family: Arial,Helvetica,'Microsoft YaHei',sans-serif;'>" +
"</br><b>建筑物名称：</b>very good</br>" +
"</div>"
//alert(sContent);//这里没有问题
var infoWindow = new BMap.InfoWindow(sContent, opts); // 创建信息窗口对象
var centerpoint = new BMap.Point(elng, elat);
map.openInfoWindow(infoWindow,centerpoint)
})
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
});
}
setTimeout(function(){
getBoundary();
}, 2000);
</script>
Go 旅城通票 2016-07-15
- 打赏
- 举报
打印 var elng = e.target.getPath()[0].lng;//该多边形的第一个点x经度
var elat = e.target.getPath()[0].lat;//纬度
这个2个值看是什么，怕是经纬度获取错误了导致info定位的点不在当前可见范围导致没有效果什么的
Spirits酱 2016-07-15
- 打赏
- 举报
进入了吧
strResult_name 可以弹出对应多边形的名称
alert(sContent);也可以弹出相应的信息
Go 旅城通票 2016-07-15
- 打赏
- 举报
点击多边形进入click事件没？多边形也是这样添加事件的
Spirits酱 2016-07-15
- 打赏
- 举报
试了没有用哎
而且点的时候也用的 this.openInfoWindow（infoWindow）
Go 旅城通票 2016-07-15
- 打赏
- 举报
this.openInfoWindow(infoWindow，centerpoint)
this不是map对象吧。。。this改为你的百度地图map实例对象名称
