使用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函数将当前位置设置为默认设置位置？

回答

相关问题