-1

我在这里查看了很多类似的问题，但没有找到任何可以回答我的问题的东西。我是 JS 和 GoogleMaps API v3 的新手，并且已经成功地按照他们的教程做到了这一点。但是，我希望根据单击的标记显示带有自定义内容的信息窗口，但我无法弄清楚如何执行此操作。我也想用大约 100 个标记来实现这一点，所以我也想知道最好的方法来做到这一点，而不会让事情变得太乱。需要明确的是，图标有 3 种类型，但每个图标最终都会有很多标记，所以我需要将内容链接到每个“功能”。希望我在这里有一个良好的开端，并且不会偏离基础。我已经包含了页面的代码。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map_canvas {
        width: 800px;
        height: 500px;
        background-color:#CCC;
      }
       #legend {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 3px solid #000;
      }
      #legend img {
        vertical-align: middle;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(33.137551,-0.703125),
          zoom: 2,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(map_canvas, map_options);
        map.set('styles', [
        {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [
            { color: '#888888' },
            { weight: 1.0 }
            ]
        }, {
            featureType: 'landscape',
            elementType: 'geometry.fill',
            stylers: [
            { hue: '#008f11' },
            { gamma: 1.0 },
            { saturation: 0 },
            { lightness: -10 }
            ]       
        }, {
            featureType: 'water',
            elementType: 'geometry.fill',
            stylers: [
            { hue: '#054d8fd' },
            { gamma: 1.0 },
            { saturation: 0 },
            { lightness: -10 }
            ]       
        }, {
            featureType: 'poi',
            elementType: 'geometry',
            stylers: [
                { visibility: 'off' }
            ]
            }
        ]);
        var iconBase = 'http://i1318.photobucket.com/albums/t658/greatergoodorg/';
        var icons = {
            people: {
                name: 'People',
                icon: iconBase + 'people_zps26d13009.png',
                shadow: iconBase + 'shadow-people_zps4b39eced.png'
            },
            pets: {
                name: 'Pets',
                icon: iconBase + 'pets_zps15f549f2.png',
                shadow: iconBase + 'shadow-pets_zps361068aa.png'
            },
            planet: {
                name: 'Planet',
                icon: iconBase + 'planet_zps2a8572ce.png',
                shadow: iconBase + 'shadow-planet_zps9912e26b.png',
            }
        };
        var data = ["This is the first one", "This is the second one", "This is the third one"];
        function addMarker(feature) {
            var marker = new google.maps.Marker({
                position: feature.position,
                icon: icons[feature.type].icon,  
                shadow: {
                    url: icons[feature.type].shadow,
                    anchor: new google.maps.Point(21, 32)
                },
                animation: google.maps.Animation.DROP,
                map: map
            });
            /*...
            google.maps.event.addListener(marker, "click", function () {
                 infowindow.open(map,marker);
            });
            ...*/
        /*...
        google.maps.event.addListener(marker, 'click', function() {
        map.setZoom(8);
        map.setCenter(marker.getPosition());
        });
        ...*/
        }
        var features = [
          {
            position: new google.maps.LatLng(33.137551,-0.703125),
            type: 'planet'
          },
          {
            position: new google.maps.LatLng(44.234234,-0.232233),
            type: 'pets'
          },
          {
            position: new google.maps.LatLng(54.234234,-0.032233),
            type: 'people'
          }
          ];
        for (var i = 0, feature; feature = features[i]; i++) {
          addMarker(feature);
          } 
        var legend = document.getElementById('legend');
        for (var key in icons) {
          var type = icons[key];
          var name = type.name;
          var icon = type.icon;
          var div = document.createElement('div');
          div.innerHTML = '<img src="' + icon + '"> ' + name;
          legend.appendChild(div);
        }
        map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
        document.getElementById('legend'));
    }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>        
  </head>
  <body> 
    <div id="map_canvas"></div>
    <div id="legend"><strong>Project Types</strong></div>
  </body>
</html>
4

1 回答 1

0

这将打开一个信息窗口并在其中显示“类型”字符串

var infowindow = new google.maps.InfoWindow();

function addMarker(feature) {
    var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,  
        shadow: {
           url: icons[feature.type].shadow,
           anchor: new google.maps.Point(21, 32)
        },
        animation: google.maps.Animation.DROP,
        map: map
    });
    google.maps.event.addListener(marker, "click", function () {
     infowindow.setContent(feature.type);
         infowindow.open(map,marker);
    });
}
于 2013-06-12T02:56:30.370 回答