Thêm ID vào điểm đánh dấu bản đồ google

81

Tôi có một tập lệnh lặp lại và thêm các điểm đánh dấu lần lượt.

Tôi đang cố gắng làm cho điểm đánh dấu hiện tại có cửa sổ thông tin và chỉ có 5 điểm đánh dấu trên bản đồ cùng một lúc (4 điểm không có cửa sổ thông tin và 1 điểm có)

Làm cách nào để tôi thêm một id vào mỗi điểm đánh dấu để tôi có thể xóa và đóng các cửa sổ thông tin khi cần.

Đây là chức năng tôi đang sử dụng để đặt điểm đánh dấu:

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 
— Nick
nguồn

Câu trả lời:

193

JavaScript là một ngôn ngữ động. Bạn chỉ có thể thêm nó vào chính đối tượng.

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

Ngoài ra, vì tất cả các đối tượng v3 đều mở rộng MVCObject(). Bạn có thể dùng:

marker.setValues({type: "point", id: 1});
// or
marker.set("type", "point");
marker.set("id", 1);
var val = marker.get("id");
— CrazyEnigma
nguồn
10
Tôi tò mò làm thế nào, một khi bạn đã cung cấp id của điểm đánh dấu, bạn sẽ truy cập những điểm đánh dấu này bên ngoài canvas bản đồ như thế nào. $ ('# 1'). DoSomething (); ví dụ?
— willdanceforfun Ngày
@willdanceforfun Thêm sự kiện nhấp chuột vào điểm đánh dấu và nhận thông tin về this:google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });
— Mayeenul Islam
15

Chỉ cần thêm một giải pháp khác phù hợp với tôi .. Bạn có thể chỉ cần thêm nó vào các tùy chọn điểm đánh dấu:

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

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

Và sau đó truy xuất chúng bằng:

marker.get('store_id');
marker.get('store_address');
marker.get('store_type');
— zen.c
nguồn
Điều này đã giúp một loạt. Không có ví dụ nào có điều này. Tốt để chuyển các giá trị để tiêu dùng với các chức năng trả về nhấp chuột.
— cngodles
2

Tôi có một Locationlớp đơn giản mà tôi sử dụng để xử lý tất cả những thứ liên quan đến điểm đánh dấu của mình. Tôi sẽ dán mã của tôi bên dưới để bạn xem qua.

(Các) dòng cuối cùng là những gì thực sự tạo ra các đối tượng đánh dấu. Nó lặp lại một số JSON của các vị trí của tôi, trông giống như sau:

{"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"}

Đây là mã:

Nếu bạn nhìn vào target()phương thức trong lớp Vị trí của tôi, bạn sẽ thấy rằng tôi giữ các tham chiếu đến infowindow's và có thể đơn giản open()và close()chúng vì một tham chiếu.

Xem bản trình diễn trực tiếp: http://ww1.arbesko.com/en/locator/ (nhập vào một thành phố của Thụy Điển, chẳng hạn như Stockholm và nhấn 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();
};
— cá voi
nguồn
Điều đó không trả lời câu hỏi. Ở tất cả.
— MrUpsidown
1

Tại sao không sử dụng bộ đệm ẩn lưu từng đối tượng điểm đánh dấu và tham chiếu đến một ID?

var markerCache= {};
var idGen= 0;

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

Chỉnh sửa: tất nhiên điều này phụ thuộc vào hệ thống chỉ mục số không cung cấp thuộc tính độ dài như một mảng. Tất nhiên, bạn có thể tạo nguyên mẫu đối tượng Object và tạo chiều dài, v.v. cho một thứ như vậy. OTOH, tạo một giá trị ID duy nhất (MD5, v.v.) của mỗi địa chỉ có thể là cách để thực hiện.

— bdl
nguồn
-2

Điểm đánh dấu đã có id duy nhất

marker.__gm_id
— bfg9k
nguồn
Giải pháp duy nhất tôi sẽ sử dụng trong số này.
— clime
2
Dấu gạch dưới kép và gmtiền tố sẽ cho bạn biết rằng đây là một biến riêng không đảm bảo. Tránh nó.
— LeeGee
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.