गूगल मैप्स एपीआई 3 - सीमा पैन/नक्शा सीमा

मैं पूरी तरह से गूगल मैप्स के लिए नया हूँ और सिर्फ मेरा पहला नक्शा बनाने रहा हूँ ताकि मैं इसे अपनी वेबसाइट में शामिल कर सकते हैं।गूगल मैप्स एपीआई 3 - सीमा पैन/नक्शा सीमा

मैं उस क्षेत्र को सीमित करने की कोशिश कर रहा हूं जहां उपयोगकर्ता केवल यूके में घूम सकता है और यहां कई पोस्ट देखे हैं कि सभी बहुत समान उत्तर देते हैं, हालांकि मैं कोड को काम करने में सक्षम नहीं हूं मुझे। This solution is the closest that I have got लेकिन जब भी मैं कोशिश करते हैं और नक्शे को स्थानांतरित बिल्कुल यह मेरी सीमा बिंदुओं में से एक पर केंद्रित है और मैं इसे कहीं और स्थानांतरित करने में असमर्थ हूँ।

मैं एक बहुत मूर्खतापूर्ण गलती, जिस स्थिति में मैं माफी माँगता हूँ बना दिया है सकते हैं, लेकिन मैं बाहर काम नहीं कर सकता है कि क्या गलत है। क्या किसी के पास कोई विचार है?

धन्यवाद

मेरे कोड के नीचे (गूगल के नमूना कोड से लिया और फिर जोड़ा) है - बात यह है कि सीमा के लिए प्रासंगिक है, तल के पास है ब्रिटेन के लिए सीमा की स्थापना के साथ शुरू:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Maps</title> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"> 
    </script> 

    <? 
    //code to get long and lat from http://www.webmonkey.com/2010/02/get_started_with_google_geocoding_via_http 
    $apikey = MYKEY; 
    $geourl = "http://maps.google.com/maps/geo?q=LS255AA&output=csv&key=$apikey"; 

    // Create cUrl object to grab XML content using $geourl 
    $c = curl_init(); 
    curl_setopt($c, CURLOPT_URL, $geourl); 
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); 
    $csvContent = trim(curl_exec($c)); 
    curl_close($c); 

    // Split pieces of data by the comma that separates them 
    list($httpcode, $elev, $lat, $long) = split(",", $csvContent); 
    ?> 

    <script type="text/javascript"> 
    var lat = "<?= $lat ?>"; 
    var long = "<?= $long ?>"; 
    </script> 

    <script type="text/javascript"> 
     function initialize() { 
      //sets the long and lat of map 
      var myLatlng = new google.maps.LatLng(lat, long); 

      //options for the map 
      var myOptions = { 
       center: myLatlng, 
       zoom: 9, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      //creates the map 
      var mymap = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 

      //sets min and max zoom values 
      var opt = { minZoom: 7, maxZoom: 11 }; 
       mymap.setOptions(opt); 

      //creates marker 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: mymap, 
       title:"Hello World!" 
      }); 

      //content of infowindow 
      var contentString = '<h2>I am an info window</h2>'+'<p>Hello my name is infowindow, I need more text to test how big I get</p>'; 

      //creates infowindow 
      var infowindow = new google.maps.InfoWindow({ 
        content: contentString, 
      }); 

      //infowindow options 
      infowindow.setOptions({maxWidth:200}); 

      //listens for click and opens infowindow 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(mymap,marker); 
      }); 
      // Bounds for UK 
      var strictBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(60.88770, -0.83496), 
        new google.maps.LatLng(49.90878, -7.69042) 
      ); 

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

       // We're out of bounds - Move the map back within the bounds 
       var c = mymap.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; 

       mymap.setCenter(new google.maps.LatLng(y, x)); 
      }); 
     } 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:50%; height:50%"></div> 

</body> 
</html>

स्रोत

2012-02-01 Lucy Grainger

आप अपने strictBounds को मिलाया है - उनमें से आदेश को बदल और यह ठीक काम करना चाहिए।

एक LatLngBounds पहले दप कोने होना चाहिए, पूर्वोत्तर कोने दूसरा: http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.90878, -7.69042), 
    new google.maps.LatLng(60.88770, -0.83496) 
);

स्रोत

2012-02-01 20:52:51

मैं ने पाया है कि इस विधि अच्छी तरह से काम जब आप माउस के साथ चारों ओर नक्शा ले जाने, हालांकि मैं अभी भी अधिक सीमाओं आ सकता है अगर मैं ज़ूम बटन के ठीक ऊपर नेविगेशन उपकरण का उपयोग करें, वहाँ है इसे रोकने की अवज्ञा? –

अच्छा पकड़ो! आप ईवेंट श्रोता को अपने श्रोता में 'ड्रैगेंड' से' bounds_changed' में बदल सकते हैं। यह व्यूपोर्ट में किसी भी बदलाव की तलाश में है, इसलिए इसमें एनवी नियंत्रणों का उपयोग करके सीमाओं के पीछे ज़ूम आउट करना, खींचना, इत्यादि शामिल हैं। मुझे खुशी है कि आपको यह काम मिल गया है! –

@ माइकजेफरी सख्त बाउंड्स का क्या अर्थ है और आप सिंगापुर मानचित्र के लिए लंबे समय तक कैसे पाते हैं? –

कोड से ऊपर मुझे मदद की, लेकिन मेरी समस्या का समाधान नहीं किया। मुझे मानचित्र पर खींचे गए पॉलीगॉन के आधार पर पैनिंग को अक्षम करने की आवश्यकता थी। मुझे मानचित्र की उस विशेष विंडो पर पैनिंग सीमित करने की आवश्यकता थी। तो उपयोगकर्ता प्रारंभिक मानचित्र से बहुत दूर पैन नहीं है।

function disablePanning(enableBounds) { 
// listen to bound change event once to store the SW and NE corner 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    // only set it once 
    if (enableBounds == null) { 
     enableBounds = map.getBounds(); 
    } 
}); 
var lastValidCenter=null; 
google.maps.event.clearListeners(map,'center_changed'); 
google.maps.event.addListener(map, 'center_changed', function() { 
    if(enableBounds!=null && lastValidCenter==null){ 
     lastValidCenter = enableBounds.getCenter(); 
    } 
    if (enableBounds != null && enableBounds != 'undefined') { 
     var ne = enableBounds.getNorthEast(); 
     var sw = enableBounds.getSouthWest(); 
     var allowedBounds = new google.maps.LatLngBounds(
       new google.maps.LatLng(sw.lat(), sw.lng()), 
       new google.maps.LatLng(ne.lat(), ne.lng())); 

     if (allowedBounds.contains(map.getCenter())) { 
      // still within valid bounds, so save the last valid position 
      lastValidCenter = enableBounds.getCenter(); 
      return; 
     } 

     // not valid anymore => return to last valid position 
     if(lastValidCenter!=null) 
      map.panTo(lastValidCenter); 
    } 
});

}

स्रोत

2015-03-02 22:27:30 Ravi

गूगल मैप्स एपीआई 3 - सीमा पैन/नक्शा सीमा

उत्तर

संबंधित मुद्दे