Google Maps API v3 上的标记越界答案

【问题标题】：Marker out of bounds on Google Maps API v3Google Maps API v3 上的标记越界
【发布时间】：2013-12-25 00:50:34
【问题描述】：

我正在使用 Google Maps API v3 显示世界地图，它是静态的（不允许缩放或拖动）。在它上面有一个带有自定义图标的可拖动标记，以及一组不同半径的圆圈绑定到它。

实际地图代码为：

    var myLatlng = new google.maps.LatLng(28.283, 13.843);
    var mapOptions = {
      zoom: 2,
      maxZoom:2,
      minZoom:2,
      draggable: 0,
      center: myLatlng,
      streetViewControl: false,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
    };

    map = new google.maps.Map(document.getElementById("mapaGoogle"),
      mapOptions);

    var markerImage = new google.maps.MarkerImage('path/to/imageplaneminiature.png',
    new google.maps.Size(40, 40),
    new google.maps.Point(0, 0),
    new google.maps.Point(18, 20));

    marker = new google.maps.Marker({
      map: map,
      position: myLatlng,
      icon: markerImage,
      draggable: true
    });

然后对于我所拥有的每个圈子：

    planes[1] = new google.maps.Circle({
      map: map,
      radius: 2500000,
      strokeColor: "#cccccc",
      fillOpacity: 0
    });

    planes[1].setMap(map);
    planes[1].bindTo('center', marker, 'position');

这很好用，但我有两个问题：

1) 当用户将标记拖到边界附近时，由于世界是圆形的，半径也显示在另一侧。但它并没有在其中心显示标记，这看起来并不那么酷。看图片：

2) 如果用户将标记拖出地图区域，它仍然是不可见的，用户无法将其带回来。有什么办法可以强制它在视口区域内？

【问题讨论】：

标记似乎只有在不可拖动时才会显示在两侧。

标签： jquery google-maps google-maps-api-3

【解决方案1】：

AFAIK 没有选项可以选择是否在较低缩放级别重复标记。带有 draggable:false 的标记将被重复。

为了防止用户将标记拖出地图边界，我所能想到的就是检查标记位置是否适合地图边界，如果超出边界，则将其移回最后一个位置。

你可以做类似的事情

if (map.getBounds().contains(marker.getPosition())) {
    // marker is within map bounds
}

http://jsfiddle.net/upsidown/c4gaC/

请注意，如果您想阻止用户缩放地图，您还必须设置以下两个选项：

scrollwheel: false
disableDoubleClickZoom: true

编辑：

这是重复标记的hack。它在可拖动的标记下方绘制一个不可拖动的标记，在拖动开始时将其隐藏，并在拖动停止时再次显示。这样您的标记将被重复。

http://jsfiddle.net/upsidown/m76km/

请注意，这将导致 2 个问题：

显示的两个标记中只有一个是可拖动的，这显然令人困惑。
如果使用具有透明度的 PNG 标记图标，这将导致一些显示问题。

不透明度不会成为圆圈的问题，因为您可以将其仅绑定到两个标记之一。

【讨论】：