I want to encapsulate google map polygon(google.maps.Polygon) and map (google.maps.Map) into a javascript object and handle some event for both polygon and map. Here is some code
function Landmark(map, polygon) {
this.map = map;
this.polygon = polygon;
// Add a listener for the click event
google.maps.event.addListener(this.map, 'click', this.addPoint);
google.maps.event.addListener(this.polygon, 'click', this.addPoint);
addPoint = function (event) {
alert("xxx");
}
}
I called the function using :
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polygonInTest = new google.maps.Polygon({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
polygonInTest.setMap(map);
var landmark = new Landmark(map, polygonInTest);
But when I trigger the event, by clicking the 开发者_C百科map, I got this error from firebug :
f.e is undefined
[Break On This Error] function de(a,b){var c,d=a.__e3_||{};i...n"+b]=c,c=new ce(a,b,c,3));return c};
Can anyone point me where have I done wrong and give some suggestions? Any comment or help is appreciated.
Thanks in advance.
My best guess is that when you are creating an event listener
google.maps.event.addListener(this.map, 'click', this.addPoint);
your handler is not yet defined (i.e. you define addPoint
later), so at the time of addListener()
call this.addPoint
is undefined
. And GMaps messes up later when the time comes for the handler to be called.
At least that's how I realized I had a problem at this point by looking at your code :)
精彩评论