0
我使用Multimarker將標記添加到自定義Google地圖。包含標籤的div使用onclick調用函數。但是，如果我向地圖添加多段線，則onclick將停止工作。我想不通爲什麼...Google地圖API v3：使用多標記添加折線衝突
這是添加標記代碼：
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);
};
這是多標誌代碼：
/*
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和spa包含標籤。但是在添加折線後div不見了（標籤在地圖上仍然可見，但我無法點擊它，而且我無法用檢查工具選中它，並且在添加了我在Firefox中看到的折線後「檢查「 - 列出很多div突然有」溢出：隱藏「在他們身上，我認爲他們之前沒有，這是否是一個線索？也沒有幫助，如果我刪除多段線。標籤仍然不起作用，我可以添加折線，刪除它，添加標籤，標籤的onclick不起作用，或者我可以添加標籤，添加ployline，標籤'onclick停止工作，刪除折線，標籤'的onclick仍然沒有工作。）
你的代碼對我來說很好，一旦我修復了IE特定的錯誤（掛在linepathcoords數組中的逗號）並添加一個「測試」功能。 – geocodezip 2013-03-21 18:19:59
[我的例子]（http://www.geocodezip.com/v3_SO_multimarkerPolyline.html） – geocodezip 2013-03-21 18:47:35