绘制一个矩形 google.maps.Polygon 给定其中心点和尺寸

2024-03-22

我正在编写一个 PHP 脚本,它接受 XML 输入,解析它,然后显示(最终旋转)矩形和椭圆区域。

因为区域可以旋转,所以我必须使用google.maps.Polygon并不是Rectangle.

为了处理旋转我希望使用谷歌地图多边形旋转 https://github.com/ahmadnassri/google-maps-polygon-rotate库(该部分稍后提供)。

我的问题是:根据给定的 XML 输入,我只知道矩形中心点的坐标和区域的尺寸(宽度和高度)。

目前我只是将中心点显示为标记:

我的问题是:如何绘制一个矩形google.maps.Polygon当只知道中心点的经纬度和宽度、高度时?

IE。如何计算4个端点的纬度和经度?

我可以以某种方式使用google.maps.geometry.spherical.computeOffset() https://developers.google.com/maps/documentation/javascript/reference#spherical方法在这里?


一种选择是使用 v3 移植版本Mike Williams 的 v2 Eshapes 库 http://econym.org.uk/gmap/eshapes.htm

    // ==- Tilted rectangles ===
    var point = new google.maps.LatLng(44, -78);
    var tiltedRectangle1 = google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 4, "#000000", 3, 1, "#ffffff", 1, {}, true);
    var tiltedRectangle2 = google.maps.Polyline.Shape(point, 50000, 10000, 50000, 10000, 30, 4, "#000000", 3, 1, {}, true);
    tiltedRectangle1.setMap(map);
    tiltedRectangle2.setMap(map);

函数 google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60,定义一个边长为 100000 米 x 20000 米的矩形,旋转 -60 度,第二次调用定义一个相同大小的旋转 30 度。

工作小提琴 http://jsfiddle.net/bLcLzkg2/

工作片段:

var map = null;

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(44, -78),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"),
    myOptions);
    // ==- Tilted rectangles ===
    var point = new google.maps.LatLng(44, -78);
    var tiltedRectangle1 = google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 4, "#000000", 3, 1, "#ffffff", 1, {}, true);
    var tiltedRectangle2 = google.maps.Polyline.Shape(point, 50000, 10000, 50000, 10000, 30, 4, "#000000", 3, 1, {}, true);
    tiltedRectangle1.setMap(map);
    tiltedRectangle2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy" 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross

google.maps.Polyline.Shape = function (point, r1, r2, r3, r4, rotation, vertexCount, colour, weight, opacity, opts, tilt) {
    if (!colour) {
        colour = "#0000FF";
    }
    if (!weight) {
        weight = 4;
    }
    if (!opacity) {
        opacity = 0.45;
    }
    var rot = -rotation * Math.PI / 180;
    var points = [];
    var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
    var step = (360 / vertexCount) || 10;

    var flop = -1;
    if (tilt) {
        var I1 = 180 / vertexCount;
    } else {
        var I1 = 0;
    }
    for (var i = I1; i <= 360.001 + I1; i += step) {
        var r1a = flop ? r1 : r3;
        var r2a = flop ? r2 : r4;
        flop = -1 - flop;
        var y = r1a * Math.cos(i * Math.PI / 180);
        var x = r2a * Math.sin(i * Math.PI / 180);
        var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
        var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;

        points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
    }
    return (new google.maps.Polyline({
        path: points,
        strokeColor: colour,
        strokeWeight: weight,
        strokeOpacity: opacity
    }))
}
google.maps.Polygon.Shape = function (point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) {
    var rot = -rotation * Math.PI / 180;
    var points = [];
    var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
    var step = (360 / vertexCount) || 10;

    var flop = -1;
    if (tilt) {
        var I1 = 180 / vertexCount;
    } else {
        var I1 = 0;
    }
    for (var i = I1; i <= 360.001 + I1; i += step) {
        var r1a = flop ? r1 : r3;
        var r2a = flop ? r2 : r4;
        flop = -1 - flop;
        var y = r1a * Math.cos(i * Math.PI / 180);
        var x = r2a * Math.sin(i * Math.PI / 180);
        var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
        var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;

        points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
    }
    return (new google.maps.Polygon({
        paths: points,
        strokeColor: strokeColour,
        strokeWeight: strokeWeight,
        strokeOpacity: Strokepacity,
        fillColor: fillColour,
        fillOpacity: fillOpacity
    }))
}
html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk""></script>
<div id="map"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

绘制一个矩形 google.maps.Polygon 给定其中心点和尺寸 的相关文章

  • Google Map API V3 - 单击标记以叠加形式显示更多信息内容(如 Google 地图中一样)

    我们使用 Google Map Api V3 在 HTML 容器中加载 google 地图 我们有一个位置搜索表格 提交后 我们将获取可用位置并在地图中设置标记 加载标记后 单击每个标记时我们需要显示标题 地址详细信息和设计 就像我们在谷歌
  • 谷歌地图搜索框在地图外面

    我正在使用 Google Maps API 并且插入了一个具有自动完成功能的搜索表单 问题是输入框卡在地图中 我无法将其显示在地图之外 div style margin top 100px background 00a6d6 width 1
  • 谷歌地图转弯 GPS 导航用于 ios 开发

    我的应用程序需要包含逐段 GPS 导航 任何人都可以告诉如何集成谷歌地图进行逐段 GPS 导航 我可以在android开发中找到它 但我无法从谷歌地图的iOS开发文档中找到导航 https developers google com map
  • 如何在谷歌地图的边缘创建填充

    我有一个非常繁忙的谷歌地图应用程序 我正在尝试在地图的外边缘周围创建一个 缓冲区 以便谷歌地图命令不会把东西放在那里 我的解决方案是创建不可见的 div 并将它们作为控件添加到地图中 每个边缘一个 这似乎很有效 因为所有谷歌命令都会看到它们
  • 谷歌地图动画符号(到达路径的目的地点后停止图标)

    我正在做一个学校项目 我正在使用 Google Map API API 很棒 但我需要一些代码方面的帮助 到达目的地后 我希望图标保留在那里 而不应该再次重复整个路径 function initMap var map new google
  • 从 Android 应用程序调用 Google 地图应用程序以获取行车方向

    我需要使用外部谷歌地图应用程序显示行车方向我找到了这个链接http developer android com guide appendix g app intents html http developer android com gui
  • Android Google Maps API OnLocationChanged 仅调用一次

    每当我的位置发生变化时 我都会尝试更新我的相机 然而 onLocationChanged 只被调用一次 当我随后在模拟器中发送新位置时 不会调用 onLocationChanged 我已经尝试了几个小时了 但似乎无法修复它 public c
  • 解释为什么没有船的空 scenekit 场景只有一个节点和 2.73K 多边形

    为什么移除船舶后的空 scenekit 场景只有一个节点和 2 73K 多边形数 如果我展开统计视图 会看到两个节点和 5 46K 个多边形 它必须与统计视图有关 但为什么有这么多多边形 为什么这个视图会出现在场景内部 一个空的 Scene
  • Android 数组列表如何使用

    所以我有一个标记列表 我需要弄清楚如何处理它们 我已经搜索了几个小时 但没有明确说明如何使用这些信息或如何从列表中获取信息 请解释或分解我的代码并告诉我它到底是如何工作的 这样我就可以在地图上设置标记 这就是我将标记添加到列表中的方法 现在
  • Google 放置 API:从 CID 到参考?

    我的目标 用已知的商业地点填充数据库 以便生成包含这些地点的地图 我坚持使用 已知地点 因为我的用户只会搜索数据库中的地点 我不想在地图上重新创建商业地点作为标记 因此纬度和经度不足以识别地点 因为这些地点已经在 Google 地图上提供了
  • 仅在 MarshMallow(6.0 和 6.0.1)上使用 MapActivity 进行 MapView 会使应用程序崩溃

    我正在使用 MapActivity 扩展我的活动 以动态实现 MapView 其中包含显示 mapView 的片段 public abstract class BaseHomeActivity extends MapActivity 我已经
  • 二进制 XML 文件行 #:膨胀类片段时出错:仅在 Android (6.0)-Marshmallow 上

    我无法在 Android M 上显示 google 地图 这是布局 xml
  • 黑白 PNG 转 SVG

    我有一个河流 土地掩码来区分土地与河流 湖泊 该文件的大小为 W 43 200x H 21 600 由于 RAM 立即填满 因此无法打开该文件 我已将文件分成 3600 3600 块 它们可以正常打开 然而 我试图在谷歌地图中绘制陆地上的文
  • 如何将自定义 POI 添加到谷歌地图导航

    我是 Android 系统的快乐用户 并且经常使用 Google 地图导航 betta 到目前为止 您可以在开车时在地图上添加具有不同 POI 商店 银行 加油站等 的图层 我的问题是是否有一个 API 可以添加您自己的图层 带有您自定义的
  • 使用 leaflet.js 在点周围添加设定大小的正方形多边形

    有点奇怪 希望有人能帮忙 在传单中 一旦用户输入了纬度 经度并向地图添加了一个点 我希望能够在该点周围添加一个 10 公里的正方形 我尝试四处寻找计算方法来找到 x 公里外的正方形角点 但没有挖出任何东西 但肯定有更简单的方法 有人有想法吗
  • Google Places Api 排名=距离不起作用[重复]

    这个问题在这里已经有答案了 我使用 Google Places api 只获取距我所在位置最近的一些地点 但有些结果根本不显示 例如 tbilisimarriot 和 CourtyardbyMarriot 结果 而且列表也无法正确显示从最近
  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map
  • 从鼠标位置获取地图纬度经度

    我正在尝试将鼠标在谷歌地图上的位置转换为 LatLng 对象 我看到很多关于通过谷歌地图 点击 事件等获取位置的帖子 如下所示 google maps event addListener map click function event m
  • Google Map Android API v2 无法在 Play 商店应用程序中显示地图

    我正在与Google Map Android API v2在 Android 应用程序中 它可以很好地与未签名的应用程序在不同的设备上 但是 当我签署 apk 并将应用程序上传到 Play 商店时 下载的应用程序显示白屏而不是地图 您使用什
  • 如何免费使用谷歌路线API

    我使用 Google Directions Api 的限制是每天 2500 条路线查询 而且是免费的 一切正常 现在 当它明确写入时 在请求 api 时 它会突然出现此错误https developers google com maps d

随机推荐

  • PYTHON 中的希腊语编码

    我正在尝试存储一个字符串 并在 python 中使用 nltk 对它进行标记后 但我无法理解为什么在对它进行标记后 它创建一个列表 我看不到列表中的字符串 有人可以帮我吗 这是代码 a b nltk word tokenize a b xc
  • 从数组中查找唯一的值组合,过滤掉任何重复的对

    使用 php 我希望找到一组指定长度的唯一组合 同时确保多个组合中不存在两个相同的值 例如 如果我想使用此数组查找 3 个值的所有唯一组合 如果 3 个值不可能 则回退到 2 个值的组合 array array array 1 2 arra
  • 是否可以在 OCaml 解释器中使用箭头键?

    每次我在解释器中使用这些键时 我都会不断出现如下符号 D C 我在 ZSH 中使用 Linux Mint 12 但是在 Ubuntu 中使用 bash 得到了相同的结果 另外 ssh 中也是同样的情况 库存 OCaml 顶层没有内置行编辑功
  • AJAX 错误:类型错误:在此上下文中无法访问“参数”、“被调用者”和“调用者”

    我正在系统上进行 API 调用并收到此错误 我可以使用具有相同 URL 的curl 和 Postman 获得响应 但在使用 Angular 的 http get 方法时 safari 会抛出此错误 这也将在生产中发挥作用 该错误仅在开发过程
  • mongodb-go-driver/bson 结构到 bson.Document 编码

    我正在与https github com mongodb mongo go driver https github com mongodb mongo go driver和 目前正在尝试实现此类结构的部分更新 type NoteUpdate
  • 为什么我的活动没有看到观察到的对象发生变化?

    我是 Android 开发新手 我正在尝试通过 MVVM 架构了解实时数据 我试图让主要活动识别出属于活动视图模型的对象何时发生变化 我创建了一个简单的登录活动 它从用户名和密码字段中获取文本并将它们传递给视图模型的登录函数 然后该函数将数
  • 将 UIImagePickerControllercameraOverlayView 放置在相机预览顶部

    我想向 UIImagePickerController 添加覆盖层 但我只需要它覆盖相机预览 而不是顶部或底部的相机控件 我找不到任何方法来做到这一点 因为每个设备上的顶部 底部控件高度都不同 我之前在其他应用程序上看到过这样做 任何指导表
  • OpenCV Android - 将 MatOfPoint 转换为 Mat

    我想将使用 Imgproc findContours 找到的 MatOfPoint 转换为 二进制 Mat 我知道有一种方法可以进行反向转换 只需使用构造函数 MatOfPoint Mat m 但是是否有内置方法可以进行此转换 如果不是 逐
  • 如何使用 VS2019 解决此 MSB6006 csc.exe 错误 (-2146232797)?

    我刚刚将 VS2019 社区版更新到版本 16 7 2 我的项目开始无法构建 可能是链接步骤 并出现此错误 之前构建得很好 我认为是在 v16 6 something 上 gt Severity Code Description Proje
  • 为jqgrid的每一列添加过滤器

    我有一个jqgrid显示员工的详细信息 我想在每一列中添加一个过滤器 用户可以使用该过滤器输入公司名称 网格显示与网格中的过滤器匹配的所有员工行 谷歌搜索了很多但没有成功 任何参考示例 链接都会有帮助 当您在文本框中键入测试用例的名称时 您
  • 单元格pyqt中的小部件对齐

    我正在 PyQT4 和 Python 2 7 中开发一些工具 但遇到了一个小问题 我有 3 个按钮存储在小部件中 该小部件位于表格 QTableWidget 的单元格中 所以我的问题是我无法将小部件与单元格顶部对齐 并且工具无法将行高调整为
  • 如何遵循 powershell 中的快捷方式

    在 powershell 中 您使用cd dir进入目录dir But if dir是目录的快捷方式 cd dir and cd dir lnk两者都会给出错误 说该目录不存在 那么我该如何遵循这条捷径呢 在Linux中cd dir 正常工
  • 如何爆掉 yeoman index.html 缓存

    当我部署 Angular 应用程序的新版本时 旧版本仍然存在 只是 修复的解决方法是对浏览器进行 硬 刷新 这不是一个可接受的解决方案 我在我的项目中使用 Yeoman 生成器角度 我看了看Gruntfile js并看到它执行了一个在构建期
  • 如何通过 stackexchange api 调用检索 stackoverflow 标签使用计数?

    我想通过 StackExchange API 检索 Ruby 或 Java 等语言的 标签使用计数 基本上我想通过 API 调用检索这些数字 https stackoverflow com tags https stackoverflow
  • 检测是否只给出整数的程序是否进入无限循环

    program to detect whether only integer has been given or not int main int a b s printf Enter two proper number n BEGIN s
  • 如何在 Azure 虚拟机中伪造 OpenGL?

    我想在我的 Azure VM Windows Server 2008 中运行一些需要 OpenGL 2 0 的程序 然而 虚拟机没有视频硬件 我如何才能让程序相信我有足够好的视频卡 如果我没有虚拟显卡 我该如何在云中进行所有开发呢 您可以放
  • Mongo / Mongoose 聚合 - $redact 和 $cond 问题

    我很幸运能够得到另一个SO问题的精彩答案Mongo Mongoose 按日期聚合 https stackoverflow com questions 43864813 mongo mongoose aggregating by date来自
  • 静态多态性定义和实现[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我对这个概念有一些疑问静态多态性我有时听说 您可能主要在 C 上下文中解释它们 但我希望在适用的情况下提供与语言无关的答案 因此标记
  • 新的空 iOS 应用程序存在数十处内存泄漏

    在一款新的 从头开始的单视图 iOS 应用程序上使用 Leaks Instruments 工具报告了 23 起泄漏 这似乎不对 我错过了什么吗 重复运行会产生不同的泄漏计数 从 16 到 35 重现步骤遵循此屏幕截图 类似的未回答的问题发布
  • 绘制一个矩形 google.maps.Polygon 给定其中心点和尺寸

    我正在编写一个 PHP 脚本 它接受 XML 输入 解析它 然后显示 最终旋转 矩形和椭圆区域 因为区域可以旋转 所以我必须使用google maps Polygon并不是Rectangle 为了处理旋转我希望使用谷歌地图多边形旋转 htt