使用JavaScript在Google地图上打印多个标记

时间:2013-01-29 15:29:47

标签: javascript google-maps-api-3

我尝试在谷歌地图(v3)上打印多个标记。我正在使用聚类和蓝色标记作为一般记录。和商店位置的红色标记。我的代码如下:

function initialize(){

          //some code here
      //....
          //....

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var markers = [];

    for (var i = 0; i < <?= $total_records ?>; i++) {
       var latLng = new google.maps.LatLng(geo_data.records[i].lat, geo_data.records[i].lng);
       var marker = new google.maps.Marker({
                                           position: latLng,
                                           draggable: true,
                                           icon: markerImage
                                         });
       markers.push(marker);
    }

    var imageUrl2 = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=AAAAA,008CFF,000000&ext=.png';
    var markerImage2 = new google.maps.MarkerImage(imageUrl2,new google.maps.Size(24, 32));     
    for (var i = 0; i < <?= $store_records ?>; i++) {
       var latLng = new google.maps.LatLng(store_data.storeRecords[i].lat, store_data.storeRecords[i].lng);
       var marker = new google.maps.Marker({
                                           position: latLng,
                                           draggable: true,
                                           icon: markerImage2
                                         });
       markers.push(marker);
    }


    var zoom = 14;
    var size = 60;

    var markerClusterer = new MarkerClusterer(map, markers, {
                                              maxZoom: zoom,
                                              gridSize: size
                                             });

}

但是现在我遇到了两个有线错误:

  1. 未捕获的SyntaxError:意外的标识符jquery-1.5.1.min.js:16

  2. 未捕获的ReferenceError:未定义initialize

  3. 我认为问题是我不能使用Marker类的功能两次,但我不确定。谁能告诉我怎样才能解决这个问题?

3 个答案:

答案 0 :(得分:0)

好。 jQuery现在是v1.9.0所以我可能会开始使用更新版本的jQuery。您可以根据需要初始化尽可能多的标记,以及性能允许。

我注意到你正在使用document.getElementId而不是jQuery选择器。你的页面中是否需要jQuery?您是否注释掉了一行来确定哪一行会导致每个错误?

答案 1 :(得分:0)

对于#1,由于代码中没有初始化对象或方法,我必须假设错误来自应用程序的另一部分。从哪个方法调用?您可以在调试工具中“查看所有错误”以查看。您是否复制并粘贴了一些具有onload事件初始化程序的代码?寻找这样的东西:

<body onload="initialize()">

对于#2,似乎有a similar bug in the jQuery validation library

答案 2 :(得分:0)

Prueba esto(试试这个)

HTML文件

ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
maps.google.com/maps/api/js?sensor=false&language=es
google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js
google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

JS档案

...onload....
.
.
var markers = [];
.
.
/* esto hace el truco */
var marcador = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: sede,
enter code here`icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|'+num+'|FFFF00|000000',
});
markers.push(marcador);

var markerclusterer = new MarkerClusterer(map, markers, { zoomOnClick: true });