GoogleMapAPI：如何使用javascript在悬停到某个位置/标记时显示悬停卡_Javascript_Google Maps

GoogleMapAPI：如何使用javascript在悬停到某个位置/标记时显示悬停卡

javascript google-maps

GoogleMapAPI：如何使用javascript在悬停到某个位置/标记时显示悬停卡,javascript,google-maps,Javascript,Google Maps,我是谷歌地图API的新手。在我的javascript项目中，我需要显示带有图像、地名和地址的地方悬停卡，当我有位置的lat/lng并悬停在上面或像下图这样的标记上时，这些信息会从google map API返回放置悬停要获取查询位置的图像，可以使用photo字段，该字段是包含PlacePhoto对象的数组。您还可以在信息窗口的内容中显示该场所的名称、评级和用户评级。请查看以了解更多信息此外，如果希望在将鼠标悬停在标记上时显示信息窗口，则需要在事件侦听器中使用“鼠标悬停”而不是“单击” 尝

我是谷歌地图API的新手。在我的javascript项目中，我需要显示带有图像、地名和地址的地方悬停卡，当我有位置的lat/lng并悬停在上面或像下图这样的标记上时，这些信息会从google map API返回

放置悬停

要获取查询位置的图像，可以使用

photo

字段，该字段是包含

PlacePhoto

对象的数组。您还可以在信息窗口的内容中显示该场所的

名称

、

评级

和

用户评级

。请查看以了解更多信息

此外，如果希望在将鼠标悬停在标记上时显示信息窗口，则需要在事件侦听器中使用“鼠标悬停”而不是“单击”

尝试以下JSFIDLE查看一个可用于指导的工作示例：

完整代码如下

<!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>


地图
#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
.infowindow容器{
宽度：330px；
}
.内部{
显示：内联块；
位置：绝对位置；
排名：0；
填充：10px；
}
让地图；
让标记；
函数initMap（）{
map=new google.maps.map（document.getElementById（“map”）{
缩放：13
});
让infowindow=new google.maps.infowindow（）；
常量请求={
placeId:'ChIJN1t_tdeuemsrusoyg83fy4'，
字段：['name'、'formatted_address'、'place_id'、'geometry'、'photo'、'rating'、'user_ratings_total']
};
const service=new google.maps.places.PlacesService（地图）；
service.getDetails（请求、功能（位置、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
地图.设置中心（地点.几何.位置）
marker=新的google.maps.marker({
位置：place.geometry.location，
地图：地图
});
marker.addListener（'mouseover'，function（）{
信息窗口。打开（地图、标记）；
infowindow.setContent（“”）+
“”+place.name+
“评分：“+place.Rating+”
总评论数：“+place.user\u ratings\u Total+””；
});
marker.addListener（“mouseout”，function（））{
infowindow.close（）；
});
}
});
}

希望这有帮助

API没有提供这一点。DIY。重新打开，因为代码已添加。谢谢你，埃文，这是我正在寻找的答案，你真的救了我一命。很高兴听到你这么说！：）

<!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>