Question

我在css-scaled容器中插入了Google Maps地图。由于项目细节，这是无法避免的。我需要跟踪此地图上的点击坐标，但是缩放地图会设置不正确的坐标（请参阅代码段。）

这怎么可以修复？我现在没有想法:(

def assign_user_to_role_and_group
  self.category_role = CategoryRole.where(name: 'Client').first
  self.category_managementgroup = CategoryManagementgroup.where(name: 'Client Group').first
end

const map = new google.maps.Map(document.querySelector('#map'), {
  center: {lat: 48.7, lng: 31},
  zoom: 6
});

google.maps.event.addListener(map, 'click', (event)=> {
  const marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });
});

html, body {
    height: 100%;
  }
.container {
  width: 800px;
  height: 600px;
  transform: scale(1.2);
  }
#map {
  width: 100%;
  height: 100%;
  }

Answer 1

好的，想出了如何纠正修复（这是转型中心为0,0时）

function point2LatLng(point, transformScale, map) {
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    var scale = Math.pow(2, map.getZoom());
    var worldPoint = new google.maps.Point(point.x / transformScale / scale + bottomLeft.x, point.y / transformScale / scale + topRight.y);
    return map.getProjection().fromPointToLatLng(worldPoint);
  }

gmaps.event.addListener(this.map, 'click', (event)=> {
          let transformMatrix = window.getComputedStyle(this.$el.closest('.container')).transform.match(/^matrix\((.+)\)$/)[1].split(', ');
          let transformScale = parseFloat(transformMatrix[0]);
          var marker = new gmaps.Marker({
              position: point2LatLng(event.pixel, transformScale, this.map),
              map: this.map
          });
        });

Answer 2

This answer有效，但是缩放地图效果非常糟糕，很多与坐标相关的功能都没有正确地进行。但有一种解决方法：将地图放在虚拟iframe中：

    const iframe = this.$el.querySelector('iframe');
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write('<div id="map" style="width: 100%; height: 100%"></div>');
    iframe.contentWindow.document.close();

    const mapContainer = iframe.contentWindow.document.querySelector('#map');
    const map = new gmaps.Map(mapContainer, {
              center: {lat: 48.7, lng: 31},
              zoom: 6
            });

没有x源限制，您可以根据需要使用iframe内容进行操作。有了它，即使缩放父容器，一切正常

Answer 3

我也遇到了这个问题，上述解决方案对我不起作用，原因是：

@Terion的“ point2LatLng”功能似乎没有将标记放置在正确的位置
@Terion使用虚拟iframe意味着您无法拖动地图，这严重限制了用户体验。

但是我确实找到了一种方法：我将map div放入一个容器，该容器实际上已用此JS进行了非缩放，并在所有其他JS之后加载：

//Function: Unscale the map Container
function unscaleMap(scale){
    var unscale = Math.round(10000/(scale * 1))/10000,
        rescale = Math.round(10000 * (100 / unscale))/10000;
    document.getElementById("fs_mapContainer").style.transform = "scale("+unscale+")";
    document.getElementById("fs_mapContainer").style.width = rescale + "%";
    document.getElementById("fs_mapContainer").style.height = 80 * scale + "vh";
}

和CSS：

.map_container {position: relative; transform-origin: 0 0; box-sizing: border-box;}
#map {width: 100%; height: 100%}

css-scaled谷歌地图点击不正确的坐标

3 个答案: