Question

我有一个混合页面，可让我以3种不同的方式抓取谷歌地图的长途/长途 - 点击地图，进行免费地址搜索和Google地方信息。一切都很好。

这是一个演示页面，一切都在javascript中：

今天早上，Google地方信息框突然无法以任何方式运作。我最初使用了这个例子中的代码：

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

（当我只是将该代码放入测试页面时，它将独立工作。）我的代码在昨晚和今天早上之间没有变化。这是我的代码，注意包括上面列出的3种方法（点击地图，地址搜索和地方自动填充。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, #map_canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<script type="text/javascript">

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var markers = [];
    var latlng = new google.maps.LatLng(33.52, -86.80);
    var mapOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  // Watch for clicks on map, fill lat long boxes when detected, works outside of markers
  google.maps.event.addListener(map, 'click', function(event) {
    var evt = event.latLng;
    console.log('latitude:'+evt.lat()+'; longitude:'+evt.lng()+';');
    document.getElementById("latbox").value = evt.lat();
    document.getElementById("lngbox").value = evt.lng();
  });

  // 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));

// Get single autocomplete result from box
 var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map
  });


  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
//    marker.setIcon(/** @type {google.maps.Icon} */({
//      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(35, 35)
//    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

            document.getElementById("latbox").value = marker.getPosition().lat();
            document.getElementById("lngbox").value = marker.getPosition().lng();
            document.getElementById("textmatch").value = place.name;

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });
// End single autocomplete grab




  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });

}


// Get free text address from textbox, mark on map and autofill lat and long
function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(17);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            document.getElementById("latbox").value = marker.getPosition().lat();
            document.getElementById("lngbox").value = marker.getPosition().lng();
            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("latbox").value = this.getPosition().lat();
                document.getElementById("lngbox").value = this.getPosition().lng();
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
    <style>
      #target {
        width: 345px;
      }
    </style>


</head>

<body onload="initialize()" onunload="GUnload()">
<form name="input" action="index.php" method="post">
<p>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td>Street Address =  </td><td><textarea name="streetaddress" id="address" rows=3 cols=60></textarea></td><td>Lat/long from Gmaps =<br><input type="button" value="Get Long and Lat" onclick="codeAddress()"></td><td>
      <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
      <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
</td></tr>

<tr><td></td></tr>
<tr><td colspan=2>
</td><td></td></tr>
</form>

<table width="100%"><tr><td>

</td><td>
  <input id="pac-input" class="controls" type="text" placeholder="Search Box">
  <div id="map_canvas" style="width: 700px; height: 600px"></div>
</td></tr></table>
</body></html>

Answer 1

能够自己解决这个问题......问题是＆＃34; sensor = true＆＃34;在图书馆宣言中。把它变成假修正了这个问题。

Google商家信息自动填充功能 - 昨晚之后没有结果

1 个答案: