当前位置：文江博客话题详情

如何将地图区域作为用户输入扑来？

发布于 2025-02-13 21:46:03 字数 82 浏览 0 评论 0原文

我设法从代码上实现了Google地图上的图形区域，但也希望用户绘制其特定区域，然后在任何给定的地图上显示。

任何帮助将不胜感激。谢谢你！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

極樂鬼 2025-02-20 21:46:03

有关交互式绘图检查：

https://developers.google.com/maps.com/maps.maps.maps.maps.maps.maps.maps.maps.maps /documentation/javascript/示例/绘图工具

有一个多边形工具：

您可能有兴趣用代码绘制多线线。阅读更多信息：

https://developers.google.com/maps/maps/maps/documentation/documentation/javascript/javascript/形状

为此，您需要一系列经度/纬度坐标。下面的示例取自Google API的文档：

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;

For interactive drawing check:

https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

There is a polygon tool:

You might be interested into drawing a Polyline with code. Read more at:

https://developers.google.com/maps/documentation/javascript/shapes

For that you would need an array of Longitude/Latitude coordinates. The sample below is taken from the Google API's documentation:

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;

回复收藏 0 原文

~没有更多了~