Google मानचित्र API का उपयोग करके, हम map.setCenter फ़ंक्शन का उपयोग करके वर्तमान स्थान को डिफ़ॉल्ट सेट स्थान के रूप में कैसे सेट कर सकते हैं?

मैं Google मानचित्र API का उपयोग कर जावास्क्रिप्ट कोड लिख रहा हूं।Google मानचित्र API का उपयोग करके, हम map.setCenter फ़ंक्शन का उपयोग करके वर्तमान स्थान को डिफ़ॉल्ट सेट स्थान के रूप में कैसे सेट कर सकते हैं?

map = new google.maps.Map2(document.getElementById("map_canvas")); 
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

ऊपर कोड नक्शा कैनवास पालो अल्टो के डिफ़ॉल्ट स्थान सेट करता है।

हम स्क्रिप्ट को इस तरह से कैसे लिख सकते हैं कि setCenter फ़ंक्शन क्लाइंट के वर्तमान स्थान पर स्वचालित रूप से इंगित करता है?

स्रोत

2010-05-17 HVS

भौगोलिक-स्थान API स्पष्ट जवाब है। हालांकि, अगर एपीआई उपलब्ध है, तो स्थान तय करने के लिए ब्राउज़र पक्ष पर कुछ समय लग सकता है। इस बीच आपको उपयोगकर्ता को कुछ अस्थायी स्थान दिखाना होगा और फिर स्थान तय होने के बाद मानचित्र को स्थानांतरित करना होगा। यह सही महसूस करने के लिए एक जीयूआई चुनौती की तरह लगता है। यदि मुझे अनुमानित स्थान स्वीकार्य है तो मुझे डैनियल वासलो के समाधान पसंद हैं। लोड होने के बाद मानचित्र को स्थानांतरित करना मेरे लिए संदिग्ध लगता है। –

-1

map = new google.maps.Map2(document.getElementById("map_canvas")); 
pos = new google.maps.LatLng(37.4419, -122.1419); 
map.setCenter(pos, 13); 
map.panTo(pos);

स्रोत

2010-05-17 17:17:36 nex

ऊपर कोड स्थान Palo Alto के रूप में सेट के साथ नक्शा लोड करता है। मेरा वास्तविक सवाल यह था कि, हम ग्राहक के वर्तमान स्थान पर स्वचालित रूप से स्थान कैसे सेट कर सकते हैं। – HVS

ओह मैं ... देखते हैं उसके लिए आपको भौगोलिक स्थान सुविधाएं आवश्यकता होगी ... इस पढ़ना शुरू: http://www.mozilla.com/en/firefox/geolocation/ – nex

आप इसका समर्थन करने वाले ब्राउज़र में HTML5 GeoLocation API का उपयोग कर सकते हैं।

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success, error); 
} else { 
    alert('geolocation not supported'); 
} 

function success(position) { 
    alert(position.coords.latitude + ', ' + position.coords.longitude); 
} 

function error(msg) { 
    alert('error: ' + msg); 
}

स्रोत

2010-05-17 17:32:22 ceejayoz

http://isgeolocationpartofhtml5.com/ – npdoty

@npdoty संभव एचटीएमएल 5 ब्रांड नहीं है यह कल्पना प्रासंगिक है। – Ross

ध्यान दें कि map.setCenter अब एक ज़ूम स्तर को स्वीकार करेंगे। यदि आप ज़ूम स्तर भी बदलना चाहते हैं, तो map.setZoom का उपयोग करें। – superluminary

मैं दो संभावित विकल्पों के बारे में सोच सकता हूं।

सबसे पहले आप GeoLocation API ceejayoz suggested के रूप में उपयोग करने पर विचार करना चाहेंगे। इसे कार्यान्वित करना बहुत आसान है, और यह पूरी तरह क्लाइंट-साइड समाधान है। नक्शे को केंद्र में भौगोलिक-स्थान का उपयोग कर, बस का उपयोग करें:

map.setCenter(new google.maps.LatLng(position.coords.latitude, 
            position.coords.longitude), 13);

... जियोलोकेशन के getCurrentPosition() विधि के success() कॉलबैक अंदर।

दुर्भाग्य से केवल कुछ आधुनिक ब्राउज़र ही भू-स्थान API का समर्थन कर रहे हैं। इसलिए आप MaxMind's GeoLite City जैसी सेवा का उपयोग कर क्लाइंट के आईपी पते को हल करने के लिए सर्वर-साइड समाधान का उपयोग करने पर भी विचार कर सकते हैं। फिर आप Google मानचित्र API का उपयोग कर ब्राउज़र के अंदर उपयोगकर्ता के शहर और देश को बस geocode कर सकते हैं।

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
    </head> 
    <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK'; 

    if (GBrowserIsCompatible()) { 
     var geocoder = new GClientGeocoder(); 
     geocoder.getLocations(userLocation, function (locations) {   
      if (locations.Placemark) { 
      var north = locations.Placemark[0].ExtendedData.LatLonBox.north; 
      var south = locations.Placemark[0].ExtendedData.LatLonBox.south; 
      var east = locations.Placemark[0].ExtendedData.LatLonBox.east; 
      var west = locations.Placemark[0].ExtendedData.LatLonBox.west; 

      var bounds = new GLatLngBounds(new GLatLng(south, west), 
              new GLatLng(north, east)); 

      var map = new GMap2(document.getElementById("map_canvas")); 

      map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
      map.addOverlay(new GMarker(bounds.getCenter())); 
      } 
     }); 
    } 
    </script> 
    </body> 
</html>

सीधे शब्दों में सर्वर साइड का समाधान पते के साथ userLocation = 'London, UK' बदल देते हैं: निम्नलिखित एक संक्षिप्त उदाहरण हो सकता है।

Render google map in based on selected location

आप द्वारा map.addOverlay(new GMarker(bounds.getCenter())); लाइन से छुटकारा पाने के मार्कर निकाल सकते हैं: निम्नलिखित ऊपर के उदाहरण से एक स्क्रीनशॉट है।

स्रोत

2010-05-17 18:33:36

अच्छा बिंदु पुन: आईपी से geolocating। स्पष्टीकरण के लिए – ceejayoz

धन्यवाद। यह मेरे लिए कभी नहीं हुआ कि क्लाइंट साइड घटक जो आमतौर पर उपयोग किए जाते हैं (पूर्व HTML5) में पूरी तरह से भौगोलिक स्थान समर्थन एकीकृत नहीं होता है। – HVS

कि पहले से ही Google API में मौजूद है:

if (GBrowserIsCompatible()) 
{ 
    var map = new google.maps.Map2(document.getElementById("mapdiv")); 

    if (google.loader.ClientLocation) 
    {   
     var center = new google.maps.LatLng(
      google.loader.ClientLocation.latitude, 
      google.loader.ClientLocation.longitude 
     ); 
     var zoom = 8; 

     map.setCenter(center, zoom); 
    } 
}

एक ही सवाल के साथ कई सूत्र हैं ...

स्रोत

2011-02-07 18:33:55 Txugo

@ ceejayoz के जवाब का एक अद्यतन संस्करण:

if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success, error); 
    } else { 
     alert('geolocation not supported'); 
    } 
    function error(msg) { 
     alert('error: ' + msg); 
    } 
    function success(position) { 

     var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     var mapOptions = { 
      zoom: 12, 
      center: myLatlng, 
      scaleControl: false, 
      draggable: false, 
      scrollwheel: false, 
      navigationControl: false, 
      mapTypeControl: false 
     } 


     map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions); 
     marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'Main map', 
      icon: iconBase + 'arrow.png' 
     }); 
    }

स्रोत

2015-01-09 15:12:18 user1012181

-1

कोशिश यह भाई: मैंने लैट और एलएनजी का उपयोग कर इंडोनेशिया केंद्रित किया।

$(document).ready(function() { 
 
    var mapOptions = { 
 
     zoom: 4, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    
 
    var center = new google.maps.LatLng(-2.548926, 118.0148634); 
 
    map.setCenter(center,4); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
 

 
<div id="map" style="width:600px; height:450px"></div>

स्रोत

2015-01-09 16:34:33

उत्तर

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