创建包含id属性的Google Maps Marker

对不起，也许是一个愚蠢的问题，但我读过添加ID到谷歌地图标记之前没有成功。

我尝试创建一个包含许多标记的地图。 我想用jquery来处理这个标记。 简单的$（’＃marker1’）。doSomething（）; 如何为这个标记赋予一个有价值的id属性？ 我非常简单的演示代码将向您展示我尝试使其工作的方式。

function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 6, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true, title: 'Hello World!', }); marker.set("type", "point"); marker.set("id", "ABC"); } 

非常感谢！

Answer 1

var marker保存标记对象。 您可以将自己的属性添加到此对象

 marker.type = "point"; marker.myID = "ABC"; 

您可能希望跟踪您创建的所有标记，在函数外部创建一个数组以赋予其范围。 并将您创建的所有标记推送到此arrays。

 var markers = []; function initialise() { // Initialise the map etc. var marker = new google.maps.Marker({ // Marker options }); marker.type = "type"; marker.myID = 4 markers.push(marker); } 

如果您创建其他标记，只需将它们推送到您创建的数组即可。 要访问它们，只需使用$.each()遍历数组。

Answer 2

只需使用以下方法将click事件绑定到标记：

 function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 6, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true, title: 'Hello World!', type: 'point' }); google.maps.event.addListener(marker, 'click', function() { // do something. You may use jQuery here. }); 

您可以向标记添加任意数量的数据，例如：

 var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true, title: 'Hello World!', type: 'point', somedata: true }); 

然后使用该对象在点击上执行某些操作，例如…

 google.maps.event.addListener(marker, 'click', function() { if (this.somedata) doSomething(); }); 

此外，如果您放下多个标记，可以使用简单的循环向所有标记添加点击事件。

一个很好的例子是我有一个lat / lng位置数组，并希望为每个位置删除标记，并让每个标记在点击时执行不同的操作。 我可以设置一些数组，一个使用lat / lng坐标，第二个使用匹配的标题，比如说，一个html元素存在于页面的其他位置（因此，点击它会删除该元素，作为示例）。

 var markers = [], marker_i = 0, marker_p = ['-25.363882,131.044922','-25.363882,133.044922'], marker_t = ['Foo', 'Bar'], marker_d = ['.foo', '.bar']; for (var i = 0; i < marker_pos.length; i++) { markers.push(new google.maps.Marker({ position: marker_p[i], map: map, draggable: true, type: 'point', title: marker_t[i], htmlelement: marker_d[i] }); google.maps.event.addListener(markers[marker_i], 'click', function() { $(this.htmlelement).remove(); }); marker_i++; } 

希望这可以帮助。