谷歌地图错误标记获取事件属性

Question

我想添加一个事件侦听器到谷歌地图上的每个标记，但由于某种原因，最后的标记是唯一一个获取侦听器。

这里与遇到的问题是在地图的页面：当你点击任何标记 http://www.comehike.com/outdoors/parks/trailhead.php

你看，只有左下角一个得到HTML弹出。我需要的是弹出发生在被点击的标记上。

任何想法可能会导致此？

谢谢， 亚历克斯

Answer 1

这里是JSFiddle Demo是与您的网站的谷歌地图类似，但与ajax相反，我只是放置了3个“虚拟”Lat Lng坐标。让我知道如果你需要进一步的帮助解释：

原因是你的回调函数。在您的initializeTrailheads()函数中，您创建了一个局部变量名称并附加了一个点击事件。然后，您将标记分配给infowindow做infowindow.open(map, marker);google.map.event.addListener有一个回调函数，当点击完成时它在不同的范围内。因此，它基本上抓住了其父项范围的变量，因为它本身没有。通常，当单击事件被触发时，标记将成为您初始化的最后一个标记（这是最后一个标记），并且基本上会与信息窗口相连接，因此信息窗口并未链接到之前的任何其他标记，因此导致你的问题。你所要做的仅仅是与this替换变量这指的是被点击的标记，并应解决您的问题：

google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, this); 
}); 

这只是从我的头顶。如果我没有在某些部分清楚地解释它，请让我知道。

Answer 2

这是一种很常见的problem.Take看看从here

var map; 
var infoWindow; 
var message = ['This', 'is', 'the', 'secret', 'message']; 

function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 
    map = new google.maps.Map(mapDiv, { 
    center: new google.maps.LatLng(37.4419, -122.1419), 
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    infoWindow = new google.maps.InfoWindow(); 

    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers); 
} 

function addMarkers() { 
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 

    function createMarker(map, position, number) { 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     var myHtml = '<strong>#' + number + '</strong><br/>' + message[number - 1]; 
     infoWindow.setContent(myHtml); 
     infoWindow.open(map, marker); 
    }); 
    } 

    for (var i = 1; i <= 5; i++) { 
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), 
             southWest.lng() + lngSpan * Math.random()); 

    createMarker(map, latLng, i); 
    } 
} 

采取此代码示例，希望对您有所帮助