在传单中使用时，可以保留默认的Google Map单击和悬停行为

在普通的Google地图上，用户可以与显示的点（POI）进行交互。具体来说，在悬停的情况下，他们将看到一个指示可列出性的指针，然后单击，他们获得了一个弹出窗口，其中包含有关POI的信息。点击还将从Google地图中生成一个包含一个placID的事件，该事件可用于从有关POI中检索更多信息。

将Google突变体与传单一起使用时，这些默认行为不存在。这是用这个小提琴证明的，它将在下面包含的代码。

<!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地图点击和悬停行为？

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

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

在传单中使用时可以保留默认的Google Map单击和悬停行为吗？

我宁愿说您想重新实现互动性行为，而不是"保留"它，因为它是一个额外的功能。

您应该意识到，您在Google地图上看到的"标记"和文本是"硬编码"的，如栅格瓷砖上的像素（打开您的浏览器网络日志/控制台，您会看到这些瓷砖的请求。瓷砖图像将显示带有POI和文字的基础）。

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

只有那些瓷砖手里拿到了，就不可能说出什么是poi（因为它只是基地中的像素等），因此可以实现任何交互性。

另一方面，Google Maps fetches 在视口中的该区域并行元数据中，这给出了这些POI的位置，文本和交互式区域。在您的网络日志中，您会看到对包含该数据的TXT文件的请求。

因此，它可以可以挂接到Google Maps库中以检索该元数据并在传单中使用它，但是您必须实现此钩子并自己复制交互性。

相关内容

最新更新

热门标签：