Question

我必须使用图钉在同一页面上显示2个bingmaps。但是当我点击第一张地图中的图钉时，它会在下一张地图上显示图钉弹出框。我想显示与相应地图相关联的图钉弹出窗口。

请检查我的源代码。

<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    var pinInfoBox;  //the pop up info box
    var infoboxLayer = new Microsoft.Maps.EntityCollection();
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var apiKey = "YOUR_BING_MAPS_KEY";

    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 = "first map, "+ 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 });
    }

    $(document).ready(function() {
    GetMap();   
    getnewmap();
    });

     function getnewmap() {

        maps2 = new Microsoft.Maps.Map(document.getElementById("maps2"), {credentials: apiKey});
        pinInfobox = '';
        // 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 = '';
            var mypin = '';
            var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180);
            var mypin = new Microsoft.Maps.Pushpin(latLon);
            mypin.Title = name;//usually title of the infobox
            mypin.Description = "second map, "+ i; //information you want to display in the infobox
            pinLayer.push(mypin); //add pushpin to pinLayer
            Microsoft.Maps.Events.addHandler(mypin, 'click', displayInfobox);
        }

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

    }

</script>

<style>
    #map { position: relative; margin:20px; width: 500px; height: 400px; border:#555555 2px solid;}
    #maps2 { position: relative; margin:20px; width: 500px; height: 400px; border:#555555 2px solid;}
</style>
</head>
<body onload="">
<div width="100%" height="100%" style="border:1px solid red;">
    <div id="map" style="border:1px solid orange;"> one
    </div><br/>
    <div id="maps2" style="border:1px solid green;">hello
    </div>
</div>  
</body>

Answer 1

信息框图层仅存在于您的第一张地图中。您必须为第二个地图创建第二个地图，否则它将始终显示在第一个地图上。

bingmaps-当在一个地图中点击图钉时，它会显示最后一张地图中的图钉描述

1 个答案: