ImageMapType 上的水平重复谷歌地图标记答案

【问题标题】：Horizontal repeating Google Maps Marker on ImageMapTypeImageMapType 上的水平重复谷歌地图标记
【发布时间】：2014-07-19 02:48:13
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <title>Image map types</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var moonTypeOptions = {
  getTileUrl: function(coord, zoom) {
      var bound = Math.pow(2, zoom);
      return 'full-out' +
          '/' + zoom + '/' + coord.x + '/' +
          (bound - coord.y - 1) + '.png';
  },
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 6,
  minZoom: 1,
  radius: 1738000,
  name: 'Moon'
};

var moonMapType = new google.maps.ImageMapType(moonTypeOptions);


function initialize() {
  var myLatlng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    center: myLatlng,
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

      </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

我有上面的代码来渲染一个 19 mb 的自定义大 16834 * 16834 图像，该图像使用 gdal2tiles 和 gdal_translate 分解为图块。简而言之，我拥有所有相应的瓷砖。上面的代码可以完美地渲染图像和不同的缩放级别。但是，当我添加标记时，它会以较低的缩放级别显示多次。我希望标记不要水平重复。

有没有办法避免水平重复标记？目前，我正在使用不水平重复标记的 Leaflet.js 作为谷歌地图库。

我想使用谷歌地图，因为它的稳定性和受欢迎程度。

我使用的是 Ubuntu 14.04 作为操作系统。

【问题讨论】：

标签： javascript css html google-maps google-maps-api-3

【解决方案1】：

将标记的optimized-选项设置为false

【讨论】：

设置上面的变量可以完成这项工作，但是由于图像很小并且没有水平重复，因此在平移时标记会移动到另一个位置。我认为，使用传单很好，因为我已经厌倦了破解谷歌地图。谢谢:)
Leaflet 是一个很好的库，当您不需要任何 google 服务时，它是一个非常好的选择（尺寸更小，IMO 平移/缩放时性能更好，并且与隐私相关的问题可能更少 -问题）
或者，设置 draggable: true 也可以，但是你的标记是可拖动的

【解决方案2】：

还有这个问题的朋友可以看看我的解决方案。

1- 将地图缩放设置为 (2) 并添加标记位置（纬度、经度），即

  var minZoomLevel = 2;
  map.setZoom(minZoomLevel);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < result.length; i++){
        var latlng = new google.maps.LatLng(result[i].Lat, result[i].Lng);
        bounds.extend(latlng);
    });

2- 在缩放更改时附加事件侦听器，即

google.maps.event.addListener(map, 'zoom_changed', function() {
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
    });

3- 附加一个中心更改的侦听器（成功了），即

google.maps.event.addListener(map, 'center_changed', function() 
{ 
   checkBounds(bounds);
}



function checkBounds(allowedBounds) {
    if(allowedBounds.contains(map.getCenter())) {
        return;
    }
    var mapCenter = map.getCenter();
    var X = mapCenter.lng();
    var Y = mapCenter.lat();

    var AmaxX = allowedBounds.getNorthEast().lng();
    var AmaxY = allowedBounds.getNorthEast().lat();
    var AminX = allowedBounds.getSouthWest().lng();
    var AminY = allowedBounds.getSouthWest().lat();

    if (X < AminX) {X = AminX;}
    if (X > AmaxX) {X = AmaxX;}
    if (Y < AminY) {Y = AminY;}
    if (Y > AmaxY) {Y = AmaxY;}

    map.setCenter(new google.maps.LatLng(Y,X));
}

每次更改中心时，它都会检查您的点并将地图限制在特定区域。设置缩放将仅显示一个世界图块，并且检查绑定将限制水平滚动，这就是您的标记将在地图中仅显示一次的方式，根据您的条件设置缩放以适合！

【讨论】：