javascript - bing maps add more pushpins - Stack Overflow|江阴雨辰互联

i want to add more pushpins in this map. i try to just copy this part:

longitude[1] = 41.799645     //second defined Location
latitude[1] = 20.913514
title[1] = "Kipper Market"
description[1] = "Kipper Gostivar"

but i don't see any other added pin! can someone please help. *i know almost nothing about java script so please don't judge me if i didn't pose my question right. thanx!

        function GetMap() {
            var longitude = new Array();
            var latitude = new Array();
            var title = new Array();
            var description = new Array();


            longitude[0] = 42.0076215        //two defined locations
            latitude[0] = 20.9689308
            title[0] = "Kipper Market"
            description[0] = "Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia"

            longitude[1] = 41.799645     //second defined Location
            latitude[1] = 20.913514
            title[1] = "Kipper Market"
            description[1] = "Kipper Gostivar"

            var total = 0                //number of locations

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

            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 < 3; i++){
                //add pushpins
                var latLon = new Microsoft.Maps.Location(longitude[i], latitude[i]);
                var pin = new Microsoft.Maps.Pushpin(latLon);

                pin.Title = title[i];//usually title of the infobox
                pin.Description = description[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);
            map.setView({zoom: 10, center: new Microsoft.Maps.Location(41.9117244, 21.0254933)});


        }

        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: relative; top: 0; left: 0; width: 100%; height: 800px; border:none;}
    </style>
    </head>
    <body onload="GetMap()">
        <div id="some stuff" style="width=100%; height:80px">
            some text
        </div>
        <div id="map" style="width=100%; height:400px">
        </div>
        <div id="some more stuff" style="width=100%; height:80px">
            some more text
        </div>              
    </body>
</html>

i want to add more pushpins in this map. i try to just copy this part:

longitude[1] = 41.799645     //second defined Location
latitude[1] = 20.913514
title[1] = "Kipper Market"
description[1] = "Kipper Gostivar"

but i don't see any other added pin! can someone please help. *i know almost nothing about java script so please don't judge me if i didn't pose my question right. thanx!

        function GetMap() {
            var longitude = new Array();
            var latitude = new Array();
            var title = new Array();
            var description = new Array();


            longitude[0] = 42.0076215        //two defined locations
            latitude[0] = 20.9689308
            title[0] = "Kipper Market"
            description[0] = "Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia"

            longitude[1] = 41.799645     //second defined Location
            latitude[1] = 20.913514
            title[1] = "Kipper Market"
            description[1] = "Kipper Gostivar"

            var total = 0                //number of locations

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

            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 < 3; i++){
                //add pushpins
                var latLon = new Microsoft.Maps.Location(longitude[i], latitude[i]);
                var pin = new Microsoft.Maps.Pushpin(latLon);

                pin.Title = title[i];//usually title of the infobox
                pin.Description = description[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);
            map.setView({zoom: 10, center: new Microsoft.Maps.Location(41.9117244, 21.0254933)});


        }

        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: relative; top: 0; left: 0; width: 100%; height: 800px; border:none;}
    </style>
    </head>
    <body onload="GetMap()">
        <div id="some stuff" style="width=100%; height:80px">
            some text
        </div>
        <div id="map" style="width=100%; height:400px">
        </div>
        <div id="some more stuff" style="width=100%; height:80px">
            some more text
        </div>              
    </body>
</html>

Share edited Jun 4, 2015 at 7:04 psousa 6,7161 gold badge35 silver badges44 bronze badges asked Jun 3, 2015 at 12:21 Ilir Bajrami 91 silver badge3 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

The following example shows how to add multiple pushpins into Bing Maps:

var pinInfobox;

function GetMap() {

    var pushpinInfos = [];
    pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' };
    pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' };

    var infoboxLayer = new Microsoft.Maps.EntityCollection();
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var apiKey = "<api key>";

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

    var locs = [];
    for (var i = 0 ; i < pushpinInfos.length; i++) {
        locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
        var pin = new Microsoft.Maps.Pushpin(locs[i]);
        pin.Title = pushpinInfos[i].title;
        pin.Description = pushpinInfos[i].description;
        pinLayer.push(pin); 
        Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    }

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

    var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
    map.setView({ center: bestview.center, zoom: 10 });
}

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 src="http://ecn.dev.virtualearth/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script>
<body onload="GetMap();">
    <div id="map" style="position: relative; width: 600px; height: 450px;"></div>
</body>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744916974a4600895.html

javascript - bing maps add more pushpins - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - bing maps add more pushpins - Stack Overflow

1 Answer 1

相关推荐