如何缩放 html5 画布以显示谷歌地图坐标

How to scale html5 canvas to show google maps coordinates

本文关键字：显示 谷歌地图 坐标 html5 何缩放 缩放      更新时间：2023-09-26

我有HTML5画布：

<canvas id="myCanvas" width="500" height="400"
style="border:1px solid #000000; background:#ccc;">
</canvas>

这里很容易画线，但线必须是（x->max 500，y->max400），这没关系。

但是我如何缩放此画布以显示坐标（纬度，经度） - 坐标是高精度十进制值：

{"lat"："52.67554942424349"，"LNG"："8.372654914855957"}，{"lat"："52.67528921580262"，"LNG"："8.373513221740723"}，{"lat"："52.6759657545252"，"LNG"："8.374114036560059"}， {"lat"："52.682574466310314"，"LNG"："8.37256908416748"}，{"lat"："52.68356308524067"，"LNG"："8.373942375183105"}，{"lat"："52.68293869694087"，"LNG"："8.375487327575684"}，{"lat"："52.67685044320001"，"LNG"："8.376259803771973"}，{"lat"："

52.6756535071859"，"lng"："8.379607200622559"}，{"lat"："

52.676017795531436"，"lng"："8.382096290588379"}，{"lat"："52.68101344348877"，"lng"："8.380722999572754"}，{"lat"："52.68351105322329"，"lng"："8.383641242980957"}，

当我在谷歌地图上绘制它时，看起来像这样：图片网址： https://i.stack.imgur.com/haTkH.png

我如何将我的十进制值从坐标转换为在 html5 画布上显示此坐标，就像在谷歌地图上一样？有什么办法吗？我花了 3 天时间试图找到这个探针的解决方案？这是怎么回事？

谢谢，对不起我的英语

如果你想

在谷歌地图中画一条线，而不是使用HTML 5，也许你可以考虑使用谷歌地图api来画一条线。

如果您想了解有关如何使用它的更多信息，请阅读此处。

而且，如果您想了解有关 API 参考的更多详细信息，请在此处阅读...

也许你应该试试下面的这个代码片段，如何从谷歌地图API使用此服务。

function initialize() {
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(-6.1839906,106.82296),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var flightPlanCoordinates = [
    new google.maps.LatLng(-6.175392,106.827153),
    new google.maps.LatLng(-6.1827,106.82296),
    new google.maps.LatLng(-6.1839906,106.82296),
    new google.maps.LatLng(-6.1860599,106.8217262)];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3
    });
    flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas" style="height:400px; width:400px"></div>

也许您可以精确地确定您需要的线路...

相关文章：