如何在同一地图上使用带有多个标记的Google Maps API

Question

所以,我有以下脚本使用谷歌地图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>

还有一个问题,如果我将脚本文本作为变量传递,可以说:

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

我的<%= ScriptText%>将是一个字符串,我将构建并将其值分配给名为ScriptText的Friend或Public变量,它是否仍然运行并正常工作？(我这样做是为了使我的脚本动态和不同,基于我如何将它构建为STRING,因为我在javascripting中的文盲; P)

Answer 1

obeattie和gregers都是对的.通常,您需要将标记参数存储在某种类型的数组中,以后将至少使用两次:

1. 将叠加层添加到地图时
2. 将其添加到GLatLngBounds对象以计算中心点和缩放级别时

一个或多个数组看起来像一个对象数组,如:

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

至于你在客户端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>

我发表了一篇文章:http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

您需要为GMarker要在地图上标记的每个地点创建一个新的.有可用的很好的文档在这里为GMarker秒.

要创建一个GMarker,您将从文档中看到您首先需要创建一个GLatLng表示要删除标记的位置.你没有提到想要气球中的任何内容,所以我假设它只是你所追求的标记.在您的情况下,代码可能看起来像这样:

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

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

我相信你可以准确地告诉我这里发生了什么,但为了以防万一,我创建了一个GLatLng对象数组(这可以是任何长度[在边界内哈哈]),然后迭代它,向地图添加标记对于GLatLng数组中定义的每个.

如果您打算创建大量标记,您可能会发现使用标记管理器很有用,它可以同时加速渲染大量标记(通过不渲染屏幕外标记和凝结屏幕标记,如果有的话)在屏幕的一个区域有很多).