使用变量在Google Maps API中设置经纬度

Question

我刚开始使用谷歌地图 API 来操控浏览器，但是在将经纬度的变量放置到相应位置时，无法使其正常工作。

我需要根据两个输入元素的值来展示地图。

当使用变量时无法正常工作，但如果将函数中的变量更改为数字，则可以完美运行。

是的，我知道不应该公开我的 API 密钥，但这是我用于测试的临时账户，之后会删除。

function initialize() {
        var userLng = $('#lng').val();
 var userLat = $('#lat').val();
  
 var mapOptions = {
     center: { lat: userLat, lng: userLng },
     zoom: 8
 };
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

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

#map-canvas {
  height: 30em;
  width: 30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>
<form>
  <input type="text" id="lng" name="lng" value="30">
  <input type="text" id="lat" name="lat" value="40">
</form>

<div id="map-canvas"></div>

- Mr.Smithyyy

Answer 1

您正在使用字符串，请尝试使用浮点数：

var userLng = parseFloat($('#lng').val());
var userLat = parseFloat($('#lat').val());
var mapOptions = {
        center: { lat: userLat, lng: userLng },
        zoom: 8
    };

- n00dl3

---

正确答案！这就是问题所在。更快的方法是使用+进行类型转换 - 例如 userLng = +$('#lng').val()。 - Adam Jenkins

Answer 2

你应该对输入的值使用parseFloat()，需要的是数字而不是字符串。

function initialize() {
        var userLng = parseFloat($('#lng').val());
 var userLat = parseFloat($('#lat').val());
  
 var mapOptions = {
     center: { lat: userLat, lng: userLng },
     zoom: 8
 };
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

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

#map-canvas {
  height: 30em;
  width: 30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>
<form>
  <input type="text" id="lng" name="lng" value="30">
  <input type="text" id="lat" name="lat" value="40">
</form>

<div id="map-canvas"></div>

编辑，使用 parseFloat 而不是 parseInt

- Griva

---

纬度和经度不是整数元组。它们是浮点坐标。 - TaoPR

是的，我不小心从我的代码中复制了parseInt，但我立即更改了它。 - Griva