javascript - 为什么我无法使用 Google 地图搜索公立学校和私立学校?
问题描述
我想显示公立学校或私立学校,两者都有不同的标记。我想知道为什么我对公立学校或私立学校的搜索不起作用?是因为api键吗?或者关于我的代码?
搜索功能不能很好地配合。有时当我搜索一个位置时,它会将我引向大海。我在一个工作链接中获得了我的代码,但是当我复制并在我身边运行它时,它并没有很好地工作。
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Search Box</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#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: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<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.
// 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 initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icons = {
'Public school': {
icon: 'http://i68.tinypic.com/xcnnz4.png'
},
'Private school': {
icon: 'http://i67.tinypic.com/2utkz8k.png'
}
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBawDPz1seR1vu-Fw62CDRjmMU6B_oDOZ4&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
公立或私立学校的结果应该有不同的标记
解决方案
当我尝试使用给定的 API 密钥运行您的代码时,我在控制台中收到此错误:
您已超出此 API 的每日请求配额。如果您没有设置自定义每日请求配额,请验证您的项目是否有一个有效的结算帐户: http: //g.co/dev/maps-no-account 有关使用限制和 Google Maps JavaScript API 服务的更多信息,请参阅: https ://developers.google.com/maps/documentation/javascript/usage
您需要设置并启用计费以增加您的 API 请求限制。启用计费后,您可以增加 API 请求限制,它应该可以工作。
重要提示:您应该撤销您在此处发布的 API 密钥,并在启用计费后生成不同的 API 密钥。您通常不希望使用您在公共站点上发布的相同 API 密钥,否则其他人可能会窃取它并代表您发起请求。
我对您的代码做了一些小的修改,您可以通过运行以下代码片段来查看错误:
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icons = {
'Public school': {
icon: 'http://i68.tinypic.com/xcnnz4.png'
},
'Private school': {
icon: 'http://i67.tinypic.com/2utkz8k.png'
}
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
initAutocomplete();
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#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: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBawDPz1seR1vu-Fw62CDRjmMU6B_oDOZ4&libraries=places.js"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
推荐阅读
- paypal - Paypal - 为一个订单请求多个授权
- python - 读取包含大量 url 的文本文件,每行一个并下载 url
- linux - /usr/bin/java 的 Docker 映像生成错误
- amazon-web-services - 如何在结束与 amazon chime sdk 的会议后关闭网络摄像头
- webrtc - 如何正确处理 webrtc 中的视频约束
- python - 我的 virtualenvwrapper 安装有什么问题?
- python - 有没有办法让我的 python selenium 机器人在某个时间自行启动
- javascript - 如何从 Node.js Lambda 函数向 SNS 主题发送消息
- java - 如何在 Jpa Hibernate Query 中将数字数组作为参数传递?
- java - 将这些转换为 Java?