首页新闻找找看学习计划

百度地图api 同时在地图上标注多个点 有问题 紧急求救

0
悬赏园豆:20 [待解决问题]

我点击一个按钮“长沙市” 进去 希望在地图上显示出长沙市的一些符合规则的企业,当然是有很多个的,每个企业一个标注(就是一个红点),点击标注 弹出一个框 显示企业的详细信息。。 问题来了。。标注可以循环添加多个 但是 那个弹出框却永远都是一个 也就是说 不管点击哪个标注 弹出的都是一个弹出框 显示的内容都是一样的。。。 纳闷啊。。代码如下:

1 function searchByArea(cps, cpa, cpn, areaMapAddress) {
2 var companys = cps;
3 var companysaddress = cpa;
4 var companyname = cpn;
5
6 var map = new BMap.Map("milkMap"); // 创建地图实例
7 var point = new BMap.Point(areaMapAddress.split(",")[0].toString(), areaMapAddress.split(",")[1].toString()); // 创建点坐标
8 map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别
9 //map.addControl(new BMap.OverviewMapControl({ isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT })); //为地图添加鹰眼
10 map.addControl(new BMap.NavigationControl(opts)); //为地图添加鱼骨
11
12 //给地图添加自定义的控件;
13 ZoomControl.prototype.initialize = initSearch(map);
14 var myZoomCtrl = new ZoomControl();
15 map.addControl(myZoomCtrl);
16
17
18 map.enableScrollWheelZoom(); //启动鼠标滚轮缩放地图
19 map.enableKeyboard(); //启动键盘操作地图
20
21 if (companys != "") {
22 var c = companys.split("|");
23 var caddress = companysaddress.split("|");
24 var cname = companyname.split("|");
25
26 if (c.length > 0) {
27 for (var i = 0; i < c.length; i++) {
28 var cc = c[i].split(",");
29 //------------开始标注一个地点----------
30 var pointMarker = new BMap.Point(cc[0], cc[1]); // 创建标注的坐标
31 var marker = new BMap.Marker(pointMarker); // 创建标注
32 map.addOverlay(marker); // 将标注添加到地图中
33
34 [color=#FF0000] var infowindow = new BMap.InfoWindow(cname[i].toString() +
35 "<br /> <span style='font-size:10px;'>公司地址:" + caddress[i].toString() +
36 "</span><br /><img src='../../images/telephone.ico' /><a href='#' style='line-height:3em;color:#005EAC;font-size:10px;text-decoration:none;'>88888888>></a>"); // 创建信息窗口对象
37
38 marker.addEventListener("click", function () { //给标注添加点击事件
39 this.openInfoWindow(infowindow);
40 });[/color]
41 var label = new BMap.Label(cname[i].toString(), { point: pointMarker, offset: new BMap.Size(3, -6) }); //定义一个文字标签
42 map.addOverlay(label);
43 }
44 }
45 }
46 }
520heye的主页 520heye | 初学一级 | 园豆:170
提问于:2011-08-11 14:08
< >
分享
所有回答(5)
0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>销售网络</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:800px;height:600px;border:1px solid gray" id="container" ></div>

</body>
</html>
<script type="text/javascript">
var mp = new BMap.Map("container");
var point = new BMap.Point(108.72205, 34.186879);
mp.centerAndZoom(point, 5);
mp.enableKeyboard();
mp.enableScrollWheelZoom();


// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText) {
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.style.color = "white";
div.style.height = "18px";
div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;

var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);

div.onmouseover = function () {
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
this.getElementsByTagName("span")[0].innerHTML = that._overText;
arrow.style.backgroundPosition = "0px -20px";
}

div.onmouseout = function () {
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
this.getElementsByTagName("span")[0].innerHTML = that._text;
arrow.style.backgroundPosition = "0px 0px";
}

mp.getPanes().labelPane.appendChild(div);

return div;
}
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var markerArr = [{ txt: "安康中心医院", point: "109.0349, 32.696176" }, { txt: "广州市第六人民医院", point: "113.370294,23.124695"}]
for (var i = 0; i < markerArr.length; i++) {
var txt = markerArr[i].txt;
var pintx = markerArr[i].point.split(',')[0];
var pinty = markerArr[i].point.split(',')[1];
mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(pintx, pinty), txt, txt));

}


</script>
王大湿 | 园豆:457 (菜鸟二级) | 2011-10-09 17:03
0

我也遇到同样的问题,,怎么办?点击每一个标注它都只弹出最后一个标注的信息窗

sazhaoxun | 园豆:202 (菜鸟二级) | 2012-05-27 14:52
1

企鹅:516840664可以帮你解决 百度地图API 基本任何问题。

无觉-李敏 | 园豆:204 (菜鸟二级) | 2013-04-27 09:49
2
 // 编写自定义函数,创建标注
    function addMarker(point, lable, Htmlname, myIcon) {
        //创建标注点
        var marker = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
        

        //添加文字
        var label = new BMap.Label(lable, { offset: new BMap.Size(-30, 22) });
        marker.setLabel(label);

        //获取弹出窗体内容
        var sContent = getInnerHtml(Htmlname);
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        //添加点击标注点事件
        marker.addEventListener("click", function () {
            window.marker = marker;
            this.openInfoWindow(infoWindow);
            //图片加载完毕重绘infowindow
            document.getElementById('r-result').onload = function () {
                infoWindow.redraw();
            }
        });
    }

这个是我的代码,你先看看,有什么不懂的你再问

Jehuty' | 园豆:79 (初学一级) | 2013-06-15 17:19

 infoWindow.redraw();这一句很关键

支持(0) 反对(0) Jehuty' | 园豆:79 (初学一级) | 2013-06-15 17:21
0

for (var i = 0; i < titles.length; i++) {
(
function (x) {//关键
var longitude = longitudes[i];
var latitude = latitudes[i];
var hotelTitle = titles[i];
var coordinate = new BMap.Point(longitude, latitude);

var myIcon = new BMap.Icon("Mario.png", new BMap.Size(34, 34), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
// var marker = new BMap.Marker(coordinate);
var marker = new BMap.Marker(coordinate, {icon: myIcon}); //创建标注
var opts = {title: '<span style="font-size:14px;color:#0A8021">' + hotelTitle + '</span>'};
// 创建信息窗口对象,引号里可以书写任意的html语句。
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'>"
+ "<b>地址:</b>" + addresses[i]
+ "</br><b>电话:</b>" + telephones[i]
+ "</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='http://yestehotel.com:8000/yst/'>详情>></a></div>", opts);
marker.addEventListener("mouseover", function () {

this.openInfoWindow(infoWindow);
// //图片加载完毕重绘infowindow
// document.getElementById('r-result').onload = function () {
// infoWindow.redraw();
// }
});
map.addOverlay(marker); //添加marker到地图上
})(i);
}

DotNet之路 | 园豆:131 (初学一级) | 2015-01-07 17:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册