Javascript 如何在同一地图上使用多个标记的google maps API

所以，我有下面的脚本来使用google maps API，这一切都很好，但是我需要创建一个具有多个标记（指向某物的气球状图标）的地图，并且我需要每个标记指向地图的不同区域（即不同的坐标），我怎么做

<script type="text/javascript">

         function load() {

        var map = new GMap2(document.getElementById("map"));
        var marker = new GMarker(new GLatLng(<%=coordinates%>));

        var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
             "<%=maptitle%><br/>" +
             "<%=text%>";



        map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>)
        map.setMapType(G_HYBRID_MAP);
        map.addOverlay(marker);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());


        marker.openInfoWindowHtml(html);
        }

        //]]>
        </script>

函数加载（）{
VarMap=新的GMap2（document.getElementById（“map”）；
var marker=newgmarker（newglatlng（））；
var html=“”+
“
”+
"";
map.setCenter（新的GLatLng（），）
setMapType（G_HYBRID_map）；
添加覆盖图（标记）；
addControl（新的GlargeMappControl（））；
addControl（新的GScaleControl（））；
addControl（新的GMapTypeControl（））；
marker.openInfoWindowHtml（html）；
}
//]]>

还有一个问题，如果我将脚本文本作为变量传递，我们可以这样说：

<script type="text/javascript">
<%=ScriptText%>
</script>

var latlng1 = [
    new GLatLng( 48.1234, -120.1234 ),
    new GLatLng( 48.5678, -120.5678 ),
    new GLatLng( 48.9101, -120.9112 ),
    new GLatLng( 48.1121, -120.1314 ),
    new GLatLng( 48.3145, -120.1516 ),
    new GLatLng( 48.1617, -120.1718 ),
    new GLatLng( 48.1819, -120.1920 ),
    new GLatLng( 48.2021, -120.2122 )
];

---

我将是一个字符串，我将构建它，并将它的值分配给一个名为ScriptText的朋友或公共变量，它是否仍能正常运行和工作？（我这样做是为了使我的脚本动态化，并根据我如何将其构建为字符串而有所不同，因为我不懂javascripting；P）

您需要为地图上要标记的每个地方创建一个新的脚本。对于

GMarker

s，有相当好的文档可用

要创建

GMarker

，您将从文档中看到，首先需要创建一个

GLatLng

，表示要放置标记的位置。你没有提到想要气球中的任何内容，所以我假设它只是你想要的标记。在您的情况下，代码可能如下所示：

var markerCoords = [
    new GLatLng(<latitude>, <longitude>),
    new GLatLng(<latitude>, <longitude>),
    [...]
];

for (coord in markerCoords){
    map.addOverlay(new GMarker(coord));
};

var markerCoords=[
新玻璃（，），
新玻璃（，），
[...]
];
for（markerCoords中的坐标）{
map.addOverlay（新GMarker（coord））；
};

我相信您可能可以准确地知道这里发生了什么，但以防万一，我创建了一个

GLatLng

对象数组（可以是任意长度[在范围内哈哈]），然后迭代它，为数组中定义的每个

GLatLng

向地图添加标记

---

如果您计划创建大量标记，您可能会发现使用非常有用，这将加快同时渲染大量标记的速度（如果屏幕的一个区域中有大量标记，则不渲染屏幕外标记并压缩屏幕上标记）。

Obattie对您的问题回答得非常好。但是从您的示例代码来看，似乎您还希望地图缩放到包含标记的区域。要使用多个标记执行此操作，可以为每个标记创建一个扩展的标记。然后，可以从bounds对象中获取适合标记集合的中心和缩放

var markersBounds=glatlngbunds（）；
var-coord=null；
for（markerCoords中的坐标）{
coord=新的GMarker（coord）；
addOverlay（）；
markersBounds.extend（坐标）；
};

---

我不是100%确定G_HYBRID_地图，但如果我没记错的话，G_HYBRID_地图就是一个例子。

奥巴蒂和格雷格都是对的。通常，您需要将标记参数存储在某种类型的数组中，以后将至少使用该数组两次：

将覆盖添加到地图时

将其添加到GlatlingBounds对象以计算中心点和缩放级别时

一个或多个标记看起来像一个对象数组，类似于：

<script type="text/javascript">
<%=ScriptText%>
</script>

var latlng1 = [
    new GLatLng( 48.1234, -120.1234 ),
    new GLatLng( 48.5678, -120.5678 ),
    new GLatLng( 48.9101, -120.9112 ),
    new GLatLng( 48.1121, -120.1314 ),
    new GLatLng( 48.3145, -120.1516 ),
    new GLatLng( 48.1617, -120.1718 ),
    new GLatLng( 48.1819, -120.1920 ),
    new GLatLng( 48.2021, -120.2122 )
];

添加标记的代码类似于：

  // assume that map1 is an instance of a GMap2 object

  // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map
  map1.setCenter( new GLatLng( 0, 0 ), 0 );

  // #1 -- add markers
  for ( var i = 0; i < latlng1.length; i++ )
  {
    var marker = new GMarker( latlng1[ i ] );
    map1.addOverlay( marker );
  }

  // #2a -- calculate center
  var latlngbounds = new GLatLngBounds( );
  for ( var i = 0; i < latlng1.length; i++ )
  {
    latlngbounds.extend( latlng1[ i ] );
  }

  // #2b -- set center using the calculated values
  map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

//假设map1是GMap2对象的实例
//#0——谷歌地图api要求我们在调用地图上的任何其他操作之前，先调用setCenter
地图1.设置中心（新GLatLng（0,0,0）；
//#1--添加标记
对于（变量i=0；i

至于您关于在客户端javascript中使用服务器端脚本的问题，是的，您可以将它们混合在一起。根据你的描述，我认为这是你需要做的：

<script type="text/javascript">
    var latlng1 = new Array( );
</script>
<script type="text/javascript">
    <%
        do until rs.eof
            %>
            latlng1.push( new GLatLng( parseFloat( '<%= rs( "Lat" ) %>' ), parseFloat( '<%= rs( "Lng" ) %>' ) ) );
            <%
            rs.movenext
        loop
    %>
</script>

var latlng1=新数组（）；
latlng1.push（新GLatLng（parseFloat（“”），parseFloat（“”））；

---

我在以下位置发布了一篇文章：

我有类似的东西，但事件不起作用。我可以在object的构造函数中添加侦听器吗

//Localization object onstructor
function Localization(width, height, description, img_source){
    this.point = new GLatLng(width, height);
    this.marker = new GMarker(this.point);
    this.description = description;
    this.img_source = img_source;
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);});
}

//map localizations to show on map
var localizations = [
    new Localization( 52.9015797, 15.2602200, 'Poznań1', 'eye1' ),
    new Localization( 52.9025797, 15.1602200, 'Poznań2', 'eye2' ),
    new Localization( 52.9035797, 15.2702200, 'Poznań3', 'eye3' ),
    new Localization( 52.9045797, 15.2102200, 'Poznań4', 'eye4' ),
]

var map = new GMap2(document.getElementById("mapa"));
map.setCenter(localizations[3].point, 13);
map.setUIToDefault();


for(i=0; i < localizations.length; i++){
    localization=localizations[i];
    map.addOverlay(localization.marker);
    localization.marker.openInfoWindowHtml(localization.description);
}

//构造器上的本地化对象
功能定位（宽度、高度、描述、img_源）{
此点=新玻璃（宽度、高度）；
this.marker=新的GMarker（this.point）；
this.description=描述；
this.img_source=img_source；
addListener（this.marker，“click”，function（）{marker.openInfoWindowHtml（this.description）；}）；
}
//要在地图上显示的地图本地化
变量本地化=[
新本地化（52.9015797，15.2602200，'Poznań1'，'eye1'），
新本地化（52.9025797，15.1602200，'Poznań2'，'eye2'），
新本地化（52.9035797，15.2702200，'Poznań3'，'eye3'），
新本地化（52.9045797，15.2102200，'Poznań4'，'eye4'），
]
VarMap=newGMAP2（document.getElementById（“mapa”）；
设置中心（定位[3]。点，13）；
map.setUIToDefault（）；
对于（i=0；i

谢谢，我问题的最后一部分怎么样？？？是否可以将脚本构建为字符串，然后将其作为变量传递