首页 > 编程语言> 文章详细

javascript-如何在基于像素的Google Map上画圆和线？

2019-10-29 21:37:20 阅读：226 来源： 互联网

标签：polyline google-maps javascript

是否可以根据像素尺寸在Google地图上绘制圆和折线？请允许我解释一下…

我在地图上有一个标记.接下来,我想在其周围画一个圆,标记为精确的中心.我希望圆具有基于像素的固定半径.但是,由于Google Maps API需要以米为单位的距离作为半径的基础,因此圆的大小会根据缩放级别而变化,这是我不希望的.

另一个示例是成角度的折线.我正在从标记到特定方向画一条线.同样,距离基于米,而不是像素,因此缩放会缩小或增大线的大小.另一个不希望看到的副作用是,由于地图的点状投影(如果我正确理解的话),一条成90度角的线将不会精确地向东绘制.

我要寻找的是这些绘图对象在地图上的便利性,而不是将它们绑定到地图尺寸上,而仅是硬像素.这是可能的,还是意味着我需要从头开始使用自定义div和某种SVG库？

解决方法:

使用Symbols比想象的要容易.

对于圆,有一个预定义的路径：

new google.maps.Marker({
    position: centerLatLngOfTheCircle,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: yourDesiredRadius,
        strokeWeight: 1,
    },
    map: map
});

对于折线,您必须分配一个自定义路径：

line = new google.maps.Marker({
    position: startLatLngOfTheLine,
    icon: {
        path: ['M0 0 ', 
               (Math.cos(Math.PI * angle / 180)), 
               (Math.sin(Math.PI * angle / 180))].join(' '),
        scale: desiredStrokeLength,
        strokeWeight: 1
    },
    map: map
});

(角度从3:00开始顺时针计数)

演示：http://jsfiddle.net/doktormolle/y8S8e/

标签：polyline,google-maps,javascript
来源： https://codeday.me/bug/20191029/1963000.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-如何在基于像素的Google Map上画圆和线？