如何在Google MyMaps iFrame中限制控件

Question

我正在尝试将Google MyMaps iFrame嵌入到网站中。为了让网站用户更简单，我想在MyMap中禁用定制功能(多边形)的选择。

我尝试使用不同的选项，在下面的片段中尝试添加

&ctrl=false

在来源中，这提供了：

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

但不起作用。

是否有一种方法可以让地图包含我的自定义多边形，而不允许选择该多边形？

Answer 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 这里。