将Google地图折线转换为HTML帆布线 [英] Convert google maps polyline to html canvas line

问题描述

我需要将Google地图多段线显示到HTML画布中。如何转换坐标：

  lat：25.5643498，lng：45.34492432 
  

到这样的画布坐标？

  x ：230，y：445 
  

我尝试从谷歌缩放坐标，但没有成功。

解决方案

使用 MapCanvasProjection 方法 .fromLatLngToContainerPixel

概念证明小提琴

代码片段：

（）; var code; var map; var shapes = [];函数初始化（）{var map = new google.maps.Map（do cument.getElementById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; overlay = new google.maps.OverlayView（）; overlay.draw = function（）{}; overlay.setMap（地图）; var drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.MARKER，drawingControl：true，drawingControlOptions：{position：google.maps.ControlPosition.TOP_CENTER，drawingModes：[google.maps.drawing .OverlayType.POLYLINE]}}）; google.maps.event.addListener（drawingManager，'overlaycomplete'，function（event）{if（event.type == google.maps.drawing.OverlayType.POLYLINE）{if（drawingManager.getDrawingMode（））{drawingManager.setDrawingMode（ null）;} var canvas = document.getElementById（'myCanvas'）; var context = canvas.getContext（'2d'）; context.clearRect（0，0，canvas.width，canvas.height）; var polyline = event。 overlay; shapes.push（polyline）; context.beginPath（）; for（var i = 0; i< polyline.getPath（）。getLength（）; i ++）{var point = overlay.getProjection（）。fromLatLngToContainerPixel .getPath（）。getAt（i））; if（i == 0）{context.moveTo（point.x，point.y）;} else {context.lineTo（point.x，point.y）;}} context.stroke（）;}}）; drawingManager.setMap（地图）; google.maps.event.addListener（drawingManager，drawingmode_changed，function（）{if（drawingManager.getDrawingMode（）！= null）{for（var i = 0; i< shapes.length; i ++）{shapes [i ] .setMap（null）;} shapes = [];}}）;} google.maps.event.addDomListener（window，load，initialize）;

< pre class =snippet-code-css lang-css prettyprint-override> html，body，{height：100％;宽度：100％; margin：0px; padding：0px} #map_canvas {height：400px; width：500px;}

< script src =https ：//maps.googleapis.com/maps/api/js？libraries = drawing>< / script>< canvas id =myCanvaswidth =500height =400>< / canvas> ;< div id =map_canvas>< / div>

I need to show a google maps polyline into a html canvas. How I can convert the coordinates like this:

lat:25.5643498,lng:45.34492432 

to canvas coordinates like this?

x:230,y:445

I tried to "scale" down the coordinates from google but no success.

解决方案

Use the MapCanvasProjection method .fromLatLngToContainerPixel

proof of concept fiddle

code snippet:

var geocoder;
var map;
var overlay;
var shapes = [];


function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYLINE
      ]
    }
  });
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
      if (drawingManager.getDrawingMode()) {
        drawingManager.setDrawingMode(null);
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      var polyline = event.overlay;
      shapes.push(polyline);
      context.beginPath();
      for (var i = 0; i < polyline.getPath().getLength(); i++) {
        var point = overlay.getProjection().fromLatLngToContainerPixel(polyline.getPath().getAt(i));
        if (i == 0) {
          context.moveTo(point.x, point.y);
        } else {
          context.lineTo(point.x, point.y);
        }
      }
      context.stroke();
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if (drawingManager.getDrawingMode() != null) {
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].setMap(null);
      }
      shapes = [];
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
{
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map_canvas {
  height: 400px;
  width: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<canvas id="myCanvas" width="500" height="400"></canvas>
<div id="map_canvas"></div>

这篇关于将Google地图折线转换为HTML帆布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！