Question

我正在尝试使用谷歌地图从宽广的地图缩放到某个邮政编码，然后在缩放到邮政编码后显示搜索的项目（例如“披萨”）。搜索预设为示例披萨，您需要做的就是键入zipcode。我创建了地图zip缩放代码，但我很难添加搜索功能。我找到了一些最接近我想要的代码，但我可以弄清楚如何删除搜索框并让它搜索预设搜索。（Google Maps API Places Library SearchBox）

这是我的缩放代码

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Change Layer on Zoom in Google Fusion Tables</title>
    <style>

        #map_canvas { height: 650px; width: 850px; }

    </style>
</head>

<body>
<input type="text" id="address" ></input><input onclick="geocode_address();" type="button" value="Zipcode"></input>
    <div id="map_canvas"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>

        var map, countyTable, tractTable, ctyLayer;
        var tractLayers = [];

        var infowindow = new google.maps.InfoWindow({});

    var geocoder = new google.maps.Geocoder();
function geocode_address() {
    var address = document.getElementById('address').value;

    geocoder.geocode( { 'address': address}, function(results, status) {
       map.setCenter(results[0].geometry.location);
       map.setZoom(map.getZoom()+8);
    });
}
function addClickHandler(FTLayer) {
  google.maps.event.addListener(FTLayer, "click", function(event) {
    infowindow.setOptions({pixelOffset:event.pixelOffset, 
                           content:event.infoWindowHtml,
                           position:event.latLng
                          });
    infowindow.open(map);
  });
}

        map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: new google.maps.LatLng( 36.315125,-95.273437),
            zoom: 4,
            mapTypeId: "roadmap",
            streetViewControl: false
        });



</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
</html>

这是我发现的示例代码，我想在没有搜索栏的情况下放入地图缩放代码。

<html>
  <head>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type='text/javascript'>
      var map, infowindow;
      var searchBox;
      var markers = [];

      function initialize() {
        var mapDiv = document.getElementById("map_canvas");
        map = new google.maps.Map(mapDiv, {
          center : new google.maps.LatLng(35, 138),
          zoom : 7,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        infowindow = new google.maps.InfoWindow();
        //Function for search box
        var input = document.getElementById('target');
        searchBox = new google.maps.places.SearchBox(input);

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          var places = searchBox.getPlaces();

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

          markers = [];
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0, place; place = places[i]; i++) {
            var image = new google.maps.MarkerImage('img/pin_blue.png', new google.maps.Size(15, 29), new google.maps.Point(0, 0), new google.maps.Point(8, 29));

            var shadow = new google.maps.MarkerImage('img/pin_shadow.png', new google.maps.Size(33, 29), new google.maps.Point(0, 0), new google.maps.Point(8, 29));

            var shape = {
              coord : [11, 1, 12, 2, 13, 3, 14, 4, 14, 5, 14, 6, 14, 7, 14, 8, 14, 9, 14, 10, 14, 11, 14, 12, 13, 13, 12, 14, 11, 15, 8, 16, 8, 17, 8, 18, 8, 19, 8, 20, 8, 21, 8, 22, 8, 23, 8, 24, 11, 25, 11, 26, 11, 27, 3, 27, 3, 26, 3, 25, 6, 24, 6, 23, 6, 22, 6, 21, 6, 20, 6, 19, 6, 18, 6, 17, 6, 16, 3, 15, 2, 14, 1, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 0, 6, 0, 5, 0, 4, 1, 3, 2, 2, 3, 1, 11, 1],
              type : 'poly'
            };

            var marker = createMarker({
              map : map,
              //icon : image,
              //shadow : shadow,
              //shape : shape,
              title : place.name,
              position : place.geometry.location,
              place_name : place.name
            })

            markers.push(marker);

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

          map.fitBounds(bounds);

        });

        google.maps.event.addListener(map, 'bounds_changed', function() {
          //var bounds = map.getBounds();
          searchBox.bindTo('bounds', map);
        });

      }

      function createMarker(options) {
        var marker = new google.maps.Marker(options);

        //add an infowindow
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(options.place_name);
          infowindow.open(map, marker);
        });

        return marker;
      }


      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body>
    <input type="text" id="target" />
    <div id="map_canvas" style="width: 500px;height:400px"></div>
  </body>
</html>

提前致谢！我会继续工作，如果我发现了什么，我会告诉你。

Google为个人网站映射缩放+搜索集成

0 个答案: