Google मानचित्र v3 - देखने योग्य क्षेत्र और ज़ूम स्तर को सीमित करता है

97

क्या Google मैप v3 को एक निश्चित क्षेत्र तक सीमित करना संभव है? मैं केवल कुछ क्षेत्र (जैसे एक देश) प्रदर्शित करने की अनुमति देना चाहता हूं और उपयोगकर्ता को अन्यत्र स्लाइड करना चाहता हूं। इसके अलावा, मैं जूम स्तर को प्रतिबंधित करना चाहता हूं - जैसे केवल स्तर 6 और 9 के बीच। और मैं सभी बेस मैप प्रकारों का उपयोग करना चाहता हूं।

क्या इसे प्राप्त करने का कोई तरीका है?

मुझे स्टाइलडपाइप का उपयोग करके ज़ूम स्तर को सीमित करने के साथ आंशिक सफलता मिली, लेकिन मैं केवल ROADMAP को प्रतिबंधित करने में सफल रहा, मैं इस तरह से अन्य बुनियादी प्रकारों पर ज़ूम को सीमित करने में सक्षम नहीं था।

किसी भी मदद के लिए धन्यवाद

javascript google-maps google-maps-api-3

— Tomik
स्रोत

119

आप dragendईवेंट को सुन सकते हैं , और यदि नक्शा अनुमत सीमा के बाहर खींच लिया गया है, तो उसे वापस अंदर ले जाएं। आप अपने अनुमत सीमा को एक LatLngBoundsवस्तु में परिभाषित कर सकते हैं और फिर contains()यह जांचने के लिए विधि का उपयोग कर सकते हैं कि क्या नया लैट / लैंग सेंटर सीमा के भीतर है।

आप ज़ूम स्तर को बहुत आसानी से सीमित भी कर सकते हैं।

निम्नलिखित उदाहरण पर विचार करें: Fiddle Demo

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 5;

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });

   </script> 
</body> 
</html>

उपरोक्त उदाहरण से स्क्रीनशॉट। उपयोगकर्ता इस मामले में आगे दक्षिण या दूर पूर्व की ओर नहीं खींच पाएंगे:

Google मैप्स जावास्क्रिप्ट एपीआई v3 उदाहरण: फोर्स स्टॉप मैप ड्रैगिंग

— डैनियल वासल्लो
स्रोत

2

निर्णय साफ नहीं दिखता। एक दूसरे को क्यों if (x < minX) x = minX;और if (x > maxX) x = maxX;कैसे बाहर रखें? यद्यपि आप मिनएक्स / मैक्सएक्स और मैक्सएक्स / मैक्सी निर्देशांक पर कैनवास को केंद्र में रखते हैं, हालांकि वे केंद्र के निर्देशांक नहीं हैं?

— अलेक्जेंडर पालमार्चुक

1

dragendघटना के बजाय आप draggable: falseमानचित्र उदाहरण ( कार्य उदाहरण ) पर उपयोग कर सकते हैं

— machineaddict

उपयोगकर्ता को प्रतिबंधित करने के लिए "zoom_changed" घटना का उपयोग करने के लिए यह एक अच्छी तकनीक नहीं है। क्योंकि पहली बार यह हमेशा न्यूनतम स्तर से आगे निकल जाएगा और फिर अपने कोड का उपयोग करते हुए, आप फिर से मिनी जूम सेट कर रहे हैं जो स्क्रीन को फ्लिकर करेगा।

— जितेंद्र पंचोली

check zillow.com/homes/for_sale/days_sort/… उन्होंने इसे सही तरीके से किया है, निश्चित नहीं कि कैसे।

— जितेंद्र पंचोली

1

यह मेरे लिए पूरी तरह से काम करता है अगर मैं बदले की center_changedघटना में बदल गया dragend।

— जोहान बी

182

ज़ूम स्तर को प्रतिबंधित करने का बेहतर तरीका घटनाओं पर प्रतिक्रिया देने के बजाय minZoom/ maxZoomविकल्पों का उपयोग करना हो सकता है ?

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

या विकल्प मानचित्र आरंभीकरण के दौरान निर्दिष्ट किए जा सकते हैं, जैसे:

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

देखें: Google मैप्स जावास्क्रिप्ट एपीआई V3 संदर्भ

— ChrisV
स्रोत

3

अब यह निश्चित रूप से ज़ूम स्तर को प्रतिबंधित करने का सबसे अच्छा तरीका है। जब मैं पोस्ट लिख रहा था तब फीचर मैप्स एपीआई v3 में मौजूद नहीं था। शुक्र है, वे एपीआई में सुधार करते रहते हैं।

— टॉमिक

2

यह पूरी तरह से काम करता है, यह ज़ूम के लिए सबसे अच्छा जवाब होना चाहिए।

— पल्लब २३'११

3

इसे उन लोगों के लिए उत्तर के रूप में चिह्नित किया जाना चाहिए जो केवल चुने हुए उत्तर को देखते हैं।

— एरजब

9

ज़ूम स्तर सेट करने से पैनिंग पर कोई प्रभाव नहीं पड़ता है।

— सिंपैटिक

1

निश्चित रूप से जाने का सबसे अच्छा तरीका

— क्रिसरिख

16

खुशखबरी। मैप्स जावास्क्रिप्ट एपीआई के संस्करण 3.35 से शुरू, जो 14 फरवरी, 2019 को लॉन्च किया गया था, आप restrictionनक्शे के व्यूपोर्ट को सीमित करने के लिए नए विकल्प का उपयोग कर सकते हैं ।

प्रलेखन के अनुसार

MapRestriction इंटरफ़ेस

एक प्रतिबंध जो मानचित्र पर लागू किया जा सकता है। नक्शे का व्यूपोर्ट इन प्रतिबंधों से अधिक नहीं होगा।

स्रोत: https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction

तो, अब आप मानचित्र मानचित्रण के दौरान केवल प्रतिबंध का विकल्प जोड़ते हैं और यह। निम्नलिखित उदाहरण पर एक नज़र डालें जो स्विट्जरलैंड में व्यूपोर्ट को सीमित करता है

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 46.818188, lng: 8.227512},
    minZoom: 7,
    maxZoom: 14,
    zoom: 7,
    restriction: {
      latLngBounds: {
        east: 10.49234,
        north: 47.808455,
        south: 45.81792,
        west: 5.95608
      },
      strictBounds: true
    },
  });
}

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>

स्निपेट का विस्तार करें

आशा है कि ये आपकी मदद करेगा!

— xomena
स्रोत

लिंक काम नहीं कर रहा है। इस विषय पर नए हैं: EXAMPLE: Developers-dot-devsite-v2-prod.appspot.com/maps/documentation/… DOCS: Developers-dot-devsite-v2-prod.appspot.com/maps/documentation/ …

— एडम

1

फिक्स्ड प्रलेखन लिंक।

— xomena

धन्यवाद, काम का यह कोड प्रकार। यही है, यदि आप ज़ूम को माइनज़ूम और मैक्सज़ूम के साथ केवल 1 स्तर तक सीमित करते हैं। ऐसा लगता है कि आपको प्रत्येक ज़ूम स्तर के लिए अलग-अलग दक्षिण, पश्चिम, नॉट, पूर्व निर्धारित करने की आवश्यकता है, जैसा कि इस काम को करना चाहिए। प्रत्येक ज़ूम स्तर के लिए एक अलग प्रतिबंध सेटिंग होना प्यारा होगा। मैं अपने अधिकतम ज़ूम आउट स्तर के लिए गया और वहां से निर्देशांक को परिभाषित किया, इस प्रकार यह संभव है कि यदि आप ज़ूम इन करते हैं और फिर पैन करते हैं तो सीमा से बाहर निकलने के लिए पैन करना संभव है।

— किम स्टीनहॉग

6

ज़ूम को v.3 + पर सीमित करने के लिए। अपने मानचित्र की सेटिंग में डिफ़ॉल्ट ज़ूम स्तर और मिनज़ूम या मैक्सज़ूम (या यदि आवश्यक हो तो दोनों) जोड़ें, ज़ूम स्तर 0 से 19 हैं। यदि सीमा आवश्यक है, तो आपको बहरी ज़ूम ज़ूम स्तर की घोषणा करनी चाहिए। सभी मामले संवेदनशील हैं!

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....

— गहन चाँदी
स्रोत

3

सीमा को सीमित करने के लिए बहुत बेहतर तरीका ... पोस्टर के ऊपर से तर्क शामिल हैं।

var dragStartCenter;

google.maps.event.addListener(map, 'dragstart', function(){
                                       dragStartCenter = map.getCenter();
                                         });

google.maps.event.addListener(this.googleMap, 'dragend', function(){
                            if (mapBounds.contains(map.getCenter())) return;
                    map.setCenter(this.dragStart);
                           });

— थपथपाना
स्रोत

आप दूसरे श्रोता के this.googleMapबजाय क्यों जोड़ते हैं map? भी नहीं dragStartहोना चाहिए dragStartCenter? अन्त में क्या है mapBounds?

— 21

2

निश्चित रूप से वह सब होता है जो उपयोगकर्ता को एक ड्रैग मूवमेंट में दूर तक खींचता है? वे अभी भी बहुत से छोटे ड्रग्स बना सकते हैं और कहीं भी समाप्त हो सकते हैं, नहीं?

— जेम्स

1

इसका उपयोग मानचित्र को किसी विशिष्ट स्थान पर फिर से केन्द्रित करने के लिए किया जा सकता है। जो मुझे चाहिए था।

    var MapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.676263, 13.949096),
    new google.maps.LatLng(36.204391, 14.89038));

    google.maps.event.addListener(GoogleMap, 'dragend', function ()
    {
        if (MapBounds.contains(GoogleMap.getCenter()))
        {
            return;
        }
        else
        {
            GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
        }
    });

— जोनाथन बुसेटिल
स्रोत

1

myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

— अनूप
स्रोत

1

इस सवाल का जवाब नहीं है।

— किट सुंडे

0

यहां देखने योग्य क्षेत्र की सीमा की समस्या को हल करने के लिए मेरा संस्करण है।

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

strictBoundsएक new google.maps.LatLngBounds()प्रकार की वस्तु है । self.gmapGoogle मानचित्र ऑब्जेक्ट ( new google.maps.Map()) संग्रहीत करता है ।

यह वास्तव में काम करता है, लेकिन केवल 0 वीं मेरिडियन और समानताएं पार करने के साथ रक्तस्रावी को ध्यान में रखना मत भूलना, अगर आपकी सीमा उन्हें कवर करती है।

— अलेक्जेंडर पालमार्चुक
स्रोत

स्वीकृत डैनियल वेसलो का एल्गोरिथ्म मेरे लिए ठीक से काम नहीं करता है। यहां इसके कई प्रमुख अंतर हैं।

— अलेक्जेंडर पालमार्चुक

0

किसी कारण के लिए

if (strictBounds.contains(map.getCenter())) return;

मेरे लिए काम नहीं किया (शायद एक दक्षिणी गोलार्द्ध मुद्दा)। मुझे इसे बदलना पड़ा:

    function checkBounds() {
        var c = map.getCenter(),
            x = c.lng(),
            y = c.lat(),
            maxX = strictBounds.getNorthEast().lng(),
            maxY = strictBounds.getNorthEast().lat(),
            minX = strictBounds.getSouthWest().lng(),
            minY = strictBounds.getSouthWest().lat();

        if(x < minX || x > maxX || y < minY || y > maxY) {
            if (x < minX) x = minX;
            if (x > maxX) x = maxX;
            if (y < minY) y = minY;
            if (y > maxY) y = maxY;
            map.setCenter(new google.maps.LatLng(y, x));
        }
    }

आशा है कि यह किसी की मदद करेगा।

— Mayko
स्रोत

0

एक समाधान की तरह है, अगर आप विशिष्ट लैट / लैंग को जानते हैं।

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

यदि विशिष्ट लेट / लैंग नहीं है

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

या

google.maps.event.addListener(map, 'idle', function() {

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});

— jaison
स्रोत

0

2016 के मध्य तक , देखने योग्य क्षेत्र को प्रतिबंधित करने का कोई आधिकारिक तरीका नहीं है। सीमा को सीमित करने के अधिकांश तदर्थ समाधानों में एक दोष है, क्योंकि वे नक्शे के दृश्य को फिट करने के लिए सीमा को प्रतिबंधित नहीं करते हैं, वे केवल इसे प्रतिबंधित करते हैं यदि मानचित्र का केंद्र निर्दिष्ट सीमा से बाहर है। यदि आप मेरी तरह ओवरलेइंग इमेज के लिए सीमा को प्रतिबंधित करना चाहते हैं, तो इसका परिणाम नीचे दिए गए चित्र की तरह हो सकता है, जहां अंडरलेइंग मैप हमारी छवि के नीचे दिखाई दे रहा है:

इस समस्या से निपटने के लिए, मैंने एक पुस्तकालय बनाया है , जो सफलतापूर्वक सीमा को प्रतिबंधित करता है ताकि आप ओवरले से बाहर न निकल सकें।

हालांकि, अन्य मौजूदा समाधानों के रूप में, इसमें "कंपन" मुद्दा है। जब उपयोगकर्ता बाएं माउस बटन को आक्रामक रूप से मैप करता है, तो वे बाईं माउस बटन को छोड़ देते हैं, फिर भी मानचित्र धीरे-धीरे धीमा हो जाता है। मैं हमेशा नक्शे को सीमा में वापस करता हूं, लेकिन इसके परिणामस्वरूप कंपन होता है। यह पैनिंग प्रभाव फिलहाल Js API द्वारा प्रदान किए गए किसी भी माध्यम से नहीं रोका जा सकता है। ऐसा लगता है कि जब तक कि google map.stopPanningAnimation () जैसी किसी चीज़ के लिए समर्थन नहीं जोड़ता है, तब तक हम एक सहज अनुभव नहीं बना पाएंगे।

उल्लेखित पुस्तकालय का उपयोग करके उदाहरण, सबसे आसान सख्त सीमा अनुभव जिसे मैं प्राप्त करने में सक्षम था:

function initialise(){
  
  var myOptions = {
     zoom: 5,
     center: new google.maps.LatLng(0,0),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
  addStrictBoundsImage(map);
}

function addStrictBoundsImage(map){
	var bounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(62.281819, -150.287132),
		new google.maps.LatLng(62.400471, -150.005608));

	var image_src = 'https://developers.google.com/maps/documentation/' +
		'javascript/examples/full/images/talkeetna.png';

	var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<body style="margin:0px; padding:0px;" onload="initialise()">
	 <div id="map" style="height:400px; width:500px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>

स्निपेट का विस्तार करें

लाइब्रेरी स्वचालित रूप से न्यूनतम ज़ूम प्रतिबंध की गणना करने में सक्षम है। यह तब minZoomमानचित्र की विशेषता का उपयोग करके ज़ूम स्तर को प्रतिबंधित करता है ।

उम्मीद है कि यह किसी ऐसे व्यक्ति की मदद करता है जो एक समाधान चाहता है जो दी गई सीमाओं का पूरी तरह से सम्मान करता है और उनमें से बाहर पैनिंग की अनुमति नहीं देना चाहता है।

— मतेज पी।
स्रोत

-4

यह मददगार हो सकता है।

  var myOptions = {
      center: new google.maps.LatLng($lat,$lang),
      zoom: 7,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

ज़ूम स्तर आवश्यकता के अनुसार अनुकूलन योग्य हो सकता है।

— समीर दाश
स्रोत

यह ज़ूम स्तर को एक सीमा तक सीमित करने के बारे में मूल प्रश्न को संबोधित नहीं करता है e.g. only between levels 6 and 9, यह डिफ़ॉल्ट ज़ूम स्तर सेट करता है और डिफ़ॉल्ट यूआई (यानी +/ -) को हटा देता है जो थोड़ा ओवरकिल है।

— एलिस्टेयर