Question

我已经关注了许多谷歌文章，解释了如何使用谷歌地图，以及标记聚类。

但是我一直在尝试将Place Search Box集成到代码中。我有位置框看起来正确和自动填充。由于某种原因，它只是不缩放到该位置。我认为这只是一个我看不到的简单问题。我在下面输入了我的代码。任何帮助将不胜感激。

＆＃13;

    function load() {

                 var cluster = [];
                infoWindow = new google.maps.InfoWindow();         

                 var map = new google.maps.Map(document.getElementById("map"), {
                        center: new google.maps.LatLng(51.843791, -2.197041),
                        zoom: 10,
                        mapTypeId: 'hybrid'
                      });
                      
                      // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));
    
var infowindow = new google.maps.InfoWindow();

              // Read the data from example.xml
               downloadUrl("../phpsqlajax_genxml3.php", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                
        for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address + "</b> <br/>" + type;
          var icon = customIcons[type] || {};
          
           // create the marker
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
      });
          google.maps.event.addListener(marker, 'click', (function(marker, i, html) {
                        return function() {
                            infowindow.setContent('<div style=height:80px;overflow:none>'+html+'</div>');
                            infowindow.open(map, marker);
                        }
                    })(marker, i, html));
          cluster.push(marker);
        }
        var mc = new MarkerClusterer(map,cluster);
      });
    }


    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    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, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
      <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
  </body>

</html>

＆＃13;

感谢您的评论。我试图在代码中插入缺少的部分，但它仍然没有缩放到选定的位置。有什么我需要拿出来的吗？

＆＃13;

function load() {

                 var cluster = [];
                infoWindow = new google.maps.InfoWindow();         

                 var map = new google.maps.Map(document.getElementById("map"), {
                        center: new google.maps.LatLng(51.843791, -2.197041),
                        zoom: 10,
                        mapTypeId: 'hybrid'
                      });
                      
                      // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));
    
     // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });
    
var infowindow = new google.maps.InfoWindow();

              // Read the data from example.xml
               downloadUrl("../phpsqlajax_genxml3.php", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                
        for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address + "</b> <br/>" + type;
          var icon = customIcons[type] || {};
          
           // create the marker
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
      });
          google.maps.event.addListener(marker, 'click', (function(marker, i, html) {
                        return function() {
                            infowindow.setContent('<div style=height:80px;overflow:none>'+html+'</div>');
                            infowindow.open(map, marker);
                        }
                    })(marker, i, html));
          cluster.push(marker);
        }
        var mc = new MarkerClusterer(map,cluster);
      });
    }


    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    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, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
      <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
  </body>

</html>

＆＃13;

Answer 1

您遗漏了example中的代码（与地图上的结果有关的部分）：

  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });

谷歌地图api v3与地方搜索框无法正常工作

1 个答案: