使用带编号的标记打印谷歌地图

时间:2010-06-18 15:24:46

标签: google-maps

链接到地图:http://2dynamic.com.au/glebe/maps-aamp-guides.html

在上面的链接中,我们在地图视图中有动态标记。当我单击打印当前地图视图时,我需要使用动态编号标记加载地图。我希望有可能成功。

如果有人可以展示一些编码示例,那就更好了。

2 个答案:

答案 0 :(得分:1)

您需要创建自己继承自Marker的LabeledMarker类。 This是一个非常好的教程,我曾经用它来实现同样的目标。

答案 1 :(得分:0)

Alex suggested可能使用一组带编号的图标的另一个选项,例如以下网站提供的其中一组:

然后您应该能够执行以下操作(使用v3 API):

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    function initialize() {

      var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      var image;

      for (var i = 0; i < locations.length; i++) {
        image = new google.maps.MarkerImage('marker' + i + '.png',
                                            new google.maps.Size(20, 34),
                                            new google.maps.Point(0, 0),
                                            new google.maps.Point(10, 34));

        new google.maps.Marker({
          position: new google.maps.LatLng(location[1], location[2]),
          map: map,
          icon: image,
          title: location[0],
          zIndex: location[3]
        });
      }
    }
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

以上示例的屏幕截图:

Google Numbered Marker Icons http://img716.imageshack.us/img716/3433/nummap.png

请注意,您可以轻松地在标记后面添加阴影。您可以查看Google Maps API Reference: Complex Markers上的示例,了解有关此内容的详细信息。

将此示例移植到v2 API应该非常简单。如果您需要帮助,请告诉我。