Question

我正在使用google places autocomplete api，现在我想获取该地址的地理编码并在地图上显示该区域。这是我的代码......

<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="searchTextField" type="text" size="50">
</body>

我知道google geocde api但我真的不知道该怎么做。我在wordpress中做了这一切。任何人都有这个想法???

Answer 1

看起来就像你需要的那样：

<style>
#map-canvas {
    width: 500px;
    height: 500px;
}
</style>

然后，JS

function initialize() {
    // initial zoom and position
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(-25.3, 133.8)
    };

    // create Map instance
    var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

    // get input reference
    var input = document.getElementById('searchTextField');

    // create instance of autocomplete
    var autocomplete = new google.maps.places.Autocomplete(input);

    // listen for changes
    google.maps.event.addListener(autocomplete, 'place_changed', function() {

        // get the selected place
        var place = this.getPlace();

        // if there's a geometry available
        if (place.geometry) {

            // move the map to the position
            map.panTo(place.geometry.location);

            // update the zoom
            map.setZoom(15);

            // log the position
            console.log(place.geometry.location.lat(),place.geometry.location.lng() )
        }


    })
}

更多信息：https://developers.google.com/maps/documentation/javascript/places-autocomplete

使用谷歌将api与google geocode api放在一起

1 个答案: