将自定义图像（或标记颜色）添加到标记（使用 markerCluster）

Question

有人可以帮我如何将自定义图像标记绑定到此脚本吗？

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script> 
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[
  // this variable will collect the html which will eventually be placed in the side_bar 
  var side_bar_html = ""; 

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

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

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

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
 }

 // This function picks up the click and opens the corresponding info window
 function myclick(i) {
 google.maps.event.trigger(gmarkers[i], "click");
 }

 function initialize() {
 // create the map
 var myOptions = {
 zoom: 7,
 center: new google.maps.LatLng(52.13263,5.29127),
 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 example.xml
  downloadUrl("dataxml.cfm", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    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 marker_image = parseFloat(markers[i].getAttribute("markerimage"));
      var image = {
          url: marker_image,
          size: new google.maps.Size(71, 132),
          origin: new google.maps.Point(0, 0),
          scaledSize: new google.maps.Size(71, 132)
        };
      var point = new google.maps.LatLng(lat,lng);
      var id = markers[i].getAttribute("id");
      var country = markers[i].getAttribute("country");
      var html="<b>"+country+"</b><br><span style='color:white'>"+id+"</span>";
      // create the marker
      var marker = createMarker(point,country+" "+id,html);
    }
    markerCluster = new MarkerClusterer(map, gmarkers);
  });
}

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> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div id="map_canvas" style="width: 752px; height: 600px"></div> 
</body> 
</html>

XML很简单：

<markers>
<marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="value" lat="value" lng="value" country="value" />

我试过将 "icon: image" 添加到创建标记部分，但我想不通 out.I 已尝试将 "icon: image" 添加到创建标记部分，但我想不通了。

Answer 1

您需要将自定义图标传递给 createMarker 函数：

// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);

更新了createMarker函数：

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

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  // add a line to the side_bar html
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}

proof of concept fiddle

代码片段：

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(40.735657, -74.1723667),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  // Read the data from dataxml.cfm
  // downloadUrl("dataxml.cfm", function(doc) {
  var xmlDoc = xmlParse(xmlData);
  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  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 marker_image = markers[i].getAttribute("markerimage");
    var image = {
      url: marker_image,
      size: new google.maps.Size(71, 132),
      origin: new google.maps.Point(0, 0),
      scaledSize: new google.maps.Size(71, 132)
    };
    var point = new google.maps.LatLng(lat, lng);
    var id = markers[i].getAttribute("id");
    var country = markers[i].getAttribute("country");
    var html = "<b>" + country + "</b><br><span style='color:blue'>" + id + "</span>";
    // create the marker
    var marker = createMarker(point, country + " " + id, html, marker_image);
  }
  markerCluster = new MarkerClusterer(map, gmarkers);
  // });
}
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, icon) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    icon: icon,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  // add a line to the side_bar html
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}

// global variables
var side_bar_html = "";
var gmarkers = [];
var map = null;
var markerclusterer = null;

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", initialize);

//New York, NY, USA (40.7127837, -74.0059413
//Newark, NJ, USA (40.735657, -74.1723667)
var xmlData = '<markers><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NYC" lat="40.7127837" lng="-74.0059413" country="USA" /><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NWK" lat="40.735657" lng="-74.1723667" country="USA" /></markers>';

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_canvas"></div>

将自定义图像（或标记颜色）添加到标记（使用 markerCluster）

Add custom image (or marker color) to markers (using markerCluster)

google-maps

google-maps-markers

markerclusterer