Question

我正在尝试使用单独的信息框添加多个图钉。这意味着每个图钉都有自己的信息框和自己的信息。

有一个loop.inside

latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]);
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)}); 

myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption);

Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});         
map.entities.push(MarkingLocation[pointerCount]);
map.entities.push(myInfobox);

问题是它只显示每个图钉的最后一个信息框。假设我在Londom，法国，德国，美国有4个图钉。现在无论我点击了哪一个针脚，它都只显示美国信息图片上的美国信息图片。请问任何人都可以帮助解决我一直缺少的问题.........

还有一件事，任何人都可以展示在信息框中使用htmlContent的方法。我试图设置它的thrugh选项，但它并不费力......

myinfoboxoption = {width:300, 
                              height: 100, 
                              title: str_loc, 
                              htmlContent: htmlc, 
                              showPointer: false, 

                              offset: new Microsoft.Maps.Point(-100,0)};

请帮助........

Answer 1

这是我实现多个信息框的方式：

<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
    var pinInfoBox;  //the pop up info box
    var infoboxLayer = new Microsoft.Maps.EntityCollection();
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var apiKey = "YourKey";

    function GetMap() {

        map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});

        // Create the info box for the pushpin
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        infoboxLayer.push(pinInfobox);


        for (var i = 0 ; i < 10; i++){
            //add pushpins
            var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180);
            var pin = new Microsoft.Maps.Pushpin(latLon);
            pin.Title = name;//usually title of the infobox
            pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox
            pinLayer.push(pin); //add pushpin to pinLayer
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
        }

        map.entities.push(pinLayer);
        map.entities.push(infoboxLayer);

    }

    function displayInfobox(e) {
        pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
        pinInfobox.setLocation(e.target.getLocation());
    }

    function hideInfobox(e) {
        pinInfobox.setOptions({ visible: false });
    }
</script>

<style>
    #map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;}
</style>
</head>
<body onload="GetMap()">
    <div id="map">
    </div>
</body>

最后，你会得到这样的东西： enter image description here

Answer 2

校正： pin.Title =＆＃34; TITLE：＆＃34; + i; //通常是信息框的标题

在Bing Map中使用信息框的多个图钉

2 个答案: