问题描述:

In V7 Bing map you have provided functionality of custmally add pushpin and infobox in clustering map on below link

https://www.bingmapsportal.com/isdk/ajaxv7#LoadingDynamicModule3

But in V8 bing map Microsoft didn't provided how can i set Pushpin and infobox in clustering map .

http://www.bing.com/api/maps/sdk/mapcontrol/isdk#clusteringMeanAverage+TS

Can you please provide sample code for pushpin and info box in clustering map ?

Thanks in advance

网友答案:

Here is an example of how to store data with a pushpin using the metadata property and add a click event to the pushpin that opens an infobox:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript' 
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' 
            async defer></script>
    <script type='text/javascript'>
    var map, infobox;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'Your Bing Maps Key'
        });

        //Create an infobox at the center of the map but don't show it.
        infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
            visible: false
        });

        //Assign the infobox to a map instance.
        infobox.setMap(map);

        //Create a pushpin in the at a random location in the map bounds.
        var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds());
        var pin = new Microsoft.Maps.Pushpin(randomLocation);

        //Store some metadata with the pushpin.
        pin.metadata = {
            title: 'Pin Title',
            description: 'Pin discription'
        };

        //Add an click event handler to the pushpin.
        Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

        //Add pushpin to the map.
        map.entities.push(pin);
    }

    function pushpinClicked(e) {
        //Make sure the infobox has metadata to display.
        if (e.target.metadata) {
            //Set the infobox options with the metadata of the pushpin.
            infobox.setOptions({
                location: e.target.getLocation(),
                title: e.target.metadata.title,
                description: e.target.metadata.description,
                visible: true
            });
        }
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
网友答案:

For individual pushpins you can customize them before you add them to the clustering layer and the clustering layer will simply render them. No need for a callback like in the old v7 module. A callback is still used when customizing clustered pushpins.

For infoboxes simply add a click event to the pushpins and clusters and when the event fires you can load an infobox. This is really simply. Also, you only need one infobox in an app and simply update it's content based on what has been clicked.

Full documentation can also be found here: https://msdn.microsoft.com/en-us/library/mt712542.aspx

相关阅读:
Top