在谷歌地图中推送新的经纬度坐标

Question

在谷歌地图中推送新的经纬度坐标

4

我正在尝试将用户输入（文本字段）中某些标记的所有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”，因此它会从位置变量值中删除“new google.maps.LatLng”。问题在于，我真的需要新的google.maps.LatLng部分，因此我需要将新项目作为一个新行添加到括号[]内部...

但是我没有任何想法...

- don

你是在使用 add_item 添加项目之后再运行 initialize 吗？ - Jørgen

我在此期间已经优化了代码。我首先发现的一个问题是，我将变量位置声明为局部变量，所以现在我已经将其改为全局变量。现在add_item的结果是一个带有“(0.0,0.0)，NEWITEM”的数组，因此它会从位置变量中删除“new google.maps.LatLng”。问题是我真的需要它，所以我需要将新项目作为新行添加到方括号[]中... - don

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michal · Accepted Answer

您有几个错误：

您的位置数组在初始化函数的本地作用域中
在将初始位置添加到数组后，您有一个多余的逗号
您的第一个点存储为Google LatLng对象，但是您的add_item函数只是从输入框中获取文本并尝试将其推送到数组中，因此如果您尝试显示该位置，它会出错，因为点必须作为LatLng对象添加到地图中
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对象，并且您假设用户将以空格分隔的纬度和经度对的形式输入数据，则可以使用以下代码替换上面的相关函数（并从initialize中删除初始位置push操作）。

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