如何限制 Google 我的地图 iFrame 中的控件

Posted 2023-03-05

【中文标题】如何限制 Google 我的地图 iFrame 中的控件

【英文标题】：How to limit controls in Google MyMaps iFrame

【发布时间】：2018-07-13 11:12:34

【问题描述】：

我正在尝试将 Google MyMaps iFrame 嵌入网站。为了让网站用户更简单，我想在 MyMap 中禁用自定义要素（多边形）的选择。

我尝试了不同的选项，在下面的 sn-p 中我尝试添加

&ctrl=false

进入源代码，这给出：

<iframe src="https://www.google.com/maps/d/embed?mid=1_oHvw6cNxTcQdsVcW7jw-BJh1hhRtM5l&ctrl=false"   ></iframe>

但不起作用。

有没有办法让地图包含我的自定义多边形，而不允许选择该多边形？

【问题讨论】：

从您的 MyMap 中提取数据并将其显示在 Google Maps javascript API v3 地图上。

【参考方案1】：

用一个简单的例子来扩展这个：

是的，如果您想实现您描述的功能，您需要通过 JavaScript API 创建地图。

为了在地图上绘图，您需要在地图上定义形状的每个点的lat 和lng。

为了举例，我创建了一个简单的地图，它在怀俄明州和科罗拉多州绘制了一个正方形，将州封装在突出显示的区域中。

这里是代码方法。首先，您需要通过标记形状的坐标来定义边界。我通过创建变量COborder 和WYborder 来做到这一点。

 var COborder = [
      lat: 41.00244, lng: -102.05165,
      lat: 41.00056, lng: -109.05016,
      lat: 36.99909, lng: -109.04521,
      lat: 36.99295, lng: -102.04204,
    ]

    var WYborder = [
      lat: 40.99752, lng: -111.04705,
      lat: 41.00477, lng: -104.05151,
      lat: 44.99831, lng: -104.057,
      lat: 45.0017, lng: -111.05255

定义形状后，您需要在地图上将它们显示为多边形。

 map.data.add( geometry: new google.maps.Data.Polygon([COborder]))
 map.data.add( geometry: new google.maps.Data.Polygon([WYborder]))

如果你想看一个活生生的例子，我设置了一个 JSFiddle here.