2011-02-12 122 views
0

我想在地图上绘制多个标记。 在互联网上找到了一些代码,对于该用户的工作。该数组由PHP生成,例如:var ships = [['61','10.2'] ['60.5','10.1']];Google地图:Multimarker无法正常工作

我的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()"

的地图似乎出现,但没有标记:(

+0

我想坐标可能无法正确显示在地图上。不是你想要的地方 – kjy112 2011-02-12 15:06:37

+0

我放大了一路,但仍然没有标记。 上面的示例数组是在地图之外的地方,我的真实数据在“窗口”内。 – HyperDevil 2011-02-12 15:09:17

回答

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