创建包含id属性的Google地图标记 [英] Creating Google Maps Marker including id attribute

问题描述

对不起，也许一个愚蠢的问题，但我已阅读添加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）; 
 
  

非常感谢！

 使用下面的方法将一个点击事件绑定到一个标记上：>解决方案函数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！' ，
类型：'点'
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 //做点什么，你可以在这里使用jQuery。
}）; 
  

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

  var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，
 draggable：true ，
 title：'Hello World！'，
类型：'point'，
 somedata：true 
}）; 
  

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

pre $ lt; code> 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 ++; 
} 
  

希望这有助于。

sorry for maybe a stupid question but I've read Adding ID's to google map markers before without success.

I try to create a map with a number of markers. I would like to use jquery to work with this markers. Simple $('#marker1').doSomething(); How is it possible to give this marker a valued id attribute? My really simple demo code will show you the way i tried to make it work.

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");
}

Thanks a lot!

解决方案

Just bind a click event to a marker using the following method:

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.
});

You can add any amount of data to a marker such as:

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

And then use that object to do certain actions on click, such as...

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

Additionally if you're putting down multiple markers you can add click events to all of them by using a simple loop.

A good example is that I have an array of lat/lng positions and want to drop markers for each of them and have each of them do something different on click. I can set a few arrays, one with lat/lng coordinates and the second with matching titles and, lets say, an html element that exists elsewhere on the page (so that on click it removes that element, as an example).

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

Hope this helps.

这篇关于创建包含id属性的Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！