时间戳

首页 > 解决方案 > 试图用谷歌地图 API 创建一个“菱形”

google-maps-api-3 - 试图用谷歌地图 API 创建一个“菱形”

问题描述

我目前正在使用谷歌地图 API 在地图上绘制点。我正在寻找在点之间实现“菱形”效果的最佳方法（见图）。基本上，锭剂的厚度将动态确定。

我能看到的唯一方法是在我的点的末端绘制 2 个圆圈，并在它们之间创建一个没有边框的矩形。我不喜欢这个想法，因为它本质上为我的每条线添加了 3 个多边形，这意味着我必须为每条线添加 3 个点击事件（每个多边形上一个）以显示我想要的数据单击该行时显示。

有没有更好的方法来实现这一目标？

在此处输入图像描述

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

解决方案

只需创建 2 条折线...

function initialize() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 3,
    center: {lat: 20, lng: 0},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 20, lng: -20},
    {lat: 20, lng: 20}
  ];
  
  new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: .3,
    strokeWeight: 20,
    map: map
  });
  
  new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
  });
}

initialize();
#map-canvas {
  height: 200px;
}
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

编辑：

您在评论中提到，您需要将笔划固定在距中心线给定距离处。

我认为您仍然可以使用该技术，因为您可以根据纬度和缩放级别计算地图像素的大小（以米为单位），并且由于笔划的大小也以像素为单位，您应该能够重新计算每次放大/缩小时划线。由于笔划宽度必须是整数，因此它不会 100% 精确，但它应该可以工作。

如果各个折线点或多或少在同一纬度上，它应该可以工作，因为带有墨卡托投影的地图的分辨率取决于纬度。因此，例如，如果您有一条从 -70 到 +70 纬度的大折线，则它不会一直准确。

这是可用于计算 1 个地图像素大小的公式。您需要用map.getCenter().lat()折线中心点替换。

// Calculate the width of 1 map pixel in meters
let scale = 156543.03392 * Math.cos(map.getCenter().lat() * Math.PI / 180) / Math.pow(2, map.getZoom());

不幸的是，这种方法存在问题。尽管没有记录，但折线笔划宽度不能大于 32px。

var map;
var polyBounds;
var polyStroke;
var polyWidth = 50; // Width in meters

function initialize() {

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: {
      lat: 20,
      lng: 0
    },
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [{
      lat: 20,
      lng: -0.5
    },
    {
      lat: 20,
      lng: 0.5
    }
  ];

  polyStroke = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: .3,
    strokeWeight: 0,
    map: map
  });

  new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    map: map
  });

  polyBounds = new google.maps.LatLngBounds();

  for (var i = 0; i < flightPlanCoordinates.length; i++) {

    polyBounds.extend(flightPlanCoordinates[i]);
  }

  google.maps.event.addListenerOnce(map, 'idle', setStroke);
  google.maps.event.addListener(map, 'zoom_changed', setStroke);
}

function setStroke() {

  // Calculate the width of 1 map pixel in meters
  let scale = 156543.03392 * Math.cos(polyBounds.getCenter().lat() * Math.PI / 180) / Math.pow(2, map.getZoom());

  polyStroke.setOptions({
    strokeWeight: Math.ceil(polyWidth / scale)
  });
}

initialize();
#map-canvas {
  height: 200px;
}
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

因此，除非您发现这些值允许您的用例，否则这将不是一个可行的解决方案......

您在评论中指出的解决方案（如何在 JavaScript 中围绕折线绘制多边形？）可能仍然是您的最佳选择。

推荐阅读