Карты Google: мультимаркер

Question

Я хочу нанести несколько маркеров на мою карту.Нашел какой-то код в интернете, для этого пользователя это сработало.Массив генерируется PHP, пример: var ship = [['61', '10.2'] ['60.5', '10.1']];

Мой JavaScript:

var map;
function load(ships) {
    initialize();
    createShips(ships);
}

function initialize() {

    //build the map
    var myLatlng = new google.maps.LatLng(63.65,10.65);
    var myOptions = {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function createShips(ships){
    for (var i = 0; i < ships.length; i++) {
        new google.maps.Marker({
          position: new google.maps.LatLng(ships[i][0], ships[i][1]),
          map: map,
          title: ships[i][0]
        });
    }
}

Моя HTML-функция для запуска карты:

body onload="load()"

Карта, кажется, появляется, но без маркеров.

Answer 1

Вот пара jsfiddle

проблем:

1. Ваш массив отформатирован неправильно.должен иметь запятую между элементами.

2. вы объявили свою карту локально в функции initialize, таким образом, внутри createShips map: map в основном указывает на undefined.поэтому я объявил карту вне функций, чтобы вы могли использовать ее в creaeteShips

JavaScript:

    var ships = [['61', '10.2'],['60.5', '10.1']];  //formatted array correctly
    var map; //declared outside functions so createShips can access

    function load(ships) {
        initialize();
        createShips(ships);
    }

    function initialize() {
        var myLatlng = new google.maps.LatLng(63.65, 10.65);
        var myOptions = {
            zoom: 9,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function createShips(ships) {
        for (var i = 0; i < ships.length; i++) {
            new google.maps.Marker({
                position: new google.maps.LatLng(ships[i][0], ships[i][1]),
                map: map,
                title: ships[i][0]
            });
        }
    }

load(ships);

google.map.LatLng принимает числа вместо строк.Итак, вы должны изменить строку на числа.

google.map.LatLng(lat:number, lng:number, noWrap?:boolean);

Обратите внимание на порядок широты и долготы.Если флаг noWrap установлен в true, то числа будут использоваться как переданные, в противном случае широта будет ограничена в пределах от -90 градусов до +90 градусов, а долгота будет в пределах от -180 градусов до +180 градусов.

Обновление:

Хорошо, вот еще одна проблема после того, как вы преобразовали свои строки Lat и Lng в числа.Когда вы создаете маркер, вы указываете название как ship [i] [0].Заголовок ожидает строку и, таким образом, выдает ошибку, когда получает число.Я начал отслеживать ваши маркеры, помещая маркеры в массив var myMarkers и устанавливая заголовок в строку.пожалуйста, посмотрите на обновленный jsfiddle:

    var myMarkers = []; //created outside of all function to make it global

    myMarkers.push(new google.maps.Marker({
        position: new google.maps.LatLng(ships[i][0], ships[i][1]),
        map: map,
        title: 'ship #' + i //i change the title from a number into string
    }));