谷歌地图的弹出信息框
[英]Pop-up info box in google maps
问题描述
我有以下代码，希望对每个自定义标记添加弹出信息框有帮助。 目前，我可以在代码中为每个标记设置坐标，但是一旦单击标记，我还想在弹出的信息框中添加其他信息。 我似乎无法获得弹出信息框
<!DOCTYPE html> <html> <head> <title>Cycle Trails Map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user- scalable=no"> <meta charset="utf-8"> <style> html, body, #map_canvas { width: 100%; height: 1000px; background-color: #2D333C; } #legend { font-family: Helvetica; color: #FFD900; background: rgba(0, 0, 0, 0.6); padding: 25px; margin: 25px; border: 1px solid #FFD900; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> var map; // google map object var markers = []; // we well store the markers here function initialize() { map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 6, center: new google.maps.LatLng(-41.269954, 174.225516), mapTypeId: google.maps.MapTypeId.TERRAIN, <!-- Let's style the map with custom colours and opacity --> styles: [{ featureType: 'poi.business', elementType: ' labels.icon', stylers: [{ visibility: 'on' }, { hue: '#ff00db' }, { lightness: 0 }, { saturation: 0 }] }] }); <!-- create KML layer --> var myKmlOptions = { preserveViewport: true, suppressInfoWindows: true } var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions); var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions); kmlLayer_1.setMap(map); kmlLayer_2.setMap(map); <!-- Asynchronous Loading --> function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; <!-- Let's create the legend --> var iconBase = 'https://i.imgur.com/'; var icons = { travel: { name: 'AA Traveller office', icon: iconBase + '2BNbLmG.png' }, isite: { name: 'I-Site', icon: iconBase + 'kx9a1sc.png' }, accommodation: { name: 'Accommodation', icon: iconBase + 'BJ4o7ad.png' }, camping: { name: 'Camping', icon: iconBase + 'EIcei8n.png' }, food: { name: 'Food and Beverage', icon: iconBase + 'c5aaWcb.png' }, toilets: { name: 'Toilets', icon: iconBase + 'ID2zzXg.png' }, waters: { name: 'Drinking Water', icon: iconBase + '5u3yvH1.png' }, todo: { name: 'Things to do', icon: iconBase + 'L3Z9xWv.png' }, viewing: { name: 'Viewing points', icon: iconBase + 'DTf6oIp.png' } }; <!-- Adding the markers now --> function addMarker(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); markers.push({ marker: marker, type: feature.type }); } <!-- Add the legend locations --> var features = [ <!-- AA Travel --> { position: new google.maps.LatLng(-36.750002, 174.729471), type: 'travel' }, <!-- I Site --> { position: new google.maps.LatLng(-37.226583, 175.335536), type: 'isite' }, <!-- Accommodation --> { position: new google.maps.LatLng(-36.807404, 175.144404), type: 'accommodation' }, { position: new google.maps.LatLng(-39.808155, 175.474612), type: 'accommodation' }, { position: new google.maps.LatLng(-41.776782, 171.504106), type: 'accommodation' }, { position: new google.maps.LatLng(-43.820004, 172.965288), type: 'accommodation' }, { position: new google.maps.LatLng(-44.626974, 169.317827), type: 'accommodation' }, { position: new google.maps.LatLng(-46.522343, 168.455400), type: 'accommodation' }, <!-- Camping --> { position: new google.maps.LatLng(-36.556301, 174.693964), type: 'camping' }, <!-- Food and Beverage --> { position: new google.maps.LatLng(-38.368372, 176.847826), type: 'food' }, <!-- Water --> { position: new google.maps.LatLng(-39.241622, 174.782397), type: 'waters' }, <!-- Things to do --> { position: new google.maps.LatLng(-40.339016, 176.298510), type: 'todo' }, <!-- Toilets --> { position: new google.maps.LatLng(-42.788153, 172.497240), type: 'toilets' }, { position: new google.maps.LatLng(-41.878568, 173.837572), type: 'toilets' }, <!-- Viewing spots --> { position: new google.maps.LatLng(-43.890775, 171.838061), type: 'viewing' }, { position: new google.maps.LatLng(-37.676004, 178.429858), type: 'viewing' }, { position: new google.maps.LatLng(-39.278658, 173.763491), type: 'viewing' } ]; for (var i = 0, feature; feature = features[i]; i++) { addMarker(feature); } var legend = document.getElementById('legend'); var i = 0; for (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createElement('div'); div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \\'' + key + '\\')"><img src="' + icon + '"> ' + name; legend.appendChild(div); i++; } map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); } function toggleType(elm, event, type) { var on = elm.checked; for (var i = 0; i < markers.length; i++) { if (markers[i].type == type) { markers[i].marker.setMap(on ? map : null); } } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas"></div> <div id="legend"> <h3>Points of Interest</h3> </div> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2015-06-09 05:37:04
您需要阅读以下内容： https : //developers.google.com/maps/documentation/javascript/infowindows
以下是带注释的步骤：
构造一个
new google.maps.InfoWindow()的infoWindow对象new google.maps.InfoWindow()在创建每个标记时，将click事件绑定到该标记。 至少通过闭合将您创建的标记传递给该回调。
回调将设置infoWindow的
setContent。 您可能需要动态创建html字符串并将其发送到setContent然后，回调程序将通过点击的
marker在map上打开信息
<!DOCTYPE html> <html> <head> <title>Cycle Trails Map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user- scalable=no"> <meta charset="utf-8"> <style> html, body, #map_canvas { width: 100%; height: 1000px; background-color: #2D333C; } #legend { font-family: Helvetica; color: #FFD900; background: rgba(0, 0, 0, 0.6); padding: 25px; margin: 25px; border: 1px solid #FFD900; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> var map; // google map object var markers = []; // we well store the markers here function initialize() { map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 6, center: new google.maps.LatLng(-41.269954, 174.225516), mapTypeId: google.maps.MapTypeId.TERRAIN, <!-- Let's style the map with custom colours and opacity --> styles: [{ featureType: 'poi.business', elementType: ' labels.icon', stylers: [{ visibility: 'on' }, { hue: '#ff00db' }, { lightness: 0 }, { saturation: 0 }] }] }); <!-- create KML layer --> var myKmlOptions = { preserveViewport: true, suppressInfoWindows: true } var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions); var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions); kmlLayer_1.setMap(map); kmlLayer_2.setMap(map); <!-- Asynchronous Loading --> function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; <!-- Let's create the legend --> var iconBase = 'https://i.imgur.com/'; var icons = { travel: { name: 'AA Traveller office', icon: iconBase + '2BNbLmG.png' }, isite: { name: 'I-Site', icon: iconBase + 'kx9a1sc.png' }, accommodation: { name: 'Accommodation', icon: iconBase + 'BJ4o7ad.png' }, camping: { name: 'Camping', icon: iconBase + 'EIcei8n.png' }, food: { name: 'Food and Beverage', icon: iconBase + 'c5aaWcb.png' }, toilets: { name: 'Toilets', icon: iconBase + 'ID2zzXg.png' }, waters: { name: 'Drinking Water', icon: iconBase + '5u3yvH1.png' }, todo: { name: 'Things to do', icon: iconBase + 'L3Z9xWv.png' }, viewing: { name: 'Viewing points', icon: iconBase + 'DTf6oIp.png' } }; // make one infoWindow var infoWindow = new google.maps.InfoWindow(); <!-- Adding the markers now --> function addMarker(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); // bind a to the marker google.maps.event.addListener(marker, 'click', function() { openInfoWindow(marker, feature) // pass in feature as closure }); markers.push({ marker: marker, type: feature.type }); } // generic callback whenever an info window is clicked function openInfoWindow(marker, feature) { // i'm unsure of where you're data will come to populate the infoWindow, it could come from the `feature` object (the same thing that you used to create the marker) infoWindow.setContent('<h3>Type: ' + feature.type + '<h3>'); infoWindow.open(map, marker); // open the infoWindow above the marker. the maps API will bind the close button click for you. } <!-- Add the legend locations --> var features = [ <!-- AA Travel --> { position: new google.maps.LatLng(-36.750002, 174.729471), type: 'travel' }, <!-- I Site --> { position: new google.maps.LatLng(-37.226583, 175.335536), type: 'isite' }, <!-- Accommodation --> { position: new google.maps.LatLng(-36.807404, 175.144404), type: 'accommodation' }, { position: new google.maps.LatLng(-39.808155, 175.474612), type: 'accommodation' }, { position: new google.maps.LatLng(-41.776782, 171.504106), type: 'accommodation' }, { position: new google.maps.LatLng(-43.820004, 172.965288), type: 'accommodation' }, { position: new google.maps.LatLng(-44.626974, 169.317827), type: 'accommodation' }, { position: new google.maps.LatLng(-46.522343, 168.455400), type: 'accommodation' }, <!-- Camping --> { position: new google.maps.LatLng(-36.556301, 174.693964), type: 'camping' }, <!-- Food and Beverage --> { position: new google.maps.LatLng(-38.368372, 176.847826), type: 'food' }, <!-- Water --> { position: new google.maps.LatLng(-39.241622, 174.782397), type: 'waters' }, <!-- Things to do --> { position: new google.maps.LatLng(-40.339016, 176.298510), type: 'todo' }, <!-- Toilets --> { position: new google.maps.LatLng(-42.788153, 172.497240), type: 'toilets' }, { position: new google.maps.LatLng(-41.878568, 173.837572), type: 'toilets' }, <!-- Viewing spots --> { position: new google.maps.LatLng(-43.890775, 171.838061), type: 'viewing' }, { position: new google.maps.LatLng(-37.676004, 178.429858), type: 'viewing' }, { position: new google.maps.LatLng(-39.278658, 173.763491), type: 'viewing' } ]; for (var i = 0, feature; feature = features[i]; i++) { addMarker(feature); } var legend = document.getElementById('legend'); var i = 0; for (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createElement('div'); div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \\'' + key + '\\')"><img src="' + icon + '"> ' + name; legend.appendChild(div); i++; } map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); } function toggleType(elm, event, type) { var on = elm.checked; for (var i = 0; i < markers.length; i++) { if (markers[i].type == type) { markers[i].marker.setMap(on ? map : null); } } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas"></div> <div id="legend"> <h3>Points of Interest</h3> </div> </body> </html>
解决方案2
0 2015-06-09 06:32:09
刚声明的变量infoWindow上方addMarker ，并在其actionListener开启和设置信息窗口的内容
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('Hi');
infoWindow.open(map,this);
});
查看：
var map; // google map object var markers = []; // we well store the markers here function initialize() { map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 6, center: new google.maps.LatLng(-41.269954, 174.225516), mapTypeId: google.maps.MapTypeId.TERRAIN, <!-- Let's style the map with custom colours and opacity --> styles: [{ featureType: 'poi.business', elementType: ' labels.icon', stylers: [{ visibility: 'on' }, { hue: '#ff00db' }, { lightness: 0 }, { saturation: 0 }] }] }); <!-- create KML layer --> var myKmlOptions = { preserveViewport: true, suppressInfoWindows: true } var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions); var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions); kmlLayer_1.setMap(map); kmlLayer_2.setMap(map); <!-- Asynchronous Loading --> function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; <!-- Let's create the legend --> var iconBase = 'https://i.imgur.com/'; var icons = { travel: { name: 'AA Traveller office', icon: iconBase + '2BNbLmG.png' }, isite: { name: 'I-Site', icon: iconBase + 'kx9a1sc.png' }, accommodation: { name: 'Accommodation', icon: iconBase + 'BJ4o7ad.png' }, camping: { name: 'Camping', icon: iconBase + 'EIcei8n.png' }, food: { name: 'Food and Beverage', icon: iconBase + 'c5aaWcb.png' }, toilets: { name: 'Toilets', icon: iconBase + 'ID2zzXg.png' }, waters: { name: 'Drinking Water', icon: iconBase + '5u3yvH1.png' }, todo: { name: 'Things to do', icon: iconBase + 'L3Z9xWv.png' }, viewing: { name: 'Viewing points', icon: iconBase + 'DTf6oIp.png' } }; // make one infoWindow var infoWindow = new google.maps.InfoWindow(); <!-- Adding the markers now --> function addMarker(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); // bind a to the marker google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent('Hi'); infoWindow.open(map,this); }); markers.push({ marker: marker, type: feature.type }); } // generic callback whenever an info window is clicked function openInfoWindow(marker, feature) { // i'm unsure of where you're data will come to populate the infoWindow infoWindow.setContent('ADD CONTENT HERE'); infoWindow.open(map, marker); // open the infoWindow above the marker. the maps API will bind the close button click for you. } <!-- Add the legend locations --> var features = [ <!-- AA Travel --> { position: new google.maps.LatLng(-36.750002, 174.729471), type: 'travel' }, <!-- I Site --> { position: new google.maps.LatLng(-37.226583, 175.335536), type: 'isite' }, <!-- Accommodation --> { position: new google.maps.LatLng(-36.807404, 175.144404), type: 'accommodation' }, { position: new google.maps.LatLng(-39.808155, 175.474612), type: 'accommodation' }, { position: new google.maps.LatLng(-41.776782, 171.504106), type: 'accommodation' }, { position: new google.maps.LatLng(-43.820004, 172.965288), type: 'accommodation' }, { position: new google.maps.LatLng(-44.626974, 169.317827), type: 'accommodation' }, { position: new google.maps.LatLng(-46.522343, 168.455400), type: 'accommodation' }, <!-- Camping --> { position: new google.maps.LatLng(-36.556301, 174.693964), type: 'camping' }, <!-- Food and Beverage --> { position: new google.maps.LatLng(-38.368372, 176.847826), type: 'food' }, <!-- Water --> { position: new google.maps.LatLng(-39.241622, 174.782397), type: 'waters' }, <!-- Things to do --> { position: new google.maps.LatLng(-40.339016, 176.298510), type: 'todo' }, <!-- Toilets --> { position: new google.maps.LatLng(-42.788153, 172.497240), type: 'toilets' }, { position: new google.maps.LatLng(-41.878568, 173.837572), type: 'toilets' }, <!-- Viewing spots --> { position: new google.maps.LatLng(-43.890775, 171.838061), type: 'viewing' }, { position: new google.maps.LatLng(-37.676004, 178.429858), type: 'viewing' }, { position: new google.maps.LatLng(-39.278658, 173.763491), type: 'viewing' } ]; for (var i = 0, feature; feature = features[i]; i++) { addMarker(feature); } var legend = document.getElementById('legend'); var i = 0; for (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createElement('div'); div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \\'' + key + '\\')"><img src="' + icon + '"> ' + name; legend.appendChild(div); i++; } map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); } function toggleType(elm, event, type) { var on = elm.checked; for (var i = 0; i < markers.length; i++) { if (markers[i].type == type) { markers[i].marker.setMap(on ? map : null); } } } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map_canvas { width: 100%; height: 1000px; background-color: #2D333C; } #legend { font-family: Helvetica; color: #FFD900; background: rgba(0, 0, 0, 0.6); padding: 25px; margin: 25px; border: 1px solid #FFD900; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div> <div id="legend"> <h3>Points of Interest</h3> </div>
点击时弹出的Google地图自定义标记（信息窗口）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.