javascript - 使用 google maps api 的经度和纬度变量

Question

我刚开始在浏览器上使用 google maps API，但当我将变量放在经度/纬度位置而不是直接将数字放置时，我似乎无法让它工作。

我需要映射从两个输入元素的值填充。

它不适用于变量，但如果您将函数中的变量更改为数字，它会完美地工作。

是的，我知道我不应该发布我的 API key ，但这是我在非帐户上用于测试的 key ，我最终会删除它。

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>

Answer 1

您正在使用字符串，请尝试使用 float :

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