Question

对不起可能是一个愚蠢的问题，但我之前看过Adding ID's to google map markers但没有成功。

我尝试创建一个包含多个标记的地图。我想用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";

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

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

使用以下方法将点击事件绑定到标记：

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元素存在于页面的其他地方（所以在点击时它会删除该元素，作为一个例子）。 p>

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++;
}

希望这有帮助。

创建包含id属性的Google Maps Marker

2 个答案: