使用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> 

Answer 1

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

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

Answer 2

你把parseFloat（）你的输入值shuld，你需要数字而不是字符串。

 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