谷歌地图API -自动建议表单文本字段

Google map API - AutoSuggest form textfield

本文关键字：表单文本字段 API 谷歌地图更新时间：2023-09-26

我使用下面的代码。我试着用一个标记和一个信息窗口创建一个地图，我想有一个文本字段来写一个地址，并得到从该地址到标记的方向。我想，当你写一个地址在文本字段出现在上面建议的地方从谷歌。我希望我解释好我的问题，有人帮助我。

var geocoder;
var directionsService;
var directionsDisplay;
var latlng = new google.maps.LatLng(37.396746, 21.677257);   
var infowindow = new google.maps.InfoWindow({
        content:"<center><strong>Apollo Camping</strong></center><br/>"+ 
                "<center>Πως θα έρθετε</center>"+ 
                "Διεύθυνση: <input id='clientAddress' type='text' onFocus='geolocate()' placeholder='Εισάγετε τη διεύθυνσή σας' size=22>"+
                "<center><input type='button' onClick=getDir() value='Λήψη οδηγιών'></center>"
    });
function initialize() {
var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Atlanta/Sandy Springs',
    clickable: true
});

    infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function () {
});
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: false
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));

}
function getDir() {
geocoder.geocode({
    'address': document.getElementById('clientAddress').value
},
function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var origin = results[0].geometry.location;
        var destination = latlng;
        var request = {
            origin: origin,
            destination: destination,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    } else {
        document.getElementById('clientAddress').value =
            "Directions cannot be computed at this time.";
    }
});
}
initialize();

这是javascript，我在html中调用它。我在等你的回复，希望有人能明白我的意思。

提前感谢大家!

从#clientAddress

在infowindow的domready上创建自动补全:

google.maps.event.addListener(infowindow,'domready',function(){
 //create the autocomplete
 var ac=new google.maps.places
        .Autocomplete(document.getElementById('clientAddress'));
 //run getDir when the place changes
 google.maps.event.addListener(ac, 'place_changed', getDir);
});