在Google地图中推送新的LatLng

Question

我正试图进入一个arry，其中我有来自用户输入（文本字段）的一些标记的所有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;
}

在身体我有地图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”的数组，所以它从locations变量中删除“new google.maps.LatLng”值。 问题是我真的需要新的google.maps.LatLng部分，所以我需要将新项目添加为括号[]内的新行......但我没有想法......

Answer 1

你在这里有一些错误

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

2. 将初始位置添加到阵列后，您有一个逗号逗号

3. 您的第一个点存储为Google LatLng对象，但您的add_item函数只是从输入框中抓取文本并尝试将其推送到数组，因此如果您尝试显示该位置，则会因为必须添加点而错误输出地图为LatLng对象

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;
    }

如果你想将整个数组存储为谷歌LatLng对象，你假设用户将在lat中的输入框中输入数据，用空格分隔的长对可以替换上面的相关函数..（并取出初始值位置从初始化推送）

    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;
        }