Question

您好我尝试使用数组中的输入值设置地图的中心，但不知怎的，它不会更新。如果我在视图onclick函数中调用map函数，它会显示＆＃34; InvalidValueError：setCenter：不是LatLng或LatLngLiteral：在属性lat中：不是数字＆＃34;

<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
        }
    );

}

Answer 1

您收到错误“InvalidValueError：setCenter：not LatLng或LatLngLiteral：in property lat：not a number”，因为latDefault和lngDefault中的值是字符串，而不是数字：

  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或对它们执行数字操作。

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

代码段

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>

如何将函数内的变量值传递给谷歌地图功能？

1 个答案: