如何缩放html5 canvas来显示google地图坐标 [英] How to scale html5 canvas to show google maps coordinates

问题描述

我有HTML5 canvas：

 < canvas id =myCanvaswidth =500height = 
 style =border：1px solid＃000000; background：#ccc;> 
< / canvas> 
  

这里是很容易画线，但线必须是（x-> max 500，y->

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

{lat：52.6755494242499，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地图上绘制时，
图片网址： http://i.stack.imgur.com/haTkH.png

我如何从坐标转换我的十进制值以显示这个坐标从上面html5画布像google地图？有什么办法吗？我花了3天试图找到这个问题的解决方案？

解决方案

如果您想在google地图中绘制线条，而不是使用HTML 5，您可以考虑使用google maps api画一条线。

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

如果您想了解API参考资料的更多详情，请阅读 here ...

也许你应该尝试下面的代码片段，如何使用这个服务从谷歌地图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-canvasstyle =height：400px; width：400px>< / div>  

p>

也许你可以准确地说明你需要什么...

I have HTML5 canvas:

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

and here is easy to draw lines but line must be (x->max 500, y->max400) and thats ok.

But I how I can scale this canvas to show coordinates (latitude, longitude) - coordinates is high precision decimal values:

{"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"},

When I draw it on google map then looks like this: IMAGE URL: http://i.stack.imgur.com/haTkH.png

How I can transform my decimal values from coordinates to show this coordinates from above on html5 canvas like on google map? Is there any way? I was spend 3 days to try to find solution for this probem? How that work?

thanks and sorry for my english

解决方案

If you want to draw a lines in google maps, rather than using HTML 5, May be you can considering it using google maps api to draw a line.

if you want more info about how to using it. please read here.

And, if you want more detail about the API References, please read it here...

May be you should try this code snippet below, how to use this services from 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>

May be you can precise the line for what you need to...

这篇关于如何缩放html5 canvas来显示google地图坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！