Question

我想知道是否有人可以帮助我。

我正在尝试将商店定位器与侧边栏放在一起，我正在使用下面的代码，这是我在互联网上找到的内容的合并。

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Maps AJAX + mySQL/PHP Example</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
            type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var map; 
    var markers = []; 
    var infoWindow; 
    var locationSelect; 

    function load() { 
      map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(40, -100), 
        zoom: 4, 
        mapTypeId: 'roadmap', 
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
      }); 
      infoWindow = new google.maps.InfoWindow(); 

      locationSelect = document.getElementById("locationSelect"); 
      locationSelect.onchange = function() { 
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
        if (markerNum != "none"){ 
          google.maps.event.trigger(markers[markerNum], 'click'); 
        } 
      }; 
   } 

   function searchLocations() { 
     var address = document.getElementById("addressInput").value; 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({address: address}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        searchLocationsNear(results[0].geometry.location); 
       } else { 
         alert(address + ' not found'); 
       } 
     }); 
   } 

   function clearLocations() { 
     infoWindow.close(); 
     for (var i = 0; i < markers.length; i++) { 
       markers[i].setMap(null); 
     } 
     markers.length = 0; 

     locationSelect.innerHTML = ""; 
     var option = document.createElement("option"); 
     option.value = "none"; 
     option.innerHTML = "See all results:"; 
     locationSelect.appendChild(option); 
   } 

   function searchLocationsNear(center) { 
     clearLocations();  

     var radius = document.getElementById('radiusSelect').value; 
     var searchUrl = 'loaddistance.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 
     downloadUrl(searchUrl, function(data) { 
       var xml = parseXml(data); 
       var markerNodes = xml.documentElement.getElementsByTagName("marker"); 
       var bounds = new google.maps.LatLngBounds(); 
       for (var i = 0; i < markerNodes.length; i++) { 
         var name = markerNodes[i].getAttribute("name"); 
         var address = markerNodes[i].getAttribute("address"); 
         var distance = parseFloat(markerNodes[i].getAttribute("distance")); 
         var latlng = new google.maps.LatLng( 
              parseFloat(markerNodes[i].getAttribute("lat")), 
              parseFloat(markerNodes[i].getAttribute("lng"))); 

         createOption(name, distance, i); 
         createMarker(latlng, name, address); 
         bounds.extend(latlng); 
       } 
       map.fitBounds(bounds); 
       locationSelect.style.visibility = "visible"; 
       locationSelect.onchange = function() { 
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
         google.maps.event.trigger(markers[markerNum], 'click'); 
       }; 
      }); 
    } 

    function createMarker(latlng, name, address) { 
      var html = "<b>" + name + "</b> <br/>" + address; 
      var marker = new google.maps.Marker({ 
        map: map, 
        position: latlng 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
        infoWindow.setContent(html); 
        infoWindow.open(map, marker); 
      }); 
      markers.push(marker); 
    } 

 function createSidebarEntry(marker, name, address, distance) {
  var div = document.createElement('div');
  var html = '' + name + ' (' + distance.toFixed(1) + ')' + address;
  div.innerHTML = html;
  div.style.cursor = 'pointer';
  div.style.marginBottom = '5px';
  GEvent.addDomListener(div, 'click', function() {
    GEvent.trigger(marker, 'click');
  });
  GEvent.addDomListener(div, 'mouseover', function() {
    div.style.backgroundColor = '#eee';
  });
  GEvent.addDomListener(div, 'mouseout', function() {
    div.style.backgroundColor = '#fff';
  });
  return div;
}
    function createOption(name, distance, num) { 
      var option = document.createElement("option"); 
      option.value = num; 
      option.innerHTML = name + "(" + distance.toFixed(1) + ")"; 
      locationSelect.appendChild(option); 
    } 

    function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
          new ActiveXObject('Microsoft.XMLHTTP') : 
          new XMLHttpRequest; 

      request.onreadystatechange = function() { 
        if (request.readyState == 4) { 
          request.onreadystatechange = doNothing; 
          callback(request.responseText, request.status); 
        } 
      }; 

      request.open('GET', url, true); 
      request.send(null); 
    } 

    function parseXml(str) { 
      if (window.ActiveXObject) { 
        var doc = new ActiveXObject('Microsoft.XMLDOM'); 
        doc.loadXML(str); 
        return doc; 
      } else if (window.DOMParser) { 
        return (new DOMParser).parseFromString(str, 'text/xml'); 
      } 
    } 

    function doNothing() {} 

    //]]> 
  </script> 
  </head> 

  <body style="margin:0px; padding:0px;" onLoad="load()">  
    <div> 
     <input type="text" id="addressInput" size="10"/> 
    <select id="radiusSelect"> 
      <option value="25" selected>25mi</option> 
      <option value="100">100mi</option> 
      <option value="200">200mi</option> 
    </select> 

    <input type="button" onClick="searchLocations()" value="Search"/> 
    </div> 
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div> 
    <table> 
    <tbody> 
      <tr id="cm_mapTR">

        <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div>

        </td>
        <td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>

      </tr> 
    </tbody>
  </table>

  </body> 
</html>

地图呈现并且搜索功能正常，但是我将侧边栏代码从v2 api更改为v3这是本节。

function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '' + name + ' (' + distance.toFixed(1) + ')' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px';
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }

我确实将'GEvent.addDomListener'行更改为'google.maps.event.addListener'，但我仍然遇到使侧边栏工作的问题。有人可能请告诉我我需要做什么才能将其从v2更改为v3。

非常感谢和亲切的问候

Answer 1

您需要先将标记放入全局数组

var gMarkerArr =  new Array();


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


 var locations = data.locations[i];

     marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations.Latitude, locations.Longitude),
                map: map
            });

 gMarkerArr.push(marker); // like this
}

通过链接点击

调用的附加功能

 function Markerclick(index) 
 {
     google.maps.event.trigger(  gMarkerArr[index], 'click');
 }

然后致电 - ＆gt; Markerclick（0）;来自您的HTML链接

希望这会有所帮助......

Answer 2

除了将'GEvent.addDomListener'更改为'google.maps.event.addListener'之外，您还需要更改

'GEvent.trigger（marker，'click'）;' ==＆GT; 'google.maps.event.trigger（marker，'click'）;'

除此之外，该功能看起来很好..

带侧边栏的商店定位器

2 个答案: