堆棧內存溢出
  簡體   English   中英

谷歌地圖：如何為自定義標記創建信息窗口？

[英]Google Maps: How to create a infowindow for custom markers?

 原文  2015-09-29 14:25:43  7   2    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 個解決方案

解決方案1
 1  2015-09-29 14:36:04

您需要像這樣為每個標記設置 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>

解決方案2
 0  2015-09-30 06:53:13

看看這個簡單的解決方案。 我試過這個，它工作正常。 相應地修改您的代碼。

 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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 谷歌地圖：如何創建自定義信息窗口？ 在谷歌地圖上顯示 5 個標記的信息窗口，信息窗口是一個圖表 如何將自定義滾動條應用於Google Maps InfoWindow 如何為Google地圖創建可拖動的自定義標記列表 為Google Maps API中的現有標記添加信息窗口 在 Ionic Google Maps 中初始化標記和信息窗口 Google Maps標記無法在Firefox上生成Infowindow Google Maps-將單個infoWindow重用於多個標記 谷歌地圖 - 多個標記 - 1 InfoWindow問題 Google Maps上的“標記”數組是否有多個“ InfoWindow”？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM