Convert a Google Maps polygon path to an SVG path

前端未结

关注

 2  1173

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 r

相关标签:

2条回答

無奈伤痛

2020-12-18 16:52
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/459897

A 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:
1. the min-x-value
2. the max-x-value
3. the min-y-value
4. the max-y-value
These variables use to calculate the viewBox of the svg-element.

the 4 parameters for the viewBox are:
1. x: use minX
2. y: use minY
3. width: use (maxX-minX)
4. 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)
0 讨论(0)
发布评论:

提交评论
- 加载中...
Happy的楠姐

2020-12-18 17:09
Here is the basic HTML code for drawing polygon when you have set of points, you can embed this in a Javascript function and call with a map object.
```
<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
<polygon points="200,10 250,190 160,210,102,108" style="fill:red;stroke:purple;stroke-     width:1" />
</svg>
</body>
</html> 
```
Here you can replace the x and y coordinates with variables for latitude and longitude for a particular location that the user has input in order to draw polygon on map.For example for the first point x1 = 200 and y1 = 10 and likewise.

Hope this would help!!
0 讨论(0)
发布评论:

提交评论
- 加载中...