xml - 将 z-index 作为 xml 数据中的变量引入，以获取与标记相关的属性

Question

我在同一区域有大量标记，我希望能够将几个标记带到前面。默认情况下，Google api v3 正在堆叠 z-index，我相信其中的纬度较低。我知道这可以被覆盖，但是在调整我的代码语法以允许这样做时遇到了一些麻烦。这是我尝试过的:

var select_html = ""; 

  // arrays to hold copies of the markers
  // because the function closure trick doesnt work there 
  var gmarkers = []; 

 // global "map" variable
  var map = null;

  var gicons=[];
gicons['yellow'] ="http://www.ghd.com/canada/ghd_grey.png";
gicons["grey"] = "http://www.ghd.com/canada/ghd2.png";



var image = {
url: 'ghd.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(59, 70),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 70)
};
var shadow = {
url: 'images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
  coord: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
 };



// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, icontype, zIndex) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon : gicons[icontype],
     shadow: shadow,
     optimized: false,
    zIndex: 10 
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

    // ======= Add the entry to the select box =====
    select_html += '<option> ' + name + '<\/option>';
    // ==========================================================
// save the info we need to use later
gmarkers.push(marker);
return marker;
}

  // ======= This function handles selections from the select box ====
  // === If the dummy entry is selected, the info window is closed ==
  function handleSelected(opt) {
    var i = opt.selectedIndex - 1; 
    if (i > -1) {
      google.maps.event.trigger(gmarkers[i],"click");
    }
    else {
      infowindow.close();
    }
  }

function initialize() {
// create the map
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(32.8624,-96.654218),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

  // Read the data from 100.xml
  downloadUrl("canada_offices.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");

    // ==== first part of the select box ===
    select_html = '<p>For Guam and Saipan offices, please see drop down  
   list</p>'+'<select onChange="handleSelected(this)">' +
                    '<option selected> - Select a location - <\/option>';
    // =====================================

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var html = markers[i].getAttribute("html");
      var label = markers[i].getAttribute("label");
        var icontype = markers[i].getAttribute("icontype");
         var zIndex = markers[i].getAttribute("zIndex");

      // create the marker
      var marker = createMarker(point,label,html,icontype,zIndex);
    }
    // ===== final part of the select box =====
    select_html += '<\/select>';
    document.getElementById("selection").innerHTML = select_html;
  });
  }

 var infowindow = new google.maps.InfoWindow(
 { 
 size: new google.maps.Size(150,50)
});


// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm 
//]]>
</script> 

Answer 1

标记上的 zIndex 仅当您在所有标记上设置它时才有效。

为了模拟“默认”Google 行为，我使用了这个(来自 v2 API 中的 Mike Williams):

zIndex: Math.round(latlng.lat()*-100000)<<5

要将这些标记之一弹出到该区域中的标记上方，请为该标记添加偏移量。

Example using zIndex

createMarker 看起来像这样:

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, icontype, zIndex) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon : gicons[icontype],
    shadow: shadow,
    optimized: false,
    zIndex: zIndex+Math.round(latlng.lat()*-100000)<<5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

  // ======= Add the entry to the select box =====
  select_html += '<option> ' + name + '<\/option>';
  // ==========================================================
  // save the info we need to use later
  gmarkers.push(marker);
  return marker;
  }