Question

我有以下代码：

<?php //include_once("connectionmarker.php");?>
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Cherrybird</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
         <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
   (function() {

    window.onload = function() {

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(50.8967,-1.40225),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

    var customIcons = {
      Now: {
        icon: 'img/fourmarker.png',

      },
      Soon: {
        icon: 'img/marker.png',

      }
    };




        // Creating a global infoWindow object that will be reused by all markers
        var infoWindow = new google.maps.InfoWindow();

        var list = document.getElementById('list');

        $.getJSON("connectionmarker.php", function(data) { 

         for (var i = 0; i < data.length; i++ ){

            // Looping through the JSON data

                var datanew = data[i] 
                //alert (data[i].Availibility);
                latLng = new google.maps.LatLng(datanew.Lat, datanew.Lon);

                    var iconimage = datanew.Availibility;
                    var icon = customIcons[iconimage] || {};

                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    icon: icon.icon,
                    title: datanew.Propertynanu
                });
                // add items
                var listItem= document.createElement('li')
                listItem.className = "content";
                listItem.innerHTML = "House:" + datanew.Propertynanu + "<br />" + datanew.Postcode + "<br />" + datanew.Availibility + "<br />" ;
                list.appendChild(listItem);


                // Creating a closure to retain the correct data
                (function(marker, datanew) {

                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function(e) {

                    //"Id:" + data[i].Id + "<br /> Property Name/Number:" + data[i].Propertynanu + "<br /> Rooms:" + data[i].Rooms
                        infoWindow.setContent("House:" + datanew.Propertynanu + "<br />" + datanew.Postcode + "<br />" + datanew.Availibility + "<br />" );
                        infoWindow.open(map, marker);
                    });


                })(marker, datanew);




            }
        });
    }

})();


  </script>

  </head>

  <body>
    <div id="map" style="width: 1000px; height: 500px"></div>
    <ul id="list"></ul>
  </body>

</html>

我想要做的是动态地将列表项添加到div中的页面，然后允许用户单击相关的infoWindow将在地图上显示的每个div。我已经使用openlayers完成了这项工作，但现在需要使用Google地图。

我已经将列表添加到页面中，其中包含以下内容：

// add items
                var listItem= document.createElement('div')
                listItem.className = "content";
                listItem.innerHTML = "House:" + datanew.Propertynanu + "<br />" + datanew.Postcode + "<br />" + datanew.Availibility + "<br />" ;
                list.appendChild(listItem);

下一步是让它在列表中单击时显示相关标记的infoWindow。有人能帮忙吗。

Answer 1

这是一个制作可点击侧边栏的示例（从Mike Williams的v2教程翻译而来）：

http://www.geocodezip.com/v3_MW_example_map3.html

关键是保留一系列标记，以便您可以访问它们以打开信息窗。

Answer 2

注册将显示信息窗口的事件侦听器。它基本上与从标记运行的代码相同。

Google Map - 使用标记列表显示特定标记弹出窗口

2 个答案: