javascript - Google Maps Places Javascript API
问题描述
我正在做一个项目,我需要在同一页面上显示 2 个 Google 地图位置。当我只显示一个地方时一切正常,一旦我添加第二个,第一个停止显示,一次只显示一个,如果我禁用第一个,它将显示第二个。如果有人可以帮助我,我是 Javascript 的初学者。请注意,这只有一次我的 API 密钥,当我拥有两次时,我从谷歌地图中得到了一个错误。
<HTML>
<div id="map1" style="height:500px;">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap"></script>
<script>
function initMap() {
var map1 = new google.maps.Map(document.getElementById('map1'), {
center: {
lat: 40.0527839,
lng: -74.163964
},
zoom: 15
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map1);
service.getDetails({
placeId: 'ChIJ-Wn_paSDwYkREENXsJ--cng'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map1,
position: place.geometry.location
});
map1.setCenter(place.geometry.location);
map1.addListener('tilesloaded', function() {
infowindow.setContent('<div> <strong>' + place.name + ' ' +
place.formatted_address + '</strong></div>' +
place.opening_hours.weekday_text[6] + '<BR>' +
place.opening_hours.weekday_text[0] + '<BR>' +
place.opening_hours.weekday_text[1] + '<BR>' +
place.opening_hours.weekday_text[2] + '<BR>' +
place.opening_hours.weekday_text[3] + '<BR>' +
place.opening_hours.weekday_text[4] + '<BR>' +
place.opening_hours.weekday_text[5]);
});
infowindow.open(map1, marker);
}
});
}
</script>
</div>
<div id="map" style="height:500px;">
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.866,
lng: 151.196
},
zoom: 15
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJ5zCkBzpFwokRlW13makMfEM'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
map.setCenter(place.geometry.location);
map.addListener('tilesloaded', function() {
infowindow.setContent('<div><strong>' + place.name + ' ' +
place.formatted_address + '</strong></div>' +
place.opening_hours.weekday_text[6] + '<BR>' +
place.opening_hours.weekday_text[0] + '<BR>' +
place.opening_hours.weekday_text[1] + '<BR>' +
place.opening_hours.weekday_text[2] + '<BR>' +
place.opening_hours.weekday_text[3] + '<BR>' +
place.opening_hours.weekday_text[4] + '<BR>' +
place.opening_hours.weekday_text[5]);
});
infowindow.open(map, marker);
}
});
}
</script>
</div>
</html>
解决方案
为了帮助您了解如何实施 xomena 的建议,请查看此工作 jsfiddle。
完整代码如下:
<div id="map1" style="height:500px;"></div>
<div id="map2" style="height:500px;"></div>
<script>
function initMap() {
var map1 = new google.maps.Map(document.getElementById('map1'), {
center: {
lat: 40.0527839,
lng: -74.163964
},
zoom: 15
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map1);
service.getDetails({
placeId: 'ChIJ-Wn_paSDwYkREENXsJ--cng'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map1,
position: place.geometry.location
});
map1.setCenter(place.geometry.location);
map1.addListener('tilesloaded', function() {
infowindow.setContent('<div> <strong>' + place.name + ' ' +
place.formatted_address + '</strong></div>' +
place.opening_hours.weekday_text[6] + '<BR>' +
place.opening_hours.weekday_text[0] + '<BR>' +
place.opening_hours.weekday_text[1] + '<BR>' +
place.opening_hours.weekday_text[2] + '<BR>' +
place.opening_hours.weekday_text[3] + '<BR>' +
place.opening_hours.weekday_text[4] + '<BR>' +
place.opening_hours.weekday_text[5]);
});
infowindow.open(map1, marker);
}
});
var map2 = new google.maps.Map(document.getElementById('map2'), {
center: {
lat: -33.866,
lng: 151.196
},
zoom: 15
});
var infowindow2 = new google.maps.InfoWindow();
var service2 = new google.maps.places.PlacesService(map2);
service2.getDetails({
placeId: 'ChIJ5zCkBzpFwokRlW13makMfEM'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker2 = new google.maps.Marker({
map: map2,
position: place.geometry.location
});
map2.setCenter(place.geometry.location);
map2.addListener('tilesloaded', function() {
infowindow2.setContent('<div><strong>' + place.name + ' ' +
place.formatted_address + '</strong></div>' +
place.opening_hours.weekday_text[6] + '<BR>' +
place.opening_hours.weekday_text[0] + '<BR>' +
place.opening_hours.weekday_text[1] + '<BR>' +
place.opening_hours.weekday_text[2] + '<BR>' +
place.opening_hours.weekday_text[3] + '<BR>' +
place.opening_hours.weekday_text[4] + '<BR>' +
place.opening_hours.weekday_text[5]);
});
infowindow2.open(map2, marker2);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>
希望这可以帮助!
推荐阅读
- php - 为什么 Laravel 会重命名我上传的图片的文件扩展名?
- javascript - ajax 响应追加到选择选项
- javascript - 如何在nodejs中裁剪屏幕截图或图像(.png)?
- asp.net-4.0 - 在 PCF 服务注册表中注册外部托管的应用程序
- ruby-on-rails - nil:NilClass (NoMethodError) Ruby on Rails 的未定义方法“%”
- list - 如何在颤动的列表中获取目录的内容
- c# - 我使用了使用 android studio 使用相同的调用方法声明的事件回调函数,并在 c# 中寻找等效的代码示例
- node.js - 通过节点和快递运行服务器时出错
- templates - Go html/template 自动 json 编码
- spring-boot - org.hibernate.exception.JDBCConnectionException:无法获取 JDBC 连接