Googleマップapi get latとlngを動的に

私のコードを実行すると、マップは表示されません。私は自分のlocalhostに取り組んでいます。私は入力にlatとlngを入れたいと思っています。次に、latとlngを変更すると、入力は動的に変化します。どうすればこの問題を解決できますか？Googleマップapi get latとlngを動的に

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="googleMap" style="width:500px;height:500px;"></div> 
Lat: <input type="text" id="lat"><br> 
Lng: <input type="text" id="lng"> 
<script type="text/javascript"> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(41,28); 
    var myOptions = { 
     zoom: 15, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addMarker(myLatlng, 'Default Marker', map); 
    map.addListener('click',function(event) { 
     addMarker(event.latLng, 'Click Generated Marker', map); 
    ); 
}} 
function addMarker(latlng,title,map) { 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: title, 
      draggable:true 
    }); 
    marker.addListener('drag',function(event) { 
     $('#lat').val() = event.latLng.lat(); 
     $('#lng').val() = event.latLng.lng(); 
    }); 
    marker.addListener('dragend',function(event) { 
     $('#lat').val() = event.latLng.lat(); 
     $('#lng').val() = event.latLng.lng(); 
    });} 
</script> 
</body></html>

出典

2016-04-28 Fatih Doğan

問題をより詳しく説明してください。地図は表示されませんか？入力は更新されませんか？何が問題ですか？あなたのjavascriptコンソールのエラー？ – MrUpsidown

あなたのコード内のいくつかのバグを持っている...あなたは initialize()関数を呼び出すされていません。この更新されたコード
ここ

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="googleMap" style="width:500px;height:500px;"></div> 
Lat: <input type="text" id="lat"><br> 
Lng: <input type="text" id="lng"> 
<script type="text/javascript"> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(41,28); 
    var myOptions = { 
     zoom: 15, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addMarker(myLatlng, 'Default Marker', map); 
    map.addListener('click',function(event) { 
     addMarker(event.latLng, 'Click Generated Marker', map); 
    }); 
} 
function addMarker(latlng,title,map) { 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: title, 
      draggable:true 
    }); 
    marker.addListener('drag',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 
    }); 
    marker.addListener('dragend',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 
    }); 
} 
initialize(); 
</script> 
</body></html>

出典

2016-04-29 07:26:10 sarath

助けてくれてありがとう。その働き。 –

ようこそ........ :) – sarath

また別の質問があります。選択した座標をどのように保存できますか？たとえば、マーカーを座標に移動します。私は配列またはdivに保存したい。 ━私は訪問史をしたい。 –

は、私が選択された座標を保存することができます試してみてください。誰かを助けるかもしれない。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="googleMap" style="width:500px;height:500px;"></div> 
Lat: <input type="text" id="lat"><br> 
Lng: <input type="text" id="lng"> 
<p id="results">result</p> 
<script type="text/javascript"> 

function initialize() { 
    var myLatlng = new google.maps.LatLng(41.015137,28.979530); 
    var myOptions = { 
     zoom: 10, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addMarker(myLatlng, 'Default Marker', map); 
    map.addListener('click',function(event) { 
     addMarker(event.latLng, 'Click Generated Marker', map); 
    }); 
} 
function addMarker(latlng,title,map) { 
    var coords = []; 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: title, 
      draggable:true 
    }); 
    marker.addListener('drag',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 

    }); 
    marker.addListener('dragend',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 
     coords.push(event.latLng.lat()); 
     coords.push(event.latLng.lng()); 
     $("#results").append('<div>'+JSON.stringify(coords)+'</div>'); 
     coords = []; 
    }); 
} 
initialize(); 
</script> 
</body></html>

出典

2016-04-29 08:26:00

Googleマップapi get latとlngを動的に

答えて

関連する問題