javascript - 在 Google map 中推送新的 LatLng

Question

我试图插入一个数组，其中我有来自用户输入(文本字段)的一些标记的所有 latlng 坐标，但我遇到了一些麻烦，因为新数据没有被插入数组。有谁知道我做错了什么？

这是我的代码:

var locations = [
new google.maps.LatLng(0.0,0.0),
];

var map;
function initialize() 
{
var myLatlng = new google.maps.LatLng(0.0,0.0);
var myOptions = 
{
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: locations[i],
        map: map
      });
    }
}

function add_item(){
var item = document.frm.inputbox.value;
locations.push(item);
document.frm.outputbox.value = locations;
}

在正文中我有 map div 和两个输入框:

<div id="map_canvas" style="width:750; height:500"></div>

<form name="frm">
Input<input type="text" name="inputbox" value=""/>
Output<input type="text" name="outputbox" value=""/>
<input type="button" onClick="add_item(); initialize();" value="Push"/>

函数 add_item 没有像我希望的那样工作。add_item 的结果是一个包含“(0.0,0.0),NEWITEM”的数组，因此它从中删除了“new google.maps.LatLng”位置变量值。问题是我真的需要新的 google.maps.LatLng 部分，所以我需要将新项目添加为方括号 [] 内的新行...但是我没有想法...

Answer 1

这里有一些错误

1. 您的 locations 数组在本地范围内以初始化函数

2. 在将初始位置添加到数组后出现杂散逗号

3. 您的第一个点存储为 google LatLng 对象，但您的 add_item 函数只是从输入框中获取文本并尝试将其推送到数组中，因此如果您尝试显示该位置，它将出错这些点必须作为 LatLng 对象添加到 map 中

4. LatLng 对象期望输入为两个整数，如果您存储来自输入框的原始输入，您将得到类似“90,0”的字符串，这是 LatLng 对象的无效参数

所以这就是您的脚本的样子(未测试)

var map;
    var locations = [];
    function initialize() {
        var myLatlng = new google.maps.LatLng(0.0, 0.0);
        var myOptions = {
            zoom : 4,
            center : myLatlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//if you want to store your coordinates as a stingg you should be consistent
        locations.push("0.0,0.0");
show_markers();
    }

    function show_markers() {

        for(var i = 0; i < locations.length; i++) {
            //if you are expecting a user to input a single pair of coordinates in the input box you will need to do this
            var loc = locations[i].split(",")
            var lat = parseFloat(loc[0])
            var lng = parseFloat(loc[1])
            marker = new google.maps.Marker({
                position : new google.maps.LatLng(lat, lng), 
                map : map
            });
        }
    }

    function add_item() {
        var item = document.frm.inputbox.value;
        locations.push(item);
        show_markers();
        document.frm.outputbox.value = locations;
    }

如果您想将整个数组存储为 google LatLng 对象，并且您假设用户将在输入框中输入由空格分隔的经纬度对数据，您可以将上面的相关函数替换为..(并取从初始化中推出初始位置)

    function show_markers() {

            for(var i = 0; i < locations.length; i++) {

                marker = new google.maps.Marker({
                    position : locations[i], 
                    map : map
                });
            }
        }

        function add_item() {
locations = [] //assuming that the input box always contains the full set of coordinates you need to reset the locations array
            var item = document.frm.inputbox.value;
            //assuming that user entered data like this 0.0,0.0 70.2,30.6 33.5,120
            var items = item.split(" ");
            for (var i=0; i<items.length; i++){
                var loc = items[i].split(",")
                var lat = parseFloat(loc[0])
                var lng = parseFloat(loc[1])
                pos = new google.maps.LatLng(lat, lng)
                locations.push(pos);
            }

            show_markers();
            document.frm.outputbox.value = locations;
        }