Google के मानचित्र मार्करों में आईडी जोड़ना

Question

मेरे पास एक स्क्रिप्ट है जो एक समय में एक को लूप और जोड़ देती है।

मैं एक सूचना खिड़की के लिए वर्तमान मार्कर प्राप्त करने की कोशिश कर रहा हूं और केवल एक समय में मानचित्र पर 5 मार्कर हैं (4 बिना सूचना विंडो और 1 के साथ)

मैं प्रत्येक मार्कर में एक आईडी कैसे जोड़ूंगा ताकि मैं जरूरत के अनुसार जानकारी विंडो को हटा और बंद कर सकूं।

यह वह फ़ंक्शन है जिसका उपयोग मैं मार्कर सेट करने के लिए कर रहा हूं:

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

}

Answer 1

जावास्क्रिप्ट एक गतिशील भाषा है। आप इसे केवल ऑब्जेक्ट में जोड़ सकते हैं।

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

Comments

मुझे उत्सुकता है कि, एक बार जब आपने मार्कर आईडी दे दिया है, तो आप नक्शे के कैनवास के बाहर इन मार्करों तक पहुंचने के बारे में क्या सोचते हैं। $ ('# 1')। doSomething (); उदाहरण के लिए?

— वैंडांसफोरफुन

@willdanceforfun मार्कर पर क्लिक करें घटना जोड़ें और पर जानकारी पाने के लिए this:google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });

— Mayeenul इस्लाम

Answer 2

बस एक और समाधान जोड़ना जो मेरे लिए काम करता है .. आप इसे बस मार्कर विकल्पों में जोड़ सकते हैं:

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');

Comments

इससे एक झुंड को मदद मिली। किसी भी उदाहरण के पास यह नहीं था। क्लिक रिटर्न फ़ंक्शंस के साथ उपभोग के लिए मूल्यों को पारित करने के लिए अच्छा है।

— cngodles

Answer 3

मेरे पास एक साधारण 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()मेरे स्थान वर्ग में विधि को देखते हैं, तो आप देखेंगे कि मैं infowindow के संदर्भ रखता हूं और एक संदर्भ के कारण बस open()और close()उन्हें कर सकता हूं।

एक लाइव डेमो देखें: http://ww1.arbesko.com/en/locator/ (स्वीडिश शहर में स्टॉकहोम की तरह टाइप करें, और हिट दर्ज करें)

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

Comments

यही कारण है कि है नहीं इस सवाल का जवाब। बिल्कुल भी।

— MrUpsidown

Answer 4

एक कैश का उपयोग क्यों न करें जो प्रत्येक मार्कर ऑब्जेक्ट को स्टोर करता है और आईडी को संदर्भित करता है?

var markerCache= {};
var idGen= 0;

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

संपादित करें: बेशक यह एक संख्यात्मक सूचकांक प्रणाली पर निर्भर करता है जो एक सरणी की तरह एक लंबी संपत्ति प्रदान नहीं करता है। आप निश्चित रूप से ऑब्जेक्ट ऑब्जेक्ट को प्रोटोटाइप कर सकते हैं और केवल इस तरह की चीज के लिए एक लंबाई आदि बना सकते हैं। OTOH, प्रत्येक पते का एक विशिष्ट आईडी मान (MD5, आदि) उत्पन्न करने का तरीका हो सकता है।

Answer 5

मार्कर में पहले से ही विशिष्ट आईडी है

marker.__gm_id

Comments

एकमात्र समाधान मैं इनमें से उपयोग करूंगा।

— क्लीमे

डबल अंडरस्कोर और gmउपसर्ग आपको इंगित करना चाहिए कि यह एक निजी चर है जिसकी गारंटी नहीं है। इससे बचो।

— लीगी