Google地图：如何为自定义标记创建信息窗口？

时间：2015-09-29 14:25:44

标签： javascript google-maps google-maps-api-3 google-maps-markers infowindow

我正在为带有自定义标记的网站制作谷歌地图。制作标记，但是当点击标记时，我需要为每个标记打开信息框。我在互联网上搜索并尝试了很多东西，但它不会工作。

以下是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map {
        width:700px;
		height:600px;
		border-radius:5px;
		margin-left:auto;
		margin-right:auto;
      }
      #legend {
        font-family: Arial, sans-serif;
        background: #fff;
		opacity:0.85;
        padding: 10px;
        margin: 10px;
        border: 1px solid #000;
		border-radius:5px;
      }
      #legend h3 {
        margin-top: 0;
      }
      #legend img {
        vertical-align: middle;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      var map;
      function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: new google.maps.LatLng(51.99683352, 5.88360088),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        });

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
		  camping: {
            name: 'Camping',
            icon: iconBase + 'campground_maps.png'
          },
		  grocery: {
            name: 'Supermarkt',
            icon: iconBase + 'grocery_maps.png'  
        
          },
          dining: {
            name: 'Restaurant',
            icon: iconBase + 'dining_maps.png'
          },
          snack_bar: {
            name: 'Snackbar',
            icon: iconBase + 'snack_bar_maps.png'
          },
		  swimming: {
            name: 'Zwembad',
            icon: iconBase + 'swimming_maps.png'
          },
		  museum: {
            name: 'Museum',
            icon: iconBase + 'museum_maps.png'
		  },
		  parks: {
            name: 'Landgoed',
            icon: iconBase + 'parks_maps.png'
		  },
		  hospitals: {
            name: 'Ziekenhuis',
            icon: iconBase + 'hospitals_maps.png'
          }
        };

        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        }

        var features = [
          {
            position: new google.maps.LatLng(52.0072118, 5.87047509),
            type: 'camping'
          }, {
            position: new google.maps.LatLng(52.00030944, 5.8805877),
            type: 'dining'
          }, {
            position: new google.maps.LatLng(51.99683352, 5.88360088),
            type: 'dining'
          }, {
            position: new google.maps.LatLng(51.962503, 5.90451),
            type: 'swimming'
		  }, {
            position: new google.maps.LatLng(51.9956291, 5.9225834),
            type: 'swimming'
		  }, {
            position: new google.maps.LatLng(51.98811773, 5.89362323),
            type: 'grocery'
		  }, {
            position: new google.maps.LatLng(51.99012513, 5.89376865),
            type: 'grocery'
		  }, {
            position: new google.maps.LatLng(52.009949, 5.906641),
            type: 'museum'
		  }, {
            position: new google.maps.LatLng(51.988764, 5.901436),
            type: 'museum'
		  }, {
            position: new google.maps.LatLng(52.02687639, 5.87179417),
            type: 'museum'
		  }, {
            position: new google.maps.LatLng(51.987706, 5.832719),
            type: 'museum'
		  }, {
            position: new google.maps.LatLng(52.03369001, 5.86739123),
            type: 'parks'
		  }, {
            position: new google.maps.LatLng(51.9911136, 5.8907901),
            type: 'snack_bar'
		  }, {
            position: new google.maps.LatLng(52.001069, 5.910066),
            type: 'hospitals'
          }
        ];

        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(legend);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="legend"><h3>Legenda</h3></div>
  </body>
</html>

有人有任何建议如何使信息框工作吗？

2 个答案:

答案 0 :(得分：1)

您需要为每个标记设置info属性，如此

marker.info = new google.maps.InfoWindow({
  content: 'Add some info here'
});

google.maps.event.addListener(marker, 'click', function() {
  marker.info.open(map, marker);
}

你可以而且应该为所有标记重新使用一个InfoWindow，但这非常简单。

运行下面的代码段进行测试：）

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map {
      width: 700px;
      height: 600px;
      border-radius: 5px;
      margin-left: auto;
      margin-right: auto;
    }
    #legend {
      font-family: Arial, sans-serif;
      background: #fff;
      opacity: 0.85;
      padding: 10px;
      margin: 10px;
      border: 1px solid #000;
      border-radius: 5px;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map;

    function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: new google.maps.LatLng(51.99683352, 5.88360088),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      });

      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var icons = {
        camping: {
          name: 'Camping',
          icon: iconBase + 'campground_maps.png'
        },
        grocery: {
          name: 'Supermarkt',
          icon: iconBase + 'grocery_maps.png'

        },
        dining: {
          name: 'Restaurant',
          icon: iconBase + 'dining_maps.png'
        },
        snack_bar: {
          name: 'Snackbar',
          icon: iconBase + 'snack_bar_maps.png'
        },
        swimming: {
          name: 'Zwembad',
          icon: iconBase + 'swimming_maps.png'
        },
        museum: {
          name: 'Museum',
          icon: iconBase + 'museum_maps.png'
        },
        parks: {
          name: 'Landgoed',
          icon: iconBase + 'parks_maps.png'
        },
        hospitals: {
          name: 'Ziekenhuis',
          icon: iconBase + 'hospitals_maps.png'
        }
      };

      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        marker.info = new google.maps.InfoWindow({
          content: 'Add some info here'
        });

        google.maps.event.addListener(marker, 'click', function() {
          marker.info.open(map, marker);
        });
      }

      var features = [{
        position: new google.maps.LatLng(52.0072118, 5.87047509),
        type: 'camping'
      }, {
        position: new google.maps.LatLng(52.00030944, 5.8805877),
        type: 'dining'
      }, {
        position: new google.maps.LatLng(51.99683352, 5.88360088),
        type: 'dining'
      }, {
        position: new google.maps.LatLng(51.962503, 5.90451),
        type: 'swimming'
      }, {
        position: new google.maps.LatLng(51.9956291, 5.9225834),
        type: 'swimming'
      }, {
        position: new google.maps.LatLng(51.98811773, 5.89362323),
        type: 'grocery'
      }, {
        position: new google.maps.LatLng(51.99012513, 5.89376865),
        type: 'grocery'
      }, {
        position: new google.maps.LatLng(52.009949, 5.906641),
        type: 'museum'
      }, {
        position: new google.maps.LatLng(51.988764, 5.901436),
        type: 'museum'
      }, {
        position: new google.maps.LatLng(52.02687639, 5.87179417),
        type: 'museum'
      }, {
        position: new google.maps.LatLng(51.987706, 5.832719),
        type: 'museum'
      }, {
        position: new google.maps.LatLng(52.03369001, 5.86739123),
        type: 'parks'
      }, {
        position: new google.maps.LatLng(51.9911136, 5.8907901),
        type: 'snack_bar'
      }, {
        position: new google.maps.LatLng(52.001069, 5.910066),
        type: 'hospitals'
      }];

      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(legend);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map"></div>
  <div id="legend">
    <h3>Legenda</h3>
  </div>
</body>

</html>

答案 1 :(得分：0)

看看这个简单的解决方案。我试过这个，它工作正常。相应地修改你的代码。

 for (i = 0; i < latitude_longitude_array.length; i++) {      
        var data = latitude_longitude_array[i];
        var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);

        var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
        });

        var geocoder = new google.maps.Geocoder();
            (function (marker, data) {
                geocoder.geocode(
                                {
                                    'latLng': myLatlng
                                },
                                function (results, status) {

                                    if (status == google.maps.GeocoderStatus.OK) {
                                        if (results[1]) {
                                            var infoWindow = new google.maps.InfoWindow();      

                                            infoWindow.setContent("Address" + ": " + results[1].formatted_address + " ");    

                                            google.maps.event.addListener(marker, "click", function (e) {
                                                infoWindow.open(map, marker);
                                            });
                                        }
                                        else {
                                            alert("No results found");
                                        }
                                    }
                                    else {
                                        alert("Geocoder failed due to: " + status);
                                    }
                                });
            })(marker, data);
    } //end of for
相关问题
最新问题