How to scale html5 canvas to show google maps coordinates

问题

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

回答1:

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...

来源：https://stackoverflow.com/questions/27892300/how-to-scale-html5-canvas-to-show-google-maps-coordinates

标签

javascript

html5

google-maps

canvas

scale