如何缩放HTML5画布以显示Google地图坐标

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”， “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”}，

当我在Google地图上绘制它时，它看起来像这样：IMAGE URL： http : //i.stack.imgur.com/haTkH.png

如何从坐标转换我的十进制值，以便像在Google Map上那样在html5画布上从上方显示此坐标？ 有什么办法吗？ 我花了3天的时间来尝试找到该探针的解决方案？ 怎么运作的？

谢谢你，对不起我的英语

Answer 1

如果要在Google地图中绘制线条，而不是使用HTML 5，则可以考虑使用Google Maps api绘制线条。

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

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

可能是您应该尝试下面的此代码段，以及如何使用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> 

也许您可以根据需要调整生产线...