एक HTMLElement

Question

से google.maps.Map उदाहरण प्राप्त करें मेरे पास एक पृष्ठ पर एक मौजूदा मानचित्र है। मैं HTMLElement जावास्क्रिप्ट ऑब्जेक्ट प्राप्त करने के लिए document.getElementById() की पंक्तियों के साथ कुछ का उपयोग कर उस तत्व का चयन कर सकता हूं। क्या नक्शा प्रारंभ होने पर google.maps.Map का उदाहरण प्राप्त करना संभव है, यानी यह HTMLElement ऑब्जेक्ट या उसके प्रोटोटाइप में एक प्रॉपर्टी है?

Answer 1

आप DOM Element से google.maps.Map वस्तु है, जो पर गूगल मैप्स वस्तु निर्माण किया गया नहीं मिल सकता है। google.maps.Map सिर्फ एक रैपर है, जो नक्शा देखने के लिए DOM Element नियंत्रित करता है, और उस तत्व के पास इसके रैपर का संदर्भ नहीं है।

यदि आपकी समस्या केवल दायरा है, तो mapwindow ऑब्जेक्ट की संपत्ति के रूप में बनाएं, और यह आपके पृष्ठ में हर जगह से पहुंच योग्य होगा। आप इनमें से किसी एक का उपयोग करके 'map' वैश्विक रूप में कर सकते हैं:

window.map = new google.maps.Map(..) 

या

map = new google.maps.Map(...) //AVOID 'var' 

Answer 2

जब आप मानचित्र प्रारंभ करते हैं तो आप एक उदाहरण बनाते हैं;

var map = new google.maps.Map(document.getElementById("map_element"), options); 

आपको लगता है कि उदाहरण का उपयोग जब भी आप एक मार्कर आदि डाल, स्थान बदल रहा है, जैसे कुछ करने के लिए यह एक HTMLElement वस्तु नहीं है चाहता हूँ। हालांकि इसमें getDiv() विधि है, जो आपको उस HTML तत्व को देता है जिस पर यह चल रहा है।

map.getDiv(); // in this case it returns the element with the id 'map_element' 

Answer 3

मैं एक ऐसी ही समस्या थी। मैं बस इतना करना चाहता था कि वे कहां बनाए गए मानचित्रों में हेरफेर करें। मैंने ऐसा कुछ करने की कोशिश की (मुझे लगता है कि यह आपकी भी मदद करेगा)।

function load_map(el_id, lat, lng) { 
    var point = new google.maps.LatLng(lat,lng); 
    var myMapOptions = { 
    scrollwheel:false, 
    zoom: 15, 
    center: point, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     position: google.maps.ControlPosition.RIGHT_TOP 
    }, 
    navigationControl: true, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL, 
     position: google.maps.ControlPosition.LEFT_CENTER 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById(el_id),myMapOptions); 
    var marker = new google.maps.Marker({ 
    draggable:true, 
    map: map, 
    position: point 
    }); 
    return({ 
    container:map.getDiv(), 
    marker:marker, 
    mapa:map 
    }); 
} 

क्या इस समारोह करता है कुछ कंटेनर में एक नक्शा बनाने के लिए यह फोन करने के बाद है: मैं समारोह (कम या ज्यादा इस तरह) बना लिया है।

var mapa = load_map('mapa_container', 53.779845, 20.485712); 

फ़ंक्शन नक्शा बनाने के दौरान उपयोग किए गए कुछ डेटा वाले ऑब्जेक्ट को वापस कर देगा। एक नक्शा ही मैं बस में हेरफेर कर सकते हैं मेरे मामले में, बनाने के बाद, प्रत्येक नक्शे पर मार्कर अलग mapa वस्तु का उपयोग कर, उदाहरण के लिए:

mapa.marker.setPosition(new google.maps.LatLng(20,30)); 
mapa.mapa.setCenter(new google.maps.LatLng(20,30)); 

यह वही coords के लिए मार्कर की स्थिति और केंद्र नक्शा बदल जाएगा। ध्यान दें कि lng और lat मान अलग-अलग हैं, जबकि फ़ंक्शन को कॉल करते समय एक नक्शा बनाता है।

उम्मीद है कि मदद करता है।

Answer 4

आप google.maps.MapDOM Element से ऑब्जेक्ट प्राप्त कर सकते हैं, थोड़ी सी चाल के साथ।

जब आप मानचित्र ऑब्जेक्ट प्रारंभ करते हैं, तो आपको ऑब्जेक्ट की डेटा विशेषता पर ऑब्जेक्ट को स्टोर करने की आवश्यकता होती है।

उदाहरण:

$.fn.googleMap = function (options) { 
    var _this = this; 

    var settings = $.extend({}, { 
     zoom: 5, 
     centerLat: 0, 
     centerLon: 0 
    }, options); 

    this.initialize = function() { 
     var mapOptions = { 
      zoom: settings.zoom 
     }; 

     var map = new google.maps.Map(_this.get(0), mapOptions); 
     // do anything with your map object here, 
     // eg: centering map, adding markers' events 

     /******************************************** 
     * This is the trick! 
     * set map object to element's data attribute 
     ********************************************/ 
     _this.data('map', map); 

     return _this; 
    }; 
    // ... more methods 

    return this; 
}; 

आप एक नक्शा तत्व, जैसे परिभाषित करने के बाद:

var mapCanvas = $('#map-canvas'); 
$('.location').on('click', function() { 
    // google map takes time to load, so it's better to get 
    // the data after map is rendered completely 
    var map = mapCanvas.data("map"); 
    if (map) { 
     map.panTo(new google.maps.LatLng(
      $(this).data('latitude'), 
      $(this).data('longitude') 
      )); 
    } 
}); 

:

var mapCanvas = $('#map-canvas'); 
var map = mapCanvas.googleMap({ 
    zoom: 5, 
    centerLat: 0, 
    centerLong: 0 
}); 
// ... add some pre-load initiation here, eg: add some markers 
// then initialize map 
map.initialize(); 

आप तो एलीमेंट आईडी, जैसे का उपयोग करके बाद में नक्शा वस्तु प्राप्त कर सकते हैं

इस विधि का उपयोग करके, आप एक पृष्ठ पर विभिन्न व्यवहार के साथ कई मानचित्र हो सकते हैं।

Answer 5

आप पॉलिमर परियोजना से गूगल-मैप घटक का उपयोग कर रहे हैं, तो आप इस तरह मौजूदा नक्शे Dom प्राप्त कर सकते हैं:

:

var map = document.querySelector('google-map'); 

एक बार जब आप किया है कि, नक्शे की वर्तमान उदाहरण द्वारा पहुँचा जा सकता

var currentMapInstance = map.map; 

Answer 6

var map = $("#map_canvas").gmap('get','map') का उपयोग करके एक चर में नक्शा प्राप्त कर सकते हैं और इस चर का उपयोग करके मौजूदा मानचित्र को बदल सकते हैं।

चीयर्स