此页面未正确加载 Google 地图.有关技术详细信息，请参阅 JavaScript 控制台

本文介绍了此页面未正确加载 Google 地图.有关技术详细信息，请参阅 JavaScript 控制台的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Google Map API 中的此代码，但它不起作用

<头><title>地方自动完成</title><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><风格>html，正文{高度:100%；边距:0；填充:0；}#地图 {高度:100%；}.controls {边距顶部:10px；边框:1px 实心透明；边界半径:2px 0 0 2px；box-sizing: 边框框；-moz-box-sizing: 边框框；高度:32px；大纲:无；box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);}#pac-输入{背景色:#fff;字体系列:Roboto；字体大小:15px；字体粗细:300；左边距:12px；填充:0 11px 0 13px；文本溢出:省略号；宽度:300px；}#pac-输入:焦点{边框颜色:#4d90fe；}.pac-容器{字体系列:Roboto；}#类型选择器{颜色:#fff;背景颜色:#4d90fe；填充:5px 11px 0px 11px；}#类型选择器标签{字体系列:Roboto；字体大小:13px；字体粗细:300；}</风格><身体><input id="pac-input" class="controls" type="text"placeholder="输入位置"><div id="type-selector" class="controls"><input type="radio" name="type" id="changetype-all" checked="checked"><label for="changetype-all">All</label><input type="radio" name="type" id="changetype-buildingment"><label for="changetype-establishment">建立</label><input type="radio" name="type" id="changetype-address"><label for="changetype-address">地址</label><input type="radio" name="type" id="changetype-geocode"><label for="changetype-geocode">Geocodes</label>

<!DOCTYPE html> <html> <head> <title>Place Autocomplete</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 300px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } </style> </head> <body> <input id="pac-input" class="controls" type="text" placeholder="Enter a location"> <div id="type-selector" class="controls"> <input type="radio" name="type" id="changetype-all" checked="checked"> <label for="changetype-all">All</label> <input type="radio" name="type" id="changetype-establishment"> <label for="changetype-establishment">Establishments</label> <input type="radio" name="type" id="changetype-address"> <label for="changetype-address">Addresses</label> <input type="radio" name="type" id="changetype-geocode"> <label for="changetype-geocode">Geocodes</label> </div> <div id="map"></div> <script> // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places"> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13 }); var input = /** @type {!HTMLInputElement} */( document.getElementById('pac-input')); var types = document.getElementById('type-selector'); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ map: map, anchorPoint: new google.maps.Point(0, -29) }); autocomplete.addListener('place_changed', function() { infowindow.close(); marker.setVisible(false); var place = autocomplete.getPlace(); if (!place.geometry) { window.alert("Autocomplete's returned place contains no geometry"); return; } // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } marker.setIcon(/** @type {google.maps.Icon} */({ url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(35, 35) })); marker.setPosition(place.geometry.location); marker.setVisible(true); var address = ''; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '') ].join(' '); } infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); infowindow.open(map, marker); }); // Sets a listener on a radio button to change the filter type on Places // Autocomplete. function setupClickListener(id, types) { var radioButton = document.getElementById(id); radioButton.addEventListener('click', function() { autocomplete.setTypes(types); }); } setupClickListener('changetype-all', []); setupClickListener('changetype-address', ['address']); setupClickListener('changetype-establishment', ['establishment']); setupClickListener('changetype-geocode', ['geocode']); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>