我找到了一些自动完成的代码，它就像这样
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
function initialize() {
var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
<input id="address" type="text" size="50"/>
这在项目中完全适用于自动完成。
但是当我在我的实际项目中实现它时，它不起作用，我不知道在哪里放这些代码。
这是我的完整项目代码。一切正常，但自动完成无法正常工作
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfJKrk9pQNoNTIGTzj6f0jLXL78ryRnxQ&sensor=false">
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/directions/output?parameters"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
<script>
var myCenter = new google.maps.LatLng(3.213912, 101.727202); /
var newmarker; //global variable to set new marker
var map;
var newlat;
var newlng;
var newmarkerpos;
var rendererOptions = {
draggable: true
};
var start;
var end;
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
//var infowindow1 = new google.maps.InfoWindow({
// content: '<div id="infowindow1" style="CSS.css"></div>'
//});
function initialize() {
var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input);
var mapProperty = {
center: myCenter,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
overviewMapControl: true
};
map = new google.maps.Map(document.getElementById("googleMap")
, mapProperty);
var input = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(input);
var infowindow = new google.maps.InfoWindow({
content: '<div id="infowindow" style="CSS.css">We are here!</div>'
});
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE,
icon: '../Images/Icon4.png'
});
marker.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionspanel'));
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(17);
map.setCenter(marker.getPosition());
});
function placeMarker(location) {
if (newmarker) {
newmarker.setPosition(location);
newmarker.setVisible(true);
} else {
newmarker = new google.maps.Marker({
position: location,
map: map,
icon: '../Images/Icon4.png',
//draggable: true,
});
}
newlat = location.lat();
newlng = location.lng();
newmarkerpos = new google.maps.LatLng(newlat, newlng);
}
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
google.maps.event.addDomListener(home, 'click', function () {
map.setZoom(17);
map.setCenter(myCenter)
});
}
function cal() {
start = new google.maps.LatLng(3.213912, 101.727202);
end = new google.maps.LatLng(newmarkerpos.lat(), newmarkerpos.lng());
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
newmarker.setVisible(false);
}
function clearmap() {
newmarker.setVisible(false);
newmarkerpos = null;
directionsDisplay.setMap(null);
document.getElementById("directionspanel").innerHTML = "";
document.getElementById('address').value = "";
}
function geocode() {
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var geolat = results[0].geometry.location.lat();
var geolng = results[0].geometry.location.lng();
start = new google.maps.LatLng(3.213912, 101.727202);
end = new google.maps.LatLng(geolat, geolng);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
newmarker.setMap(null);
map.setCenter(results[0].geometry.location);
newmarker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
zoom: 15,
icon: '../Images/Icon4.png',
draggable: true,
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Our Location</h1>
<div id="googleMap" style="width:800px; height:450px;">
</div>
<!-- <div id="dvdistance" style="width:400px; height:100px; border:solid">
see ///***
</div>-->
<div id="geocoding">
<input id="address" type="text" placeholder="Enter an address" size="33" />
<input type="button" value="geocode" onclick="geocode()" />
</div>
<button type="button" id="home" style:"CSS.css" >HOME</button>
<button type="button" id="clearmap" onclick="clearmap()" style:"CSS.css">CLEAR MAP</button>
<input type="button" id="cal" onclick="cal()" value="GET DIRECTION" />
<div id="directionspanel" style:"CSS.css"></div>
</body>
</html>
我在设置地图后放置了自动完成功能。 但现在汽车完成无法正常工作。 有什么问题？ 我应该把它放在哪里？
答案 0 :(得分：0)
我发现了这个问题。这是剧本。
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfJKrk9pQNoNTIGTzj6f0jLXL78ryRnxQ&sensor=false"> <!--key is registred at google console-->
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
我删除了所有其他脚本，只留下了这些2.令人惊讶的是它有效，我仍然不知道为什么。我的所有其他功能也都很有效。