Многократная канцелярская кнопка с инфобоксом в Bing Map - PullRequest
Новая
       27

Многократная канцелярская кнопка с инфобоксом в Bing Map

6 голосов
/ 05 октября 2011

Я пытаюсь добавить несколько кнопок с отдельным инфобоксом. это означает, что у каждой метки будет свой информационный блок с собственной информацией. внутри есть петля, которая 

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 метки в Лондоне, Франции, Германии, Америке. Теперь, независимо от того, на какой пин я нажал, показывается только информационный блок Америка на канцелярской кнопке. Кто-нибудь может помочь с тем, что мне не хватало .........

И еще одна вещь, может кто-нибудь показать, пожалуйста, как использовать htmlContent в инфобоксе. Я пытался установить это через опцию, но это не волнует ...... 

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

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

Пожалуйста, помогите ........

Ответы [ 2 ]

35 голосов
/ 26 октября 2011

Вот как я реализовал несколько инфобоксов: 

<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

0 голосов
/ 03 июля 2014

Исправление: pin.Title = "TITLE:" + i;// обычно заголовок инфобокса

...