使用google maps API，我們如何使用map.setCenter函數將當前位置設置爲默認設置位置？

我正在使用Google Maps API編寫JavaScript代碼。使用google maps API，我們如何使用map.setCenter函數將當前位置設置爲默認設置位置？

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

上述代碼將地圖畫布的默認位置設置爲Palo Alto。

我們如何編寫腳本以使setCenter功能自動指向客戶端的當前位置？

來源

2010-05-17 HVS

地理位置API是顯而易見的答案。但是，即使API可用，瀏覽器端也可能需要一段時間才能獲得定位。同時，您必須向用戶顯示一些臨時位置，然後在位置固定後移動地圖。這聽起來像是一個GUI挑戰，讓它感覺不錯。如果大概位置可以接受，我喜歡Daniel Vassallo的解決方案。在加載地圖後移動地圖讓我感到疑惑。 – 2010-05-18 21:04:03

-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 2010-05-17 17:22:38

哦，我看到...因爲你需要地理定位功能...開始閱讀此：http://www.mozilla.com/en/firefox/geolocation/ – nex 2010-05-17 17:31:08

您可以在支持它的瀏覽器中使用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 2010-05-17 20:14:46

@npdoty可能HTML5品牌不符合規格在這裏是相關的。 – Ross 2011-09-15 12:41:46

請注意，map.setCenter將不再接受縮放級別。如果您想要更改縮放級別，請使用map.setZoom。 – superluminary 2012-05-04 17:44:40

我可以想到兩種可能的選擇。

首先，您可能需要考慮使用GeoLocation API作爲ceejayoz suggested。這很容易實現，它是一個完全客戶端解決方案。要使用地理位置地圖中心，只需使用：

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

...的success()回調地理位置的getCurrentPosition()方法裏面。

不幸的是，只有少數幾個現代瀏覽器支持GeoLocation API。因此，您還可以考慮使用服務器端解決方案，使用MaxMind's GeoLite City等服務將客戶端的IP地址解析到用戶的位置。然後，您可以使用Google Maps API在瀏覽器內簡單地對用戶的城市和國家/地區進行地理編碼。下面可能是一個簡單的例子：

<!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()));線的刪除標記。已經存在於谷歌的API

來源

2010-05-17 18:33:36

重點：從IP地理定位。 – ceejayoz 2010-05-17 18:49:20

感謝您的解釋。我從來沒有想到，通常使用的客戶端組件（HTML5之前）沒有完全集成的地理定位支持。 – HVS 2010-05-17 20:52:19

：

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

嘗試這個兄弟：我用lat和lng把印度尼西亞集中起來。

$(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

使用google maps API，我們如何使用map.setCenter函數將當前位置設置爲默認設置位置？

回答

相關問題