関数内の変数の値をGoogleマップ関数に渡すにはどうすればよいですか？

-1

こんにちは私は、配列の入力値を使用してマップの中心を設定しようとしていますが、何とか更新されません。 setCenter：関数内の変数の値をGoogleマップ関数に渡すにはどうすればよいですか？

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>test</title> 
     <link rel="stylesheet" href="style.css"> 
     <style> 
      body{ 
       margin: 0; 
} 
      #map { 
       position:absolute; 
       bottom: 0; 
       width: 100%; 
       height: 300px; 
       } 
     </style> 
    </head> 
    <body> 
     <button id="create">Create</button> 

     <button id="view">View</button> 
     <div id="display"></div> 
     <div id="map"></div> 



    </body> 
    <script src="https://maps.googleapis.com/maps/api/js?&callback=inimap"async defer></script> 
    <script src="test.js"></script> 
</html> 

var create = document.getElementById("create"); 
var view = document.getElementById("view"); 
var latDefault = 41; 
var lngDefault = -122; 
var map = null; 


var store_arr = []; 

create.onclick = function(){ 
    var latInput = document.createElement("input"); 
    latInput.placeholder = "Latitude" ; 
    //latInput.value = latDefault; 
    var lngInput = document.createElement("input"); 
    lngInput.placeholder = "Longitude"; 
    //lngInput.value = lngDefault; 
    var pushBut = document.createElement("button"); 
    pushBut.innerHTML= "Store"; 

    display.appendChild(latInput); 
    display.appendChild(lngInput); 
    display.appendChild(pushBut); 

    pushBut.onclick = function(){ 
     var latVal = latInput.value; 
     var lngVal = lngInput.value; 
     var profileObj = { 
      Latitude: latVal, 
      Longitude:lngVal 
     }; 

     store_arr.push(profileObj); 

    } 
} 

view.onclick = function(){ 
    var displayB = document.createElement("div"); 
    document.body.appendChild(displayB); 
    displayB.innerHTML=""; 
    for (var i = 0; i<store_arr.length; i++){ 
     var infos = document.createElement("div"); 
     infos.innerHTML = " Latitude: " + store_arr[i].Latitude + "; Longitude: " + store_arr[i].Longitude; 
     displayB.appendChild(infos); 

     latDefault = store_arr[i].Latitude; 
     lngDefault = store_arr[i].Longitude; 

    } 

} 


function inimap(){ 

    map = new google.maps.Map(
     document.getElementById("map"), 
     { 
      center: {lat:latDefault, lng:lngDefault}, 
      zoom:5 
     } 
    ); 

}

出典

2016-10-11 Derek Fu

あなたは緯度から "緯度" と "LNG"（センターへのLNGにJSONキーを変更しようとしたことがあり：latDefault、 "lng"：lngDefault}）？ – Fabricio

あなたがエラー」InvalidValueErrorを取得している私は、ビューの内部のマップ関数を呼び出した場合のonclickそれは「：setCenter：ない緯度経度やLatLngLiteral：プロパティ緯度ではない数InvalidValueErrorが」することを示している機能：

var latVal = latInput.value; // this is a string 
    var lngVal = lngInput.value; // so is this 
    var profileObj = { 
    Latitude: latVal, 
    Longitude: lngVal 
    }; 
    store_arr.push(profileObj); 

// snip 

latDefault = store_arr[i].Latitude; 
lngDefault = store_arr[i].Longitude;

のいずれか、数値に変換し、それらにparseFloatを呼び出すか、数値を実行するには：緯度経度やLatLngLiteralない：プロパティ緯度で：latDefaultとlngDefaultの値は、文字列ではなく、数字でない数」であるため、それらの操作。

latDefault = parseFloat(store_arr[i].Latitude); 
lngDefault = parseFloat(store_arr[i].Longitude);

コードスニペット：{ "LAT"：

body { 
 
    margin: 0; 
 
} 
 
#map { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 300px; 
 
}

<button id="create">Create</button> 
 

 
<button id="view">View</button> 
 
<div id="display"></div> 
 
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?&callback=inimap" async defer></script> 
 
<script> 
 
    var create = document.getElementById("create"); 
 
    var view = document.getElementById("view"); 
 
    var latDefault = 41; 
 
    var lngDefault = -122; 
 
    var map = null; 
 

 

 
    var store_arr = []; 
 

 
    create.onclick = function() { 
 
    var latInput = document.createElement("input"); 
 
    latInput.placeholder = "Latitude"; 
 
    //latInput.value = latDefault; 
 
    var lngInput = document.createElement("input"); 
 
    lngInput.placeholder = "Longitude"; 
 
    //lngInput.value = lngDefault; 
 
    var pushBut = document.createElement("button"); 
 
    pushBut.innerHTML = "Store"; 
 

 
    display.appendChild(latInput); 
 
    display.appendChild(lngInput); 
 
    display.appendChild(pushBut); 
 

 
    pushBut.onclick = function() { 
 
     var latVal = latInput.value; 
 
     var lngVal = lngInput.value; 
 
     var profileObj = { 
 
     Latitude: latVal, 
 
     Longitude: lngVal 
 
     }; 
 
     store_arr.push(profileObj); 
 
    } 
 
    } 
 
    view.onclick = function() { 
 
    var displayB = document.createElement("div"); 
 
    document.body.appendChild(displayB); 
 
    displayB.innerHTML = ""; 
 
    for (var i = 0; i < store_arr.length; i++) { 
 
     var infos = document.createElement("div"); 
 
     infos.innerHTML = " Latitude: " + store_arr[i].Latitude + "; Longitude: " + store_arr[i].Longitude; 
 
     displayB.appendChild(infos); 
 

 
     latDefault = parseFloat(store_arr[i].Latitude); 
 
     lngDefault = parseFloat(store_arr[i].Longitude); 
 
    } 
 
    inimap(); 
 
    } 
 

 
    function inimap() { 
 
    map = new google.maps.Map(
 
     document.getElementById("map"), { 
 
     center: { 
 
      lat: latDefault, 
 
      lng: lngDefault 
 
     }, 
 
     zoom: 5 
 
     } 
 
    ); 
 
    } 
 
</script>

出典

2016-10-11 01:21:28 geocodezip

うわー、ありがとう！あなたはまったく正しい！ –

関数内の変数の値をGoogleマップ関数に渡すにはどうすればよいですか？

答えて

関連する問題