Javascript 将google地图多段线转换为html画布线

我需要显示一个谷歌地图折线到html画布。如何像这样转换坐标：

lat:25.5643498,lng:45.34492432 

像这样画坐标

x:230,y:445

我试图从谷歌上“缩放”坐标，但没有成功。

使用方法

。从LatlngToContainerPixel

代码片段：

var地理编码器；
var映射；
var叠加；
变量形状=[]；
函数初始化（）{
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
overlay=新的google.maps.OverlayView（）；
overlay.draw=函数（）{}；
覆盖.setMap（map）；
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.MARKER，
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[
google.maps.drawing.OverlyType.POLYLINE
]
}
});
google.maps.event.addListener（drawingManager，'OverlyComplete'，函数（事件）{
if（event.type==google.maps.drawing.overlytype.POLYLINE）{
if（drawingManager.getDrawingMode（））{
drawingManager.setDrawingMode（空）；
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
var polyline=event.overlay；
形状。推送（多段线）；
context.beginPath（）；
对于（var i=0；i
html，
身体，
{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
#地图画布{
高度：400px；
宽度：500px；
}