Question

<!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并没有像Google地图库那样水平重复标记。

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

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

Answer 1

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

Answer 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));
}

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

在ImageMapType上水平重复Google Maps Marker

2 个答案: