Question

我正在使用Multimarker向自定义谷歌地图添加带标签的标记。包含标签的div使用onclick调用函数。但是如果我在地图上添加折线，那么onclick就会停止工作。我无法弄清楚为什么......

这是添加标记的代码：

var fastMarkers = [];
var myLatlng = new google.maps.LatLng(70,-101);
var marker = new com.redfin.FastMarker(/*id*/1, myLatlng, ["<div onclick='test()'><span>mylabel</span></div>"], null);
fastMarkers.push(marker);                
new com.redfin.FastMarkerOverlay(map, fastMarkers);

这是折线：

 var linepathcoords = [
    new google.maps.LatLng(71, -103),
    new google.maps.LatLng(73, -107),
 ];

var linepath=new google.maps.Polyline({
  path:linepathcoords,
  strokeColor:"#ff0000",
  strokeOpacity:0.9,
  strokeWeight:2
});
//This next line is what's causing the onclick in the marker to stop working. Why?
linepath.setMap(map);
};

这是Multimarker的代码：

/*
 Copyright 2010 Redfin Corporation
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 
 */

com = {redfin: {}};

/* Construct a new FastMarkerOverlay layer for a V2 map
 * @constructor
 * @param {google.maps.Map} map the map to which we'll add markers
 * @param {Array.<com.redfin.FastMarker>} markers the array of markers to display on the map
 */
com.redfin.FastMarkerOverlay = function(map, markers) {
  this.setMap(map);
  this._markers = markers;
}

com.redfin.FastMarkerOverlay.prototype = new google.maps.OverlayView();

com.redfin.FastMarkerOverlay.prototype.onAdd = function() {
  this._div = document.createElement("div");
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(this._div);
}

/* Copy our data to a new FastMarkerOverlay
 * @param {google.maps.Map} map the map to which the copy will add markers
 * @return {FastMarkerOverlay} Copy of FastMarkerOverlay
 */
com.redfin.FastMarkerOverlay.prototype.copy = function(map) {
  var markers = this._markers;
  var i = markers.length;
  var markersCopy = new Array(i);
  while (i--) {
    markersCopy[i] = markers[i].copy();
  }
  return new com.redfin.FastMarkerOverlay(map, markers);
};

/* Draw the FastMarkerOverlay based on the current projection and zoom level; called by Gmaps */
com.redfin.FastMarkerOverlay.prototype.draw = function() {
  // if already removed, never draw
  if (!this._div) return;

  // Size and position the overlay. We use a southwest and northeast
  // position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  var overlayProjection = this.getProjection();

  // DGF use fastloop http://ajaxian.com/archives/fast-loops-in-js
  // JD Create string with all the markers
  var i = this._markers.length;
  var textArray = [];
  while (i--) {
    var marker = this._markers[i];
    var divPixel = overlayProjection.fromLatLngToDivPixel(marker._latLng);
    textArray.push("<div style='position:absolute; left:");
    textArray.push(divPixel.x + marker._leftOffset);
    textArray.push("px; top:");
    textArray.push(divPixel.y + marker._topOffset);
    textArray.push("px;")
    if (marker._zIndex) {
      textArray.push(" z-index:");
      textArray.push(marker._zIndex);
      textArray.push(";");
    }
    textArray.push("'");
    if (marker._divClassName) {
      textArray.push(" class='");
      textArray.push(marker._divClassName);
      textArray.push("'");
    }
    textArray.push(" id='");
    textArray.push(marker._id);
    textArray.push("' >");

    var markerHtmlArray = marker._htmlTextArray;
    var j = markerHtmlArray.length;
    var currentSize = textArray.length;
    while (j--) {
      textArray[j + currentSize] = markerHtmlArray[j];
    }
    textArray.push("</div>");
  }

  //Insert the HTML into the overlay
  this._div.innerHTML = textArray.join('');
}

/** Hide all of the markers */
com.redfin.FastMarkerOverlay.prototype.hide = function() {
  if (!this._div) return;
  this._div.style.display = "none";
}

/** Show all of the markers after hiding them */
com.redfin.FastMarkerOverlay.prototype.unhide = function() {
  if (!this._div) return;
  this._div.style.display = "block";
}

/** Remove the overlay from the map; never use the overlay again after calling this function */
com.redfin.FastMarkerOverlay.prototype.onRemove = function() {
  this._div.parentNode.removeChild(this._div);
  this._div = null;
}


/** Create a single marker for use in FastMarkerOverlay
 * @constructor
 * @param {string} id DOM node ID of the div that will contain the marker
 * @param {google.maps.LatLng} latLng geographical location of the marker 
 * @param {Array.<string>} htmlTextArray an array of strings which we'll join together to form the HTML of your marker
 * @param {string=} divClassName the CSS class of the div that will contain the marker. (optional)
 * @param {string=} zIndex zIndex of the div that will contain the marker. (optional, 'auto' by default)
 * @param {number=} leftOffset the offset in pixels by which we'll horizontally adjust the marker position (optional)
 * @param {number=} topOffset the offset in pixels by which we'll vertically adjust the marker position (optional)
*/
com.redfin.FastMarker = function(id, latLng, htmlTextArray, divClassName, zIndex, leftOffset, topOffset) {
  this._id = id;
  this._latLng = latLng;
  this._htmlTextArray = htmlTextArray;
  this._divClassName = divClassName;
  this._zIndex = zIndex;
  this._leftOffset = leftOffset || 0;
  this._topOffset = topOffset || 0;
}

/** Copy the FastMarker
 * @return {com.redfin.FastMarker} duplicate of this marker
 */
com.redfin.FastMarker.prototype.copy = function() {
  var htmlArray = this._htmlTextArray;
  var i = htmlArray.length;
  var htmlArrayCopy = new Array(i);
  while (i--) {
    htmlArrayCopy[i] = htmlArray[i];
  }
  return new com.redfin.FastMarker(this._id, latLng, htmlArrayCopy, this._divClassName, this._zIndex, this._leftOffset, this._topOffset);
}

附加信息：在添加折线之前，我可以使用Firefox中的“检查”工具，然后选择包含标签的div和span。但是在添加折线之后div就消失了（标签在地图上仍然可见，但我无法点击它，我无法使用inspect-tool选择它。另外，添加折线后我在Firefox中看到“检查“许多div突然有的列表”溢出：隐藏在他们身上，我认为他们之前没有它。这是一个线索吗？如果我删除折线也没有用。的onclick功能标签仍然不起作用。比如，我可以添加折线，删除它，添加标签，标签'onclick不起作用。或者我可以添加标签，添加ployline，标签'onclick停止工作，删除折线，标签' onclick仍然无法正常工作。）

Answer 1

提供下载的zip文件中包含的Multimarker js-script之间存在差异（2013-03-22）（ http://code.google.com/p/multimarker/）和通过http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/src/FastMarkerOverlay.js访问的js脚本。

通过http：//访问的脚本说：

第24行：

panes.floatPane.appendChild(this._div);

而不是

panes.overlayLayer.appendChild(this._div);

和第140行：

this.latLng

而不是

latLng

我在下载的脚本中更改了这些内容，现在可以了！非常感谢geocodezip帮助我解决这个问题！如果有任何方法我可以给你信任，请告诉我。我是网站的新手，我不确定它是如何工作的......

Google maps API v3：使用多标记添加折线冲突

1 个答案: