body缩放导致图层点击位置不准确

[baokuanze]

大屏中页面可能要适配所有屏幕，在body上加了缩放规则，导致地图点击位置不准确
代码如下，希望能解决这种类似问题

<title>MapVGL</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #map_container { width: 100%; height: 100%; margin: 0; position: absolute; } </style> <script src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=3xmDkquFXUd60h4Oxh0YwA8lK2GPPuan"></script> <script src="https://mapv.baidu.com/build/mapv.min.js"></script> <script> /** * 初始化地图 */

  /* global BMapGL */
  /* global darkStyle */

  function initMap(options) {
    options = Object.assign(
      {
        tilt: 60,
        heading: 0,
      },
      options
    );
    var map = new BMapGL.Map("map_container", {
      restrictCenter: false,
      style: { styleJson: options.style },
    });
    map.enableKeyboard();
    map.enableScrollWheelZoom();
    map.enableInertialDragging();
    map.enableContinuousZoom();

    map.setDisplayOptions(
      options.displayOptions || {
        indoor: false,
        poi: true,
        skyColors: options.skyColors || [
          "rgba(5, 5, 30, 0.01)",
          "rgba(5, 5, 30, 1.0)",
        ],
      }
    );
    if (options.center && options.zoom) {
      let center = options.center;
      if (center instanceof Array) {
        center = new BMapGL.Point(options.center[0], options.center[1]);
      }
      map.centerAndZoom(center, options.zoom);
    }

    map.setTilt(options.tilt);
    map.setHeading(options.heading);
    return map;
  }
</script>
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js"></script>

<script> /* global BMapGL */

  /* global mapv */

  /* global mapvgl */

  /* global initMap */

  /* global whiteStyle */

  var map = initMap({
    tilt: 30,
    heading: 0,
    center: [116.395645, 39.929986],
    zoom: 5,
    skyColors: [
      // 地面颜色
      "rgba(226, 237, 248, 0)",
      // 天空颜色
      "rgba(186, 211, 252, 1)",
    ],
  });

  var view = new mapvgl.View({
    map: map,
  });
  var cities = ["西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
  var colors = ["#f00", "#ff0", "#0ff", "#00f"];
  var data = cities.map((city, index) => {
    var cityCenter = mapv.utilCityCenter.getCenterByCityName(city);
    return {
      geometry: {
        type: "Point",
        coordinates: [cityCenter.lng, cityCenter.lat],
      },
      color: colors[index % 4],
      // 圆的半径
      size: 10,
    };
  });

  var simpleLayer = new mapvgl.CircleLayer({
    // 默认类型，绘制简单圆
    type: "simple",
    borderWidth: 40,
    borderColor: "#000000",
    enablePicked: true,
    selectedColor: "#f0f", // 选中项颜色
    autoSelect: true, // 根据鼠标位置来自动设置选中项
    onClick: (e) => {
      // 点击事件
      console.log(
        "body的缩放，导致 onClick 位置不准，不能获取到准确的点击信息",
        e
      );
    },
  });
  view.addLayer(simpleLayer);
  simpleLayer.setData(data.slice(0, 3));
</script>

[clearlovehuan]

请问这个问题解决了么，我也碰到了一样的问题，body缩放后绘制圆的中心点也会偏移

[babalrlr]

#153
我参考他的思路，把百度地图放到iframe里处理，就没这个问题了。