如何在Bing地图中的群集图钉上设置自定义图标？

Question

What I'm trying to do is to change the default icon that is displayed when you set the Clustering Configuration for a Bing Map using the Bing Maps Ajax Control 6.3.

I have a function that loads a Bing Map like this:

function getMap() {
    map = new VEMap('map_canvas');
    map.SetDashboardSize(VEDashboardSize.Tiny);
    var latLong = new VELatLong(21.983801, -101.557617);
    map.LoadMap();
    var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
    icon.CustomHTML = custom;
    var options = new VEClusteringOptions(icon, null);
    map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
    map.SetCenterAndZoom(latLong, 6);
    map.SetMouseWheelZoomToCenter(false);
    map.EnableShapeDisplayThreshold(true);
    map.AttachEvent("onclick", singleMouseHandler);
    map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}

But so far it keeps displaying the same default icon. What am I missing here?

Another thing I was wondering is if there's a way to change the custom icon if a pin in the cluster changes, like if I have 5 green Push Pins but one of them is updated to be a blue Push Pin, is there a way to change the icon that represents that cluster?

Answer 1

I did the development long time ago for our company site. Did you try the interactive SDK available here? http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15
I have added the reference for pushpin development
http://www.microsoft.com/maps/developers/web.aspx

Answer 2

I found the reason my approach wasn't working, I keep thinking I'm dealing with classes with constructors that receive parameters, which in this case the VEClusteringOptions class doesn't receive parameters in its constructor. I had to set the Icon property separately:

function getMap() {
    map = new VEMap('map_canvas');
    map.SetDashboardSize(VEDashboardSize.Tiny);
    var latLong = new VELatLong(21.983801, -101.557617);
    map.LoadMap();
    var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
    icon.CustomHTML = custom;
    var options = new VEClusteringOptions();
    options.Icon = icon; // here's the "big" difference
    map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
    map.SetCenterAndZoom(latLong, 6);
    map.SetMouseWheelZoomToCenter(false);
    map.EnableShapeDisplayThreshold(true);
    map.AttachEvent("onclick", singleMouseHandler);
    map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}

Now my custom cluster icons are being loaded great, I need to get used to more to the concept of property in the future.