谷歌地图自动完成，即使使用工作代码也无法工作
Googlemap autocomplete not working even with working code
我找到了一些自动完成的代码，它可以工作，就像这个
<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>
我已经放置了自动完成后，我设置了我的地图。但现在自动完成功能不起作用。怎么了？我应该把它放在哪里？
我发现了问题。这就是剧本。
<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个。令人惊讶的是，它起作用了，我仍然不知道为什么。我所有的其他功能也很好用。
相关文章：
- 代码只能在jsfiddle中工作
- 为什么不是'我的函数在解析云代码中工作吗?当我在Angular和Express中测试时，它是有效的
- 谷歌地图Api和JS代码不工作
- 如何检查这个代码点火器php函数是否工作，该函数是否在ajax url中使用
- 为什么这个代码不能正常工作
- Don't工作警报代码jQuery
- addEventListener的Javascript代码不工作！?(单击时打开放大的img）
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小，无法在我的代码中发现错误
- 这个jquery代码是如何工作的
- 代码在angular中未按预期工作
- JavaScript代码未按预期工作
- 为什么jQuery代码段在没有IFrame的情况下可以工作，而在有IFrame时却不能工作
- 谷歌地图自动完成，即使使用工作代码也无法工作
- 需要 RepeatBox 及其行单击事件的工作代码才能在 smartface.io 中跳转到相应的页面上
- 任何人都可以指出我的工作代码或完整的概念图，用于 Angular2 中的 ViewMetadata
- 为什么我可以'不要对这个工作代码进行jsFiddle处理
- 工作代码带来错误addEventListener不是一个函数
- 需要修改此工作代码以在新窗口/选项卡中打开
- jQuery:如何计算和显示列的总和(部分工作代码）
- D3js缩放/拖动在我的代码中不再工作(+代码示例）
