我有一个复杂的流程,我要为地图上的每条折线附加鼠标悬停事件。附加事件的代码很简单:
google.maps.event.addListener(polyline, "mouseover", function() {
console.log('event fired');
});
但该事件附加于少数折线,而不是其他折线。可能是什么原因?
修改
以下是上述代码之前的一些代码,用于定义折线:
this.polyline = new google.maps.Polyline({
path : [fromPosition, toPosition],
strokeColor : '#CCCCCC',
strokeOpacity : 1.0,
strokeWeight : 2
});
var polyline = this.polyline;
编辑2012年4月5日
以下是产生问题的代码,请解释它为什么会发生并推荐任何解决方案。感谢
function Link(from, to) {
this.from = from;
this.to = to;
}
Link.prototype.show = function() {
this.line = new google.maps.Polyline({
path : [this.from, this.to],
strokeColor : "#0000FF",
strokeOpacity : 0.5,
strokeWeight : 6
});
this.line.setMap(map);
google.maps.event.addListener(this.line, 'mouseover', function() {
this.line.setOptions({
strokeOpacity : 1
});
});
google.maps.event.addListener(this.line, 'mouseout', function() {
this.line.setOptions({
strokeOpacity : 0.5
});
});
}
var links = [];
var link2 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)), link1 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18));
links.push(link1);
links.push(link2);
// I've a long list of links, so I'll prefer a loop
for(var i = 0; i < links.length; i++) {
links[i].show();
}
JSFiddle演示:http://jsfiddle.net/wasimbhalli/9bg6x/
答案 0 :(得分:8)
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-3, 23),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
var bounds = [];
var bounds_group_1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
bounds_group_2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
bounds.push(bounds_group_1);
bounds.push(bounds_group_2);
for (var i = 0; i < bounds.length; i++) {
addPolylineSegment(bounds[i]);
}
}
function addPolylineSegment(bounds) {
// optionally you can put each polyline
// segment into an array to later use...
var polyline;
polyline = new google.maps.Polyline({
path: bounds,
strokeColor: "#0000FF",
strokeOpacity: 0.5,
strokeWeight: 6
});
polyline.setMap(map);
// attach event listener to each segment...
google.maps.event.addListener(polyline, 'mouseover', function(event) {
this.setOptions({
strokeOpacity: 1
});
});
google.maps.event.addListener(polyline, 'mouseout', function(event) {
this.setOptions({
strokeOpacity: 0.5
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
答案 1 :(得分:2)
好的,我正在尝试让解决方案靠近您的代码。关键是将监听器的this.line.setOptions改为this.setOptions:
google.maps.event.addListener(this.line, 'mouseover', function() {
this.setOptions({
strokeOpacity : 1
});
});
google.maps.event.addListener(this.line, 'mouseout', function() {
this.setOptions({
strokeOpacity : 0.5
});
});
我在另一个问题上看到了类似的标记案例。我相信函数()中的this
已经引用了addListener()的第一个参数,在本例中是this.line
,所以你只需说this
即可。这是jsfiddle:
我做的另一个改变是将links []代码放在我的initialize()中。祝你万事如意!
答案 2 :(得分:2)
我认为你有一个范围问题。
更改
this.line.setOptions
与
this.setOptions
Firebug和console.log()是你的朋友:)
答案 3 :(得分:0)
我设法使用下面描述的方法解决这个问题。如果我理解正确,那么将一个侦听器附加到折线的循环实际上并不会以这种方式“附加”到折线,而是需要一个包含折线和侦听器的新类实例。这样,每条折线都会获得它自己的监听器。
请参阅下面的解释。
编辑5.4.2012
这里还有一个粗略的JSFiddle演示代码。 Link to JSFiddle demo
function initialize() {
// initialize Google Maps canvas normally
var polylines = [];
// Data set of the polylines you want to present on the map,
// e.g. [ { lat:"...",lon:"..." }, ...]
var polylineData = [{ ... }]
for ( i in polylineData ) {
var line = new google.maps.Polyline({
path: [/*coordinates as google.maps.LatLng objects*/]
});
// Create a new myPolyLineClass instance that contains the polyline data
// and push it to polylines array.
polylines.push(new myPolyLineClass(line));
}
// Set all the polylines and their individual listeners on map
for ( i in polylines) {
polylines[i].line.setMap(map);
}
}
function MyPolylineClass(lineData) {
this.line = lineData;
// + all other data you want the polylines to contain
// Add listeners using google.maps.event.addListener to all class instances
// when they are constructed.
// for instance:
google.maps.event.addListener(line, 'mouseover', function() {
line.setOptions({ [options you want to set when area is hovered
and selected] });
});
// Add listeners also for when polyline is not hovered anymore, respectively,
// and other methods you might want to call when polylines are being interacted with.
};
希望这有帮助!
干杯