在 Leaflet 中使用时，可以保留默认的 Google 地图点击和悬停行为吗？

Question

在普通的 Google 地图上，用户可以与显示的兴趣点 (POI) 进行交互。具体来说，悬停时他们会看到一个指示可点击性的指针，点击时他们会看到一个弹出窗口，其中包含有关 POI 的信息。点击还将从包含 placeId 的 Google 地图生成一个事件，该事件可用于检索有关 POI 的更多信息。

在 Leaflet 中使用 Google Mutant 时，这些默认行为不存在。这是用 this fiddle 演示的，我将在下面包含它的代码。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script type="text/javascript" src="https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&.js"></script>

    <style type="text/css">
    #googleMap, #leafletMap {
        width: 300px;
        height: 300px;
    }
    </style>

    <title>Leaflet with Google Maps</title>
    <script type='text/javascript'>//<![CDATA[
        window.onload=function(){
        var lat = 38.917855;
        var lng = -77.2210604;
        var zoom = 18;

        var leafletMap = new L.Map('leafletMap', {center: new L.LatLng(lat, lng), zoom: zoom});
        var roads = L.gridLayer.googleMutant({
            type: 'roadmap'
        }).addTo(leafletMap);

        var googleOptions = {
            zoom: zoom,
            center: new google.maps.LatLng(lat, lng),
            mapTypeId: 'roadmap'
        };
        var googleMap = new google.maps.Map(document.getElementById('googleMap'), googleOptions);

        }//]]> 
    </script>
</head>

<body>
    <h1>Google</h1>
    <div id="googleMap"></div>
    <h1>Leaflet</h1>
    <div id="leafletMap"></div>
</body>

</html>

能否制作 Leaflet 地图以展示 Google 地图点击和悬停行为？

Answer 1

Can the Leaflet map be made to exhibit the Google Map click and hover behavior?

是的，这可能是可能的，但那是巨大的工作。

Can default Google Map click and hover behaviors be preserved when used in Leaflet?

我宁愿说你想重新实现交互行为，而不是"preserve"它，因为它是一个额外的功能。

您应该意识到，您在 Google 地图上看到的 "markers" 和文本是 "hard coded" 光栅图块上的像素（打开浏览器网络日志/控制台，您会看到请求到那些图块。图块图像将显示带有 POI 和文本的底图）。

您使用的 Leaflet 插件只是重复使用了这些图像。

只有这些图块在手，无法分辨什么是 POI（因为它只是来自底图的像素），因此无法实现任何交互。

另一方面，Google 地图为视口中的区域并行元数据，它给出了那些 POI 的位置、文本和交互区域。在您的网络日志中，您将看到对包含该数据的 TXT 文件的请求。

因此可能可以连接到 Google 地图库以检索该元数据并在 Leaflet 中使用它，但您必须实现此连接并自己复制交互性。

在 Leaflet 中使用时，可以保留默认的 Google 地图点击和悬停行为吗？

Can default Google Map click and hover behaviors be preserved when used in Leaflet?

google-maps

leaflet

google-places-api