当您转换路径时,创建 4 个存储变量:最小 x 值最大 x 值最小 y 值最大 y 值这些变量用于计算 svg 元素的 viewBox.viewBox 的 4 个参数是:x:使用 minXy:使用 minY宽度:使用(maxX-minX)高度:使用(maxY-minY)Demo(绘制美图):http://jsfiddle.net/doktormolle/9xhsL39u/(注意:演示加载了maps-API,但只是为了路径解码,使用的路径非常复杂,因此编码.maps-API不是必需的坐标转换/svg-绘图)When a user has drawn a polygon in Google Maps using the built in Drawing Manager I save the polygon path. I want to convert this polygon path to an SVG path so that I can reproduce the shape of the polygon drawn easily, without requiring lots of additional map loads and calls to the Google Maps API.I'm sure it's just some fairly trivial mathematics but can't work out how to do it. Do I need to create a bounding box around the points and translate it to LatLng 0, 0 before scaling it down or can I do something simpler using just the LatLng coordinates of each point?I've found lots of questions asking to achieve the opposite, converting SVG to a map polygon but not this. Any pointing me in the right direction appreciated. 解决方案 You can't use the coordinates directly, you first must translate them to points based on a projection.For the mercator-projection you'll find the formula here: https://stackoverflow.com/a/14457180/459897A javascript-function based on this formula may look like this:/** *@param latLng object with properties lat and lng(of the coordinate) *@return object with properties x and y(of the translated latLng) **/function latLng2point(latLng){ return { x:(latLng.lng+180)*(256/360), y:(256/2)-(256*Math.log(Math.tan((Math.PI/4) +((latLng.lat*Math.PI/180)/2)))/(2*Math.PI)) };}Convert the coordinates of the path via this function. A path in svg is a sequence of x,y-pairs, delimited by a space as seen in the answer by AniV( but I guess you know what to do with a svg-path).When you Convert the path, create 4 variables where you store:the min-x-valuethe max-x-valuethe min-y-valuethe max-y-valueThese variables use to calculate the viewBox of the svg-element.the 4 parameters for the viewBox are:x: use minXy: use minYwidth: use (maxX-minX)height: use (maxY-minY)Demo(drawing the shape of the US): http://jsfiddle.net/doktormolle/9xhsL39u/(Note: the demo loads the maps-API, but only for the purpose of path-decoding, the used paths are very complex and therefore encoded. The maps-API is not required for the coordinate-conversion/svg-drawing) 这篇关于将 Google Maps 多边形路径转换为 SVG 路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!