Google지도 마커에 ID 추가

81

한 번에 하나씩 마커를 반복하고 추가하는 스크립트가 있습니다.

현재 마커에 정보 창을 포함하고 한 번에 5 개의 마커 만지도에 표시하려고합니다 (정보 창없이 4 개, 포함 1 개).

필요에 따라 정보 창을 삭제하고 닫을 수 있도록 각 마커에 ID를 추가하는 방법은 무엇입니까?

이것은 마커를 설정하는 데 사용하는 기능입니다.

function codeAddress(address, contentString) {

var infowindow = new google.maps.InfoWindow({
  content: contentString
});

if (geocoder) {

  geocoder.geocode( { 'address': address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);

       var marker = new google.maps.Marker({
          map: map, 
          position: results[0].geometry.location
       });

       infowindow.open(map,marker);

      } else {
       alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

}

javascript  google-maps 
— 새긴 ​​금
소스

답변:

193

JavaScript는 동적 언어입니다. 개체 자체에 추가 할 수 있습니다.

var marker = new google.maps.Marker(markerOptions);
marker.metadata = {type: "point", id: 1};

또한 모든 v3 객체는 MVCObject(). 당신이 사용할 수있는:

marker.setValues({type: "point", id: 1});
// or
marker.set("type", "point");
marker.set("id", 1);
var val = marker.get("id");
— CrazyEnigma
소스
10
마커 ID를 부여한 후지도 캔버스 외부에서 이러한 마커에 액세스하는 방법이 궁금합니다. $ ( '# 1'). doSomething (); 예를 들어?
— willdanceforfun 2013 년
@willdanceforfun 마커에 클릭 이벤트를 추가하고 다음에 대한 정보를 얻으십시오 this.google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });
— Mayeenul Islam
15

저에게 맞는 다른 솔루션을 추가하기 만하면됩니다. 마커 옵션에 간단히 추가 할 수 있습니다.

var marker = new google.maps.Marker({
    map: map, 
    position: position,

    // Custom Attributes / Data / Key-Values
    store_id: id,
    store_address: address,
    store_type: type
});

그런 다음 다음을 사용하여 검색하십시오.

marker.get('store_id');
marker.get('store_address');
marker.get('store_type');
— zen.c
소스
이것은 무리를 도왔습니다. 어떤 예도 이것을 가지고 있지 않았습니다. 클릭 반환 함수로 소비 할 값을 전달하는 데 적합합니다.
— cngodles
2

Location마커와 관련된 모든 것을 처리하는 데 사용 하는 간단한 클래스가 있습니다. 잠시 살펴볼 수 있도록 아래에 내 코드를 붙여 넣겠습니다.

마지막 줄은 실제로 마커 개체를 만드는 것입니다. 다음과 같은 내 위치의 일부 JSON을 반복합니다.

{"locationID":"98","name":"Bergqvist Järn","note":null,"type":"retail","address":"Smidesvägen 3","zipcode":"69633","city":"Askersund","country":"Sverige","phone":"0583-120 35","fax":null,"email":null,"url":"www.bergqvist-jb.com","lat":"58.891079","lng":"14.917371","contact":null,"rating":"0","distance":"45.666885421019"}

다음은 코드입니다.

당신이 보면 target()내 위치 클래스의 방법, 당신은 내가 정보창의의에 대한 참조를 유지하고 있습니다 간단하게 볼 수 있습니다 open()및 close()때문에 참조 그들을.

라이브 데모보기 : http://ww1.arbesko.com/en/locator/ (스웨덴 도시를 스톡홀름과 같이 입력하고 Enter 키를 누르십시오)

var Location = function() {
    var self = this,
        args = arguments;

    self.init.apply(self, args);
};

Location.prototype = {
    init: function(location, map) {
        var self = this;

        for (f in location) { self[f] = location[f]; }

        self.map = map;
        self.id = self.locationID;

        var ratings = ['bronze', 'silver', 'gold'],
            random = Math.floor(3*Math.random());

        self.rating_class = 'blue';

        // this is the marker point
        self.point = new google.maps.LatLng(parseFloat(self.lat), parseFloat(self.lng));
        locator.bounds.extend(self.point);

        // Create the marker for placement on the map
        self.marker = new google.maps.Marker({
            position: self.point,
            title: self.name,
            icon: new google.maps.MarkerImage('/wp-content/themes/arbesko/img/locator/'+self.rating_class+'SmallMarker.png'),
            shadow: new google.maps.MarkerImage(
                                        '/wp-content/themes/arbesko/img/locator/smallMarkerShadow.png',
                                        new google.maps.Size(52, 18),
                                        new google.maps.Point(0, 0),
                                        new google.maps.Point(19, 14)
                                    )
        });

        google.maps.event.addListener(self.marker, 'click', function() {
            self.target('map');
        });

        google.maps.event.addListener(self.marker, 'mouseover', function() {
            self.sidebarItem().mouseover();
        });

        google.maps.event.addListener(self.marker, 'mouseout', function() {
            self.sidebarItem().mouseout();
        });

        var infocontent = Array(
            '<div class="locationInfo">',
                '<span class="locName br">'+self.name+'</span>',
                '<span class="locAddress br">',
                    self.address+'<br/>'+self.zipcode+' '+self.city+' '+self.country,
                '</span>',
                '<span class="locContact br">'
        );

        if (self.phone) {
            infocontent.push('<span class="item br locPhone">'+self.phone+'</span>');
        }

        if (self.url) {
            infocontent.push('<span class="item br locURL"><a href="http://'+self.url+'">'+self.url+'</a></span>');
        }

        if (self.email) {
            infocontent.push('<span class="item br locEmail"><a href="mailto:'+self.email+'">Email</a></span>');
        }

        // Add in the lat/long
        infocontent.push('</span>');

        infocontent.push('<span class="item br locPosition"><strong>Lat:</strong> '+self.lat+'<br/><strong>Lng:</strong> '+self.lng+'</span>');

        // Create the infowindow for placement on the map, when a marker is clicked
        self.infowindow = new google.maps.InfoWindow({
            content: infocontent.join(""),
            position: self.point,
            pixelOffset: new google.maps.Size(0, -15) // Offset the infowindow by 15px to the top
        });

    },

    // Append the marker to the map
    addToMap: function() {
        var self = this;

        self.marker.setMap(self.map);
    },

    // Creates a sidebar module for the item, connected to the marker, etc..
    sidebarItem: function() {
        var self = this;

        if (self.sidebar) {
            return self.sidebar;
        }

        var li = $('<li/>').attr({ 'class': 'location', 'id': 'location-'+self.id }),
            name = $('<span/>').attr('class', 'locationName').html(self.name).appendTo(li),
            address = $('<span/>').attr('class', 'locationAddress').html(self.address+' <br/> '+self.zipcode+' '+self.city+' '+self.country).appendTo(li);

        li.addClass(self.rating_class);

        li.bind('click', function(event) {
            self.target();
        });

        self.sidebar = li;

        return li;
    },

    // This will "target" the store. Center the map and zoom on it, as well as 
    target: function(type) {
        var self = this;

        if (locator.targeted) {
            locator.targeted.infowindow.close();
        }

        locator.targeted = this;

        if (type != 'map') {
            self.map.panTo(self.point);
            self.map.setZoom(14);
        };

        // Open the infowinfow
        self.infowindow.open(self.map);
    }
};

for (var i=0; i < locations.length; i++) {
    var location = new Location(locations[i], self.map);
    self.locations.push(location);

    // Add the sidebar item
    self.location_ul.append(location.sidebarItem());

    // Add the map!
    location.addToMap();
};
— 고래 샐러드
소스
그것은 질문에 대한 답 이 아닙니다 . 조금도.
— MrUpsidown
1

각 마커 개체를 저장하고 ID를 참조하는 캐시를 사용하지 않는 이유는 무엇입니까?

var markerCache= {};
var idGen= 0;

function codeAddress(addr, contentStr){
    // create marker
    // store
    markerCache[idGen++]= marker;
}

편집 : 물론 이것은 배열과 같은 길이 속성을 제공하지 않는 숫자 인덱스 시스템에 의존합니다. 물론 Object 객체를 프로토 타입하고 길이 등을 만들 수 있습니다. OTOH, 각 주소의 고유 ID 값 (MD5 등)을 생성하는 것이 방법 일 수 있습니다.

— bdl
소스
-2

마커에 이미 고유 ID가 있습니다.

marker.__gm_id
— bfg9k
소스
이 중에서 내가 사용할 유일한 솔루션입니다.
— clime 2013-08-15
2
이중 밑줄과 gm접두사는 이것이 보장하지 않는 개인 변수임을 나타내야합니다. 그것을 피하십시오.
— LeeGee
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.