How to prevent overlapping pushpins at the same geolocation with Bing Maps?

问题

If you have 2 pushpins on 'London' at the same geolocation, is there anything in the API to move them apart so they are both visible?

I can only find documentation on their old map points API which had PreventIconCollisions, this is what I want but can't see any reference to this in the new API.

I am using the JavaScript API.

回答1:

So if I understand correctly, you have similar information on the same location, it this correct?

In order to display both information, you will have two options:

Merge information in the textbox using an appropriate way to present the information inside this ui element (using your own tabbed infobox for example)
Decluster the point manually when you're at a certain level of zoom

There is no default property to set this and it would really messy to do this on many pushpins, but in the main idea, you would have to: detect viewchangeend event, if you're at a certain level of zoom (or higher zoom level) then you're declustering them (I call it decluter nearby pushpins).

// Bind pushpin mouseover.
    Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
        var currentPin = e.target;
        currentPin.setOptions({ visible: false });
        var currentLocation = currentPin.getLocation().clone();

        var currentPoint = bmGlobals.geo.map.tryLocationToPixel(currentLocation);
        if (currentPin.associatedCluster.length == 2) {
            // Display the first pushpin
            var pinA = createPin(currentPin.associatedCluster[0]);
            var locA = bmGlobals.geo.map.tryPixelToLocation(new Microsoft.Maps.Point(currentPoint.x - pinA.getWidth(), currentPoint.y));
            pinA.setLocation(locA);
            bmGlobals.geo.layerClusteredPin.push(pinA);

            // Display the second pushpin
            var pinB = createPin(currentPin.associatedCluster[1]);
            var locB = bmGlobals.geo.map.tryPixelToLocation(new Microsoft.Maps.Point(currentPoint.x + pinB.getWidth(), currentPoint.y));
            pinB.setLocation(locB);
            bmGlobals.geo.layerClusteredPin.push(pinB);
        }
    });

I will try to write a bing maps module about this, but in the fact, you'll have to get your clustered pushpins (or your own pushpin that has two associated data object) and then you will have to set their position based on the rendering on the client side.

回答2:

I know this question is really old, but if someone is looking for something similar (clustering the pins) here is a good start: http://rtsinani.github.io/PinClusterer/

来源：https://stackoverflow.com/questions/9906120/how-to-prevent-overlapping-pushpins-at-the-same-geolocation-with-bing-maps

标签

bing-maps

pushpin