使用多个标记初始化Google地图

时间:2010-09-29 12:19:37

标签: javascript jquery google-maps

我正在尝试开发一个应用程序,其中从数据库中提取地址,以使用我网站上的谷歌地图上的标记显示它们。

我有以下javascript代码+ jquery,google地图和所有其他必要的javascript文件:

$(document).ready(function(){

    // initialise map
    var myLatlng = new google.maps.LatLng(50.52,4.22);
    // specify options
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // attach map to html and set reference
    var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

    // markers array
    var markers = Array();

    // infowindows array
    var infos = Array();

    var lat = 50;
    for(var j = 0; j < 5; j++){

        var contentString = '<div id="content">test</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,4.22),
            map: map,
            title: 'Europe'
        });

        // push vars to arrays markers and infos
        markers.push(marker);
        infos.push(infowindow);

        lat = lat + 1;

    }

    for(var i = 0; i < markers.length; i++) {
        google.maps.event.addListener(markers[i], 'click', clickHandler(i));
    }

    function clickHandler(i) {
        infowindow.open(map,infos[i]);
    }

});

测试/模拟for循环我将使用PHP从数据库中提取数据我插入了一些for for语句来填充标记和infos数组。

一切正常(显示标记),但点击标记不会显示信息框。

Onload我也在firebug中收到此错误: 预期属于类型函数的参数第23行 - http://maps.gstatic.com/intl/nl_ALL/mapfiles/api-3/2/7/main.js

有人可以帮忙吗?

另外还有一个问题:如何将街道号,邮政编码,城市等字符串地址转换为经纬度?

谢谢!

1 个答案:

答案 0 :(得分:2)

显示标记的问题在于您正在调用:

infowindow.open(map,infos[i]);

第二个参数应该是标记,而不是信息。

infowindow.open(map,marker);

javascript错误来自:

google.maps.event.addListener(markers[i], 'click', clickHandler(i));

该代码实际上调用 clickHandler并尝试将返回值(无)作为参数传递给侦听器,而不是将clickHandler绑定为事件函数。修复它指向一个函数仍然不会产生你想要的东西,这在http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

中讨论

所以你应该这样做:

addEventListener(markers[i]);

function addEventListener(marker) {
   google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map, marker);
   });
}

要转换街道号码等坐标,请查看Google的地理编码API:http://code.google.com/apis/maps/documentation/geocoding/index.html