谷歌的地方API标记不会显示在地图上
问题描述:
无论我尝试的标记都不会显示出来。谷歌的地方API标记不会显示在地图上
页面背后的想法是,如果你点击地图上的半径周围的餐馆将出现。
我使用谷歌Chrome和验证码:
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script>
<script>
var map;
var infoWindow;
var request;
var service;
var markers = [];
function initialize() {
var myLatLng = new google.maps.LatLng(52.3666187, 4.8949654);
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 13
});
request = {
location: myLatLng,
radius: 8047,
types: ['restaurants']
};
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
google.maps.event.addListener(map, 'rightclick', function(event) {
map.setCenter(event.latLng)
clearResults(markers)
var request = {
location: event.latLng,
radius: 8047,
types: ['cafe']
};
service.nearbySearch(request, callback);
})
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
markers.push(createMarker(results[i]));
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.AddListener(marker, 'click', function() {
infoWindow.setContent(place.name);
infoWindow.open(map, this);
});
return marker;
}
function clearResults(markers) {
for (var m in markers){
markers[m].setMap(null)
}
markers = []
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html,body, #map{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
`
凡说MY_API_KEY API密钥放置。
答
我得到一个javascript错误,发布代码:Uncaught TypeError: google.maps.event.AddListener is not a function
。当我确定标记出现时。
代码片段:
var map;
var infoWindow;
var request;
var service;
var markers = [];
function initialize() {
var myLatLng = new google.maps.LatLng(52.3666187, 4.8949654);
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 13
});
request = {
location: myLatLng,
radius: 8047,
types: ['restaurants']
};
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
google.maps.event.addListener(map, 'rightclick', function(event) {
map.setCenter(event.latLng)
clearResults(markers)
var request = {
location: event.latLng,
radius: 8047,
types: ['cafe']
};
service.nearbySearch(request, callback);
})
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
markers.push(createMarker(results[i]));
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(place.name);
infoWindow.open(map, this);
});
return marker;
}
function clearResults(markers) {
for (var m in markers) {
markers[m].setMap(null)
}
markers = []
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>
有没有在控制台中的任何消息? –
可能相关:http://*.com/questions/38209843/google-map-autocomplete-api-not-adding-address-options/38235239#38235239 –
Dr.Molle你是对的,非常感谢! – Aerosteon