2016-06-15 14 views
-1

私が取り組んでいるアンケートでは、あなたの場所を地図にしてその特定の場所に地図を集中させるこの地図を持っています。 jqueryを使用して、地図がどこにあるかに関わらず、投票フィールドを埋めるために経度と緯度の両方を取得します。Google Mapsの地図中心からの動的逆ジオコーディング?

私が知りたいのは、アドレスを第3のポールフィールドとして追加する方法と、マップセンターが変更されたときに動的に取得する座標と同じです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Geolocation Flecker</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
     html, body, #map-canvas { 
 
     height: 100%; 
 
     width: 100%; 
 
     margin: 0px;   
 
     padding: 0px 
 
     } 
 
#map-canvas { 
 
    position: relative; 
 
} 
 

 
#map-canvas:after { 
 
    width: 66px; 
 
    height: 66px; 
 
    display: block; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    margin: -66px 0 0 -44px; 
 
    background: url('https://storage.googleapis.com/operations_poligone/iconos/Stick01.png'); 
 
    background-size: 88px 66px; 
 
    pointer-events: none; 
 
} 
 
     
 
    </style> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?V=3.exp&key=AIzaSyDgwY_XXwSE2v-ZCWziaJ6qjuTuiBJck9A 
 
&libraries=visualization&libraries=places"></script> 
 

 
     <script 
 
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 

 
    <script> 
 
     
 
var map; 
 

 
function initialize() { 
 

 
var mapOptions = { 
 
        zoom: 11, 
 
        scrollwheel: true, 
 
        panControl: true, 
 
        zoomControl: true, 
 
        scaleControl: false, 
 
        disableDefaultUI: true, 
 
        center: new google.maps.LatLng(19.038235, -98.219530), 
 
        mapTypeControlOptions: { 
 
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
 
        } 
 
    }; 
 
    
 
map = new google.maps.Map(document.getElementById('map-canvas'), 
 
     mapOptions); 
 
    
 
    
 
     //Retrive the center location 
 
     google.maps.event.addListener(map, "center_changed", function() { 
 
     var lat = map.getCenter().lat(); 
 
     var lng = map.getCenter().lng(); 
 
     $('#lat').val(lat); 
 
     $('#lng').val(lng); 
 
     }); 
 
    
 
    
 
    // Try HTML5 geolocation 
 
    if(navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var pos = new google.maps.LatLng(position.coords.latitude, 
 
             position.coords.longitude); 
 
    document.getElementById('lat').value = position.coords.latitude; 
 
    document.getElementById('lng').value = position.coords.longitude; 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: pos, 
 
     title: 'Ubicación GPS', 
 
    icon:'https://storage.googleapis.com/operations_poligone/iconos/GPS_P06.png', 
 
     animation: google.maps.Animation.BOUNCE 
 
     }); 
 

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

 
function handleNoGeolocation(errorFlag) { 
 
    if (errorFlag) { 
 
    var content = 'Turn GPS on'; 
 
    } else { 
 
    var content = 'Try with your fingers'; 
 
    } 
 

 
    var options = { 
 
    map: map, 
 
    position: new google.maps.LatLng(19.038235, -98.219530), 
 
    content: content, 
 
    pixelOffset: new google.maps.Size(0,-30) 
 
    }; 
 

 
    var infowindow = new google.maps.InfoWindow(options); 
 
    map.setCenter(options.position); 
 
     
 
}  
 

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

 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="map-canvas"></div> 
 
     <input id="lat"/> 
 
     <input id="lng"/> 
 
     <input id="add"/> 
 
    </body> 
 
</html>

答えて

0

追加:あなたは私の作業マップを見ることができます。ここ How to get the formatted address from a dragged marker in Google Version Maps

:私は、彼らがドラッグマーカーから動的にアドレスを取得この記事では似たような、見てきましたgeocodePositionの機能をthe linked questionから変更して、<input>を更新してください。 "center_changed"関数で呼び出します。

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     $('#add').val(responses[0].formatted_address); 
    } else { 
     $('#add').val('Cannot determine address at this location.'); 
    } 
    }); 
} 

//Retrive the center location 
google.maps.event.addListener(map, "center_changed", function() { 
    var lat = map.getCenter().lat(); 
    var lng = map.getCenter().lng(); 
    $('#lat').val(lat); 
    $('#lng').val(lng); 
    geocodePosition(map.getCenter()) 
}); 

var map; 
 
var geocoder; 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var mapOptions = { 
 
    zoom: 11, 
 
    scrollwheel: true, 
 
    panControl: true, 
 
    zoomControl: true, 
 
    scaleControl: false, 
 
    disableDefaultUI: true, 
 
    center: new google.maps.LatLng(19.038235, -98.219530), 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
 
    } 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 

 
    //Retrive the center location 
 
    google.maps.event.addListener(map, "center_changed", function() { 
 
    var lat = map.getCenter().lat(); 
 
    var lng = map.getCenter().lng(); 
 
    $('#lat').val(lat); 
 
    $('#lng').val(lng); 
 
    geocodePosition(map.getCenter()) 
 
    }); 
 

 

 
    // Try HTML5 geolocation 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var pos = new google.maps.LatLng(position.coords.latitude, 
 
     position.coords.longitude); 
 
     document.getElementById('lat').value = position.coords.latitude; 
 
     document.getElementById('lng').value = position.coords.longitude; 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: pos, 
 
     title: 'Ubicación GPS', 
 
     icon: 'https://storage.googleapis.com/operations_poligone/iconos/GPS_P06.png', 
 
     animation: google.maps.Animation.BOUNCE 
 
     }); 
 

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

 
function handleNoGeolocation(errorFlag) { 
 
    if (errorFlag) { 
 
    var content = 'Turn GPS on'; 
 
    } else { 
 
    var content = 'Try with your fingers'; 
 
    } 
 

 
    var options = { 
 
    map: map, 
 
    position: new google.maps.LatLng(19.038235, -98.219530), 
 
    content: content, 
 
    pixelOffset: new google.maps.Size(0, -30) 
 
    }; 
 

 
    var infowindow = new google.maps.InfoWindow(options); 
 
    map.setCenter(options.position); 
 

 
} 
 

 
function geocodePosition(pos) { 
 
    geocoder.geocode({ 
 
    latLng: pos 
 
    }, function(responses) { 
 
    if (responses && responses.length > 0) { 
 
     $('#add').val(responses[0].formatted_address); 
 
    } else { 
 
     $('#add').val('Cannot determine address at this location.'); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map-canvas { 
 
    position: relative; 
 
} 
 
#map-canvas:after { 
 
    width: 66px; 
 
    height: 66px; 
 
    display: block; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -66px 0 0 -44px; 
 
    background: url('https://storage.googleapis.com/operations_poligone/iconos/Stick01.png'); 
 
    background-size: 88px 66px; 
 
    pointer-events: none; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="map-canvas"></div> 
 
<input id="lat" /> 
 
<input id="lng" /> 
 
<input id="add" />

+0

マップ(パン)を移動倍の大半アドレス入力はアドレス_を決定_cannot言うとき、それは正常に動作しますが、私は不足している何かがあると思い、私は必要です**更新命令**は参考例のように?これは次のようなものです: 'google.maps.event.addListener(marker、 'dragend'、function(){ updateMarkerStatus(ドラッグ終了)); geocodePosition(marker.getPosition()); });' @geocodezip –

+0

逆ジオコーダーが結果を見つけることができない場合、それはその例のコードの結果です。私が見た場所のほとんどは公園の中ほどでした(私はそれを見て驚いていませんでした)。 – geocodezip

関連する問題