Question

我目前有一系列我正在制作的自定义地图的地方。我一直在尝试，但无法弄清楚如何在标记上添加“点击”弹出框。我希望白色框显示名称并有一个选项，以便一个人可以选择“获取到这里的路线”。有谁知道如何用一个以上的标记实现这个目标？

<!DOCTYPE html>
<head>

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 50% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  var map;
  var marker
  function initialize() {
    var latlng = new google.maps.LatLng(42.098687,-75.917974);
 var restaurants = new Array();
 restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
    var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
   var i = 0; 
 for ( i <0; i < restaurants.length;i++ ){
  var marker = new google.maps.Marker({
        position: restaurants[i],
     map:map,
        title:"Testing!"
    });
  popupDirections(marker);
  }
}
function popupDirections(marker) {
  var infowindow = new google.maps.InfoWindow(
      { content: "tests: "
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>

Answer 1

您正在谈论的弹出框被称为谷歌地图语言的信息窗口。

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("your contents");
});

上面的代码使用您的标记绑定点击事件，并打开包含指定文本的信息窗口。这里标记是标记对象。

希望它有所帮助。

Answer 2

这样做的方法是创建一个全局infowindow，然后一次又一次地重复使用它，这样就可以将infowindow移动到每个标记，并且可以使用setContent方法更改信息窗口的内容。阅读here，可以从api参考站点访问Google Demo。当我为我的网站制作地图时，我遇到了同样的问题，

以下代码应该有效：

<script type="text/javascript">
var map;
var marker;
var infowindow;   //Global infowindow created
function initialize() {
  var latlng = new google.maps.LatLng(42.098687,-75.917974);
  var restaurants = new Array();
  restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
   var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    infowindow = new google.maps.InfoWindow({   //infowindow options set
               maxWidth: 355  
    });

    var i = 0; 
    for ( i <0; i < restaurants.length;i++ ){
           marker = new google.maps.Marker({
                      position: restaurants[i],
                      map:map,
                      title:"Testing!"
               });
            popupDirections(marker);
       }
}

function popupDirections(marker) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}
</script>

如果你想为每个标记单独设置内容（我假设你会这样），你可以将一些内容传递给popupDirections（）函数，并使用字符串修改内容“html”：

function popupDirections(marker, html) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}

如何在自定义Google地图上显示白色弹出框？

2 个答案: