গুগল ম্যাপস ভি 3 - দৃশ্যমান অঞ্চল এবং জুম স্তর সীমাবদ্ধ করুন

Question 1

গুগল ম্যাপ v3 নির্দিষ্ট জায়গায় সীমাবদ্ধ করা কি সম্ভব? আমি কেবলমাত্র কিছু অঞ্চল (উদাহরণস্বরূপ একটি দেশ) প্রদর্শনের অনুমতি দিতে এবং ব্যবহারকারীকে অন্য কোথাও স্লাইড করার অনুমতি দিতে চাই না। এছাড়াও আমি জুম স্তরকে সীমাবদ্ধ করতে চাই - যেমন মাত্র 6 থেকে 9 স্তরের মধ্যে এবং আমি সমস্ত বেস মানচিত্রের ধরণের ব্যবহার করতে চাই।

এটি অর্জন করার কোনও উপায় আছে কি?

স্টাইলডম্যাপ ব্যবহার করে জুম স্তর সীমিত করার ক্ষেত্রে আমার আংশিক সাফল্য ছিল, তবে আমি কেবল রোডম্যাপকে সীমাবদ্ধ করেই সফল হয়েছি, অন্য মৌলিক ধরণের ক্ষেত্রে আমি এইভাবে জুমকে সীমাবদ্ধ করতে সক্ষম হইনি।

কোন সাহায্যের জন্য ধন্যবাদ

Question 2

আপনি 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>

উপরের উদাহরণ থেকে স্ক্রিনশট। ব্যবহারকারী এই ক্ষেত্রে আরও দক্ষিণ বা আরও পূর্ব দিকে টেনে আনতে পারবেন না:

গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই v3 উদাহরণ: মানচিত্রের টানুন বন্ধ করুন Force

Question 3

জুম স্তরকে সীমাবদ্ধ করার আরও ভাল উপায় হতে পারে ইভেন্টগুলিতে প্রতিক্রিয়া জানানোর চেয়ে minZoom/ maxZoomবিকল্পগুলি ব্যবহার করা ?

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

অথবা মানচিত্রের সূচনা করার সময় বিকল্পগুলি নির্দিষ্ট করা যেতে পারে, যেমন:

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

দেখুন: গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই ভি 3 রেফারেন্স

Question 4

ভাল খবর. ১৪ ই ফেব্রুয়ারী, ২০১৮ এ চালু হওয়া মানচিত্র জাভাস্ক্রিপ্ট এপিআইয়ের ৩.৩৩ সংস্করণ থেকে শুরু করে আপনি restrictionমানচিত্রের ভিউপোর্টকে সীমাবদ্ধ করতে নতুন বিকল্প ব্যবহার করতে পারেন ।

ডকুমেন্টেশন অনুযায়ী

মানচিত্রের ইন্টারফেস

মানচিত্রে প্রয়োগ করা যেতে পারে এমন একটি বিধিনিষেধ। মানচিত্রের ভিউপোর্ট এই বিধিনিষেধের বেশি হবে না।

উত্স: https://developers.google.com/maps/docamentation/javascript/references/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>

স্নিপেট প্রসারিত করুন

আশা করি এটা কাজে লাগবে!

Question 5

জুমটি v.3 + এ সীমাবদ্ধ করতে। আপনার মানচিত্র সেটিংয়ে ডিফল্ট জুম স্তর এবং মিনিজুম বা ম্যাক্সজুম (বা উভয় প্রয়োজন হলে) জুম স্তরগুলি 0 থেকে 19 হয় lim সীমাবদ্ধতার প্রয়োজন হলে আপনাকে অবশ্যই বধির জুম স্তর ঘোষণা করতে হবে। সবই কেস সেনসিটিভ!

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

Question 6

পরিসীমা সীমাবদ্ধ করার আরও ভাল উপায় ... উপরের পোস্টার থেকে যুক্তি যুক্ত রয়েছে।

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

Question 7

এটি কোনও নির্দিষ্ট স্থানে মানচিত্রটি পুনরায় কেন্দ্র করতে ব্যবহার করা যেতে পারে। যা আমার প্রয়োজন ছিল।

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

Question 8

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

Question 9

দেখার যোগ্য ক্ষেত্রের সীমাবদ্ধতার সমস্যাটি সমাধান করার জন্য আমার রূপটি এখানে।

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

strictBoundsnew google.maps.LatLngBounds()টাইপ একটি অবজেক্ট । self.gmapএকটি গুগল ম্যাপ অবজেক্ট ( new google.maps.Map()) সংরক্ষণ করে।

এটি সত্যই কাজ করে তবে আপনার সীমানাটি যদি আবদ্ধ থাকে তবে কেবল 0 তম মেরিডিয়ান এবং সমান্তরালগুলি অতিক্রম করে হেমোর্রয়েডগুলিকে বিবেচনা করতে ভুলবেন না।

Question 10

কিছু কারণে

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

আশা করি এটি কারও সাহায্য করবে।

Question 11

একটি সমাধান এর মতো, যদি আপনি নির্দিষ্ট ল্যাট / এলএনজি জানেন।

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

});

Question 12

২০১ 2016 সালের মাঝামাঝি পর্যন্ত দেখা যায় এমন অঞ্চল সীমাবদ্ধ করার কোনও সরকারী উপায় নেই। সীমাবদ্ধতা সীমাবদ্ধ করার জন্য বেশিরভাগ অ্যাডহক সমাধানগুলির একটি ত্রুটি রয়েছে যদিও তারা মানচিত্রের দৃশ্যের সাথে সামঞ্জস্য রাখে না, কেবলমাত্র মানচিত্রের কেন্দ্র নির্দিষ্ট সীমা ছাড়িয়ে গেলেই তারা এটিকে সীমাবদ্ধ করে। যদি আপনি আমার মতো ওভারলেলিং চিত্রের সীমাবদ্ধতা সীমাবদ্ধ রাখতে চান তবে এর ফলে নীচের চিত্রিত মতো আচরণ হতে পারে, যেখানে আমাদের চিত্রের ওভারলেতে আন্ডারলিং মানচিত্রটি দৃশ্যমান:

এই সমস্যাটি মোকাবেলা করার জন্য, আমি একটি লাইব্রেরি তৈরি করেছি , যা সফলভাবে সীমাবদ্ধ করে দেয় যাতে আপনি ওভারলে থেকে প্যান করতে না পারেন।

তবে অন্যান্য বিদ্যমান সমাধান হিসাবে এটিতে একটি "স্পন্দিত" সমস্যা রয়েছে। ব্যবহারকারী যখন মানচিত্রে আক্রমণাত্মকভাবে যথেষ্ট পরিমাণে প্যান করেন, মাউসের বাম বোতামটি ছেড়ে দেওয়ার পরে, মানচিত্রটি ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে চলবে। আমি সর্বদা মানচিত্রটিকে আবার সীমাতে ফিরিয়ে দিই, তবে এর ফলস্বরূপ একপ্রকার স্পন্দিত হয়। এই প্যানিং প্রভাবটি এই মুহূর্তে জেএস এপিআই দ্বারা সরবরাহিত কোনও উপায় দিয়ে থামানো যাবে না। দেখে মনে হচ্ছে যতক্ষণ না গুগল ম্যাপ.স্টপপ্যানিংএনিমেশন () এর মতো কোনও কিছুর জন্য সমর্থন যোগ না করে আমরা কোনও মসৃণ অভিজ্ঞতা তৈরি করতে সক্ষম হব না।

উল্লিখিত গ্রন্থাগারটি ব্যবহার করে উদাহরণ, আমি পেতে সক্ষম হয়েছি এমন অতি দ্রুততম কঠোর সীমাবদ্ধতার অভিজ্ঞতা:

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>

স্নিপেট প্রসারিত করুন

গ্রন্থাগারটি স্বয়ংক্রিয়ভাবে সর্বনিম্ন জুম বাধাও গণনা করতে সক্ষম able এটি তখন ব্যবহার করে জুম স্তরকে সীমাবদ্ধ করেminZoom মানচিত্রের বৈশিষ্ট্য ।

আশা করি এটি এমন কাউকে সহায়তা করে যা এমন সমাধান চায় যা প্রদত্ত সীমানাকে পুরোপুরি সম্মান করে এবং সেগুলি থেকে প্যানিং বেরিয়ে আসতে দেয় না।

Question 13

এটি সহায়ক হতে পারে।

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

জুম স্তরটি প্রয়োজনীয়তা অনুসারে অনুকূলিতকরণযোগ্য হতে পারে।