1

抱歉，这可能是一个愚蠢的问题，但我之前读过将 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");
}

非常感谢！

4

2 回答 2

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().

于 2012-09-17T17:51:19.127 回答
1

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

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

希望这可以帮助。

于 2012-09-17T17:51:50.203 回答