Question

当我尝试更改位置时，我遇到了问题。我已连接到地图

var mapOptions = {
   zoom: 7,
   center: new google.maps.LatLng(48.379433, 31.165579999999977),
   mapTypeControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

现在我需要在地图上更改位置

<select onChange="changeCity()" id="city"><option value="50.4501, 30.523400000000038">Київ</option><option value="49.839683, 24.029717000000005">Львів</option></select>

为此我正在使用：

function changeCity() {
   var city = document.getElementById('city').value;
   var city_1 = new google.maps.LatLng(city);
   map.setCenter(city_1);
}

但没有任何反应（我看到灰色区域）。请帮忙......！

Answer 1

问题在于

somefunction("xx.xxxxxxx, xx.xxxxxxx");

不等于

somefunction(xx.xxxxxxx, xx.xxxxxxx);

option代码中的值被指定为单个字符串 实例，例如基辅的"50.4501, 30.523400000000038"。注意双引号。

new LatLng()构造函数会指望两个数字值。因此，您必须将值字符串解析为单独的纬度和经度值，并将它们传递给new LatLng()构造函数：

function changeCity() {

    var cityString = document.getElementById('city').value;
    //value string is split into two parts by the ',' character
    var arrayOfValues = cityString.split(','); 
    //parse latitude string part to a floating point value (first part)
    var lat = parseFloat(arrayOfValues[0]);
    //parse longitude string part to a floating point value (second part)
    var lon = parseFloat(arrayOfValues[1]);
    //create new LatLng instance with correct values
    var city_1 = new google.maps.LatLng(lat, lon);
    map.setCenter(city_1);
}

参考：

Google Maps API docs: LatLng

Answer 2

我可以确认，如果每个数字都作为字符串传递，则会出现“图像损坏或截断”错误（因此DOM提取字符串需要parseFloat）。

在更改Google地图位置时遇到问题

2 个答案: