6

別のインフォボックスで複数の画鋲を追加しようとしています。つまり、各プッシュピンには、独自の情報を含む独自のインフォボックスがあります。その中にループがあります。

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);

問題は、プッシュピンごとに最後のインフォボックスのみを表示していることです。ロンドン、フランス、ドイツ、アメリカに 4 つのプッシュピンがあるとします。どのピンをクリックしても、アメリカのプッシュピンにアメリカのインフォボックスが表示されるだけです。

もう 1 つ、infobox で htmlContent を使用する方法を教えてください。オプションで設定してみましたが、だめでした……。

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

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

助けてください........

4

2 に答える 2

35

これは、複数のインフォボックスを実装する方法です:

<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>

最終的に、次のようなものが得られます。 ここに画像の説明を入力

于 2011-10-25T20:53:36.403 に答える