Question

我正在使用google api 3.x测试最后几天。

我有这个代码用于谷歌地图的api。

这部分我改为获得所有条目的单独图像：

function makeMarker(options) {

    var pushPin = new google.maps.Marker({
    icon: '/individual-icon-for-all.png',
    map: map
    });

我想为每个条目使用单独的图像/图标。我怎么能这样做？

<script>

/**
 * map
*/
var mapOpts = {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true,
  scrollwheel: false
}


var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()





 /**
 * makeMarker() ver 0.2
 * creates Marker and InfoWindow on a Map() named 'map'
 * creates sidebar row in a DIV 'sidebar'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker, InfoWindow and SidebarItem
 * @author Esa 2009
 */

var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options) {

    var pushPin = new google.maps.Marker({
    icon: '/individual-icon-for-all.png',
    map: map
    });

pushPin.setOptions(options);

google.maps.event.addListener(pushPin, "click", function() {
    infoWindow.setOptions(options);
    infoWindow.open(map, pushPin);
    if (this.sidebarButton) this.sidebarButton.button.focus();
});

if (options.sidebarItem) {
    pushPin.sidebarButton = new SidebarItem(pushPin, options);
    pushPin.sidebarButton.addIn("sidebar");
}

markerBounds.extend(options.position);
markerArray.push(pushPin);
return pushPin;
}

google.maps.event.addListener(map, "click", function() {
infoWindow.close();
});




 /**
 * Creates an sidebar item 
 * @constructor
 * @author Esa 2009
 * @param marker
 * @param opt    ions object Supported properties: sidebarItem, sidebarItemClassName,             
sidebarItemWidth,
 */
function SidebarItem(marker, opts){
  var tag = opts.sidebarItemType || "button";
  var row = document.createElement(tag);
  row.innerHTML = opts.sidebarItem;
row.className = opts.sidebarItemClassName || "sidebar_item";  
row.style.display = "block";
row.style.width = opts.sidebarItemWidth || "180px";
row.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
row.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
row.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
  if(block && block.nodeType == 1)this.div = block;
  else
    this.div = document.getElementById(block)
|| document.getElementById("sidebar")
|| document.getElementsByTagName("body")[0];
  this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
  if(!this.div) return false;
  this.div.removeChild(this.button);
  return true;
}

/**
 * markers and info window contents
 */

makeMarker({
  position: new google.maps.LatLng(53.086 , 8.978),
  title: "Blumen",
  sidebarItem: "Blumen",
  content: "<p class='partner2'>Blumen</p>",
});   




/**
 *   fit viewport to markers
 */
map.fitBounds(markerBounds);
</script>

Answer 1

只需包含您传递给功能的选项

makeMarker({
  position: new google.maps.LatLng(53.086 , 8.978),
  icon: '/icon-for-this-marker.png',
  title: "Blumen",
  sidebarItem: "Blumen",
  content: "<p class='partner2'>Blumen</p>",
});

个人形象/图标谷歌地图api

1 个答案: