Question

我正在尝试在我的网站上实施Google地理编码功能，它会自动显示数据库中的动态地址条目。

以下是我可以从Google示例中获取的JavaScript代码

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

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);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
}
</script>

和html

<div id="map-canvas" style="width: 100%; height: 480px; background:#ccc; position:relative; float:left;"></div>
<div style="position:relative; float:left;">
<input id="address" type="textbox" value="<?=$row['event_location']?>">
<input type="button" value="Encode" onclick="codeAddress()">
</div>

N.B。 $ row ['event_location']是从数据库加载的地址。

这段代码很好用。问题是，它加载了一个默认位置，并且在我使用Encode按钮之前不会显示我的数据库中的地址。

我希望它默认从数据库加载地址。感谢。

- - - - - - - - EDITED

为了响应添加windows onload，我在关闭脚本标记

结束之前添加了此函数

google.maps.event.addDomListener(window, 'load', initialize);

然后我将其更改为codeAddress函数，但它不起作用。

Answer 1

所以你可以在页面之后（即在结束标记体之前）加载函数codeAddress而不是单击按钮。

Answer 2

替换此功能......

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

有了......

    function initialize() {
        geocoder = new google.maps.Geocoder();

        var address = document.getElementById('address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                defaultLocation = results[0].geometry.location;
                map = new google.maps.Map(document.getElementById('map-canvas'),{
                      zoom: 8,
                      center: defaultLocation
                });
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Could not find you on the map, the reason is: ' + status);
            }
        });
    }

php地理编码与动态地址输入

2 个答案: