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

Question

我有 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", ":"8.374114036560059"},{"lat":"52.682574466310314","lng":"8.37256908416748"},{"lat":"52.68356308524067","lng":"8.373942375183105"}28675189405"}2869." ","lng":"8.375487327575684"},{"lat":"52.67685044320001","lng":"8.376259803771973"},{"lat":"52.6756535071859","lng":"8.379607200622559},{ ":"52.676017795531436","lng":"8.382096290588379"},{"lat":"52.68101344348877","lng":"8.380722999572754"},{"lat":"52.6835110532329"},"lng":"802329"}124" ,

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

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

感谢和抱歉我的英语

Answer 1

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

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

如果您想了解有关 API 参考的更多详细信息，请阅读 here...

也许你应该试试下面这个代码sn-p，如何从google maps 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>

也许你可以根据你需要的精确线......