绘制一个矩形 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 给定其中心点和尺寸 的相关文章

  • 是否可以在不点击的情况下显示多个标记的多个信息窗口?

    我想在谷歌地图中显示多个标记的多个信息窗口 信息窗口应该在不点击标记本身的情况下显示 是否可以 经过研究 我了解到将标记设置为地图视图选定标记可以使信息窗口显示而无需点击它 但是 不能一次选择多个标记作为地图视图的选定标记 有什么可以做的吗
  • 谷歌地图 API V3。无法为 TRANSIT 方向创建自定义折线

    我无法在 Google API 上为公交路线创建自定义折线 仅渲染部分路线 而不是全部 它适用于驾驶 步行和骑自行车 但不适用于公共交通 不知道我到底错过了什么 如果有人遇到同样的问题 请帮忙 我在小提琴中做了一个例子 http jsfid
  • Google Fusion Tables With Maps - 将表字段链接到地图信息窗口

    我几乎是使用 Google Fusion Tables maps 的新手 我们有一个包含公司名称和地址的企业名录 我可以获得每个位置的地理编码地图标记 与表 设施名称 列并排显示 如何对设施名称进行编码 以便用户可以单击公司 设施名称并跳转
  • 根据已知的纬度和经度点在图像上放置点的尝试失败

    我为这个含糊的标题道歉 我真的想不出更好的方法来总结它 非常欢迎提出建议 我正在开发一个实际上不需要谷歌地图的项目 它只会为这个项目带来额外的开销 但是 到目前为止 我不知道如何在没有谷歌地图的情况下做到这一点 如果我要将平面图的图形叠加层
  • Android 在谷歌地图上绘制带箭头的折线和方向路径

    I have added polylines but not able to add arrow with direction on google map should be display as below And when it zoo
  • 从 google 地图 api v3 获取英文地址

    我使用谷歌地图 API v3 来获取某个点的坐标和地址 但谷歌返回法语地址 这是我用来获取地址的脚本 如何强制谷歌地图以英语返回结果 var map var geocoder var mapOptions center new google
  • android 地图 v2 在片段中重新打开时崩溃

    谷歌地图 v2 android 第一次加载 然后我切换到其他片段 当我返回地图片段时它会崩溃 我已附上下面的代码 我真的很感谢任何帮助 提前致谢 fragmentMain 中的映射代码 public class FragmentMain e
  • 在 Java 中旋转多边形

    我正在编写的程序在屏幕上绘制多个星星 并给它们随机的方向和速度 星星会从面板边缘反弹并留在里面 我需要让星星在移动时旋转 我尝试了很多事情 但我无法弄清楚 下面是我用来绘制星星并移动它们的代码 附加信息 星星位于名为 星星 的集合中 我写了
  • 谷歌地图返回空指针异常

    当我尝试在片段上显示地图时 它返回空指针异常 我已将所有内容添加到清单中的每个权限中 我正在附加片段文件 XML 文件和日志目录 Chatffragment java public class ChatFragment extends Fr
  • Google Maps API v3 在地图加载后不会禁用滚轮

    我正在网站上实现谷歌地图 一切都工作得很好 除了地图加载后我似乎无法禁用滚轮 如果我在地图加载之前将选项设置为scrollwheel false 则滚轮将被禁用 但如果我稍后尝试执行此操作 我有一个启用 禁用滚轮的复选框 以下是我在页面加载
  • GoogleMaps iOS SDK 1.5 无法加载

    所以我开始研究使用 GoogleMaps iOS SDK 我按照说明进行操作 在控制台中启用适用于 iOS 的 Google Maps SDK 设置 API 密钥并添加捆绑 ID 我使用演示项目 Google Supplies 更新了常量
  • MKAnnotationView 的不同字体

    在iPhone SDK地图上的标注气泡上 可以更改标题和副标题属性的字体吗 我对标注气泡中显示的默认字体不满意 并且希望使用不同的字体来匹配我的应用程序的其余部分 然而 我没有看到太多提及这一点 这让我担心这可能是不可能的 我见过构建自定义
  • 如何使用 sf::st_centroid 计算多边形的质心?

    我正在尝试使用新的 sf 包在 R 中操作一些巴西人口普查数据 我可以导入数据 但当我尝试创建原始多边形的质心时出现错误 library sf Donwload data filepath lt ftp geoftp ibge gov br
  • 以编程方式设置谷歌地图片段可见性(API2)

    xml
  • 标记聚类在 Android 中不显示标记?

    我在 Android 的 PagerFragment 中设置了 MapView 我按照 Google 示例进行操作 但使用 V2 API 设置带有群集标记的地图 它向我显示了一张没有标记的黑色地图 我哪里做错了 import android
  • 从 Google 地图方向获取折线 V3

    在获得指示后 我试图在 Google 地图上获取折线 我想使用v3 epoly http www geocodezip com scripts v3 epoly js沿折线放置标记 I found this https groups goo
  • 从当前位置出发的移动网络行车路线

    我正在构建一个网站的移动版本 试图通过一键式链接来启动 Google 地图 并提供从用户当前位置到企业的行车路线 我让它在 iPhone 上运行良好 但在 Android 上测试时 它会查看 Current 20Location 并尝试查找
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • Google 地图 API 标记图标 URL?

    我正在尝试将标记图标更改为 红圈 或 红针 或其他任何内容 在这些代码中 markerOptions icon images beachflag png 标记不显示 但如果我做icon一行注释行 因此标记显示为 red pin icon 所
  • 设置反向地理编码 Gmaps v.3 的语言

    现在有人如何设置反向地理编码 php 响应的语言吗 始终设置 en Here is the code code api key url http maps google com maps geo q 49 8411860 30 106658

随机推荐

  • 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