Google地圖：Multimarker無法正常工作

Question

我想在地圖上繪製多個標記。 在互聯網上找到了一些代碼，對於該用戶的工作。該數組由PHP生成，例如：var ships = [['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. 你在函數初始化時在本地聲明瞭你的地圖，因此，在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標誌爲真，那麼數字將作爲傳遞使用，否則緯度將被夾在-90度和+90度之間，而經度將被包裹在-180度和+180度之間。

更新：

好吧，這裏是您轉換您的字符串緯度和液化天然氣成數字之後的另一個問題。當您創建標記時，您將標題指定爲船舶[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 
    }));