个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 google map API 的新手。在我的 javascript 项目中，当我有地点的纬度/经度并将鼠标悬停在它们或标记上(如下图所示)时，我需要显示带有图像、地点名称和地点地址的地点悬停卡，这些地点从谷歌地图 API 返回p>
将鼠标悬停 
map = new google.maps.Map(mapContainer, {
center: {lat: -34.397, lng: 150.644},
zoom: 13
});
let infowindow = new google.maps.InfoWindow();
const request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
fields: ['name', 'formatted_address', 'place_id', 'geometry']
};
const service = new google.maps.places.PlacesService(map);
navigator.geolocation.getCurrentPosition(function (position) {
const currentPos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
marker = new google.maps.Marker({
position: currentPos,
map: map
});
service.getDetails(request, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
marker.addListener('click', function() {
infowindow.open(map, marker);
// I want to show the info window here with image from google map
console.log(place);
});
}
});
map.setCenter(currentPos);
}
最佳答案
要获取所查询地点的图像，您可以使用 photo 字段，该字段是一个包含 PlacePhoto 对象的数组。您还可以在信息窗口的内容中显示该地点的名称、评级和user_ ratings_total。看看Google's documentation了解更多信息。
此外，如果您想在将鼠标悬停在标记上时显示信息窗口，则需要在事件监听器中使用“鼠标悬停”而不是“单击”。
尝试以下 jsfiddle 查看可用于指导的工作示例:https://jsfiddle.net/rnLm3wd4/
完整代码如下。
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.infowindow-container {
width: 330px;
}
.inner {
display: inline-block;
position: absolute;
top: 0;
padding: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
let marker;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 13
});
let infowindow = new google.maps.InfoWindow();
const request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
fields: ['name', 'formatted_address', 'place_id', 'geometry', 'photo', 'rating', 'user_ratings_total']
};
const service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
map.setCenter(place.geometry.location)
marker = new google.maps.Marker({
position: place.geometry.location,
map: map
});
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
infowindow.setContent("<div class='infowindow-container'>" +
"<img src='" + place.photos[0].getUrl({ maxWidth: 200, maxHeight: 150 }) +
"'></img><div class='inner'><h4>" + place.name +
"</h4><p>Rating: " + place.rating + "</p><p>Total reviews: " + place.user_ratings_total + "</p></div></div>");
});
marker.addListener("mouseout", function() {
infowindow.close();
});
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=places" async defer></script>
</body>
</html>
希望这有帮助!
关于javascript - 谷歌地图API : How to show hover card when hover to a place/marker by using javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57450457/
26
4
0
leaflet：一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档： https://leafletjs.cn/reference.html 官网（英文）： ht
我是一名优秀的程序员,十分优秀！