Нажмите новый LatLng в Google Maps - PullRequest
Новая
       4

Нажмите новый LatLng в Google Maps

3 голосов
/ 09 декабря 2011

Я пытаюсь вставить строку, в которой у меня есть все координаты широты некоторых маркеров из пользовательского ввода (текстовое поле), но у меня возникают некоторые проблемы, так как новые данные не помещаются в массив. Кто-нибудь знает, что я делаю не так?

вот мой код: 

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, поэтому мне нужно, чтобы новый элемент был добавлен в виде новой строки в скобках [] ... Но у меня нет идей ...

1 Ответ

5 голосов
/ 09 декабря 2011

У вас есть несколько ошибок здесь

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

Если вы хотите сохранить весь массив как Google LatLng Objects и предполагаете, что пользователь введет данные в поле ввода в лат, длинные пары, разделенные пробелом, вы можете заменить соответствующие функции выше на .. (и взять исходные местоположения нажмите от инициализации) 

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