如何获取并设置Google地图的地理位置？

我想创建一个简单的网站，显示了基于您的ADRESS您的磁悬浮（通过你的IP找到）或输入的地址解析。

如果我坚持：

我使用http://ipinfo.io/跟踪用户的地理位置通过IP。它以response.loc的形式返回地理位置（如下面的代码所示）。

然后我想添加该地理位置谷歌地图，并已作为默认值。

var geocoder; 
 
var map; 
 
var infowindow = new google.maps.InfoWindow(); 
 
var marker; 
 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var latlng = new google.maps.LatLng(59.6162,16.5528); 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: latlng, 
 
    mapTypeId: 'hybrid' 
 
    } 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
} 
 

 
function codeLatLng() { 
 
    var input = document.getElementById('latlng').value; 
 
    var latlngStr = input.split(',', 2); 
 
    var lat = parseFloat(latlngStr[0]); 
 
    var lng = parseFloat(latlngStr[1]); 
 
    var latlng = new google.maps.LatLng(lat, lng); 
 
    geocoder.geocode({'latLng': latlng}, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[1]) { 
 
     map.setZoom(15); 
 
     marker = new google.maps.Marker({ 
 
      position: latlng, 
 
      map: map 
 

 
     }); 
 
     infowindow.setContent(results[1].formatted_address); 
 
     infowindow.open(map, marker); 
 
     } else { 
 
     alert('No results found'); 
 
     } 
 
    } else { 
 
     alert('Geocoder failed due to: ' + status); 
 
    } 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
// get geocode from IP // 
 

 
$.get("http://ipinfo.io", function (response) { 
 
    $("#ip").html("Your IP: " + response.ip); 
 
    $("#address").html("Location: " + response.city + ", " + response.region); 
 
    $("#details").html("Location: " + response.loc); 
 
}, "jsonp");

 html, body { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     } 
 
     #panel { 
 
     position: relative; 
 
     top: 5px; 
 
     left: 50%; 
 
     margin-left: -180px; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     width: 350px; 
 
     } 
 
     #latlng { 
 
     width: 225px; 
 
     } 
 
     #map-canvas { 
 
     height: 50%; 
 
     width: 50%; 
 
     margin-left: 25%; 
 
     margin-top: 5%; 
 
     } 
 

 
.cont { 
 
    width: 100%; 
 
    max-height: 500px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: #f8f8f8; 
 
    z-index:-10; 
 
    padding-bottom: 5%; 
 
} 
 

 
h3 { 
 
    color: black; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Find out your elevation</title> 
 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
    <script type="text/javascript" src="js/scripts.js"></script> 
 
    </head> 
 
    <body> 
 
    
 
    <div class="cont"> 
 

 
    <div><h3>Find out what your elevation is!</h3></div> 
 
    <hr> 
 
<div id="ip"></div> 
 
<div id="address"></div> 
 
<hr/>Geo location: <pre id="details"></pre> 
 

 

 

 
    
 
    </div> 
 
    <p align="center">Try a different geolocation:</p> 
 
    <div id="panel"> 
 
     <input id="latlng" type="text" value="59.3323050,18.0528360"> 
 
     <input type="button" value="use geocode" onclick="codeLatLng()"> 
 
    </div> 
 
    
 
    <div id="map-canvas"></div> 
 

 
    </body> 
 
</html>

来源

2015-04-30 Hevar

您使用http://ipinfo.io，但我觉得这是google geolocation功能，根据纬度和经度，找到用户的位置，那么，你只需要把这个位置，您的地图！

navigator.geolocation.getCurrentPosition(function(position) { 
     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); // get the position based on the latitude and the longitude 

      var infowindow = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, // set the position of the google map 
       content: 'Location found using HTML5.' 
      }); 

      map.setCenter(pos); 
     }, function() { 
      handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 
}

来源

2015-04-30 06:19:22

如何获取并设置Google地图的地理位置？

回答

相关问题