Question

我刚刚开始在浏览器中使用google maps 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>

Answer 1

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

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

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>

编辑，sr parseFloat不是parseInt

使用google maps api为经度和纬度使用变量

2 个答案: