Question

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

将Leaf Mutant与Leaflet一起使用时，这些默认行为不存在。使用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>

可以制作宣传单地图以展示Google地图点击和悬停行为吗？

Answer 1

可以制作宣传单地图以展示Google地图点击和悬停行为吗？

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

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

我宁愿说你想重新实现互动行为，而不是＆＃34;保留＆＃34;它，因为它是一个额外的功能。

你应该意识到＆＃34;标记＆＃34;您在Google地图上看到的文字和＃34;硬编码＆＃34;作为栅格图块上的像素（打开浏览器网络日志/控制台，您将看到对这些图块的请求。图块图像将显示带有POI和文本的底图）。

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

只有手中的那些瓷砖，不可能知道什么是POI（因为它只是底图中的像素），因此可以实现任何交互性。

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

因此可能可以挂钩到谷歌地图库以检索该元数据并在Leaflet中使用它，但你必须实现这个钩子并自己复制交互性。

在Leaflet中使用时，是否可以保留默认的Google Map点击和悬停行为？

1 个答案: