I'm trying to develop an application by using Google Maps API v3. What I'm trying to do is; first let the user draw a polygon on a Google Map and get his/her polygon's coordinates and save them into a database. I will then show the user saved coordinates.
我正在尝试使用Google Maps API v3开发应用程序。我想做的是;首先让用户在Google Map上绘制一个多边形并获取他/她的多边形坐标并将它们保存到数据库中。然后，我将显示用户保存的坐标。
I don't know how to let users draw polygon on a Google Map with API v3 and then get the coordinates. If I can get those coordinates, it's easy to save them into a database.
我不知道如何让用户使用API v3在Google Map上绘制多边形，然后获取坐标。如果我可以获得这些坐标，则很容易将它们保存到数据库中。
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html is nearly the exact example but it uses API v2 and doesn't give coordinates. I want to use API v3 and be able to get all coordinates.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html几乎就是一个确切的例子，但它使用的是API v2并且不提供坐标。我想使用API v3并能够获得所有坐标。
Is there any examples of drawing polygon and getting its coordinates with API v3?
是否有任何绘制多边形和使用API v3获取其坐标的示例？
10 个解决方案
#1
13
here you have the example above using API V3
这里有上面的例子，使用API V3
http://nettique.free.fr/gmap/toolbar.html
http://nettique.free.fr/gmap/toolbar.html
#2
12
If all you need is the coordinates here is a drawing tool I like to use - move the polygon or re-shape it and the coordinates will display right below the map: jsFiddle here.
如果您需要的是这里的坐标是我想要使用的绘图工具 - 移动多边形或重新塑造它，坐标将显示在地图的正下方：jsFiddle here。
Also, here is a Codepen
此外，这是一个Codepen
JS
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById('info').innerHTML = htmlStr;
}
HTML
HTML
<body onload="initialize()">
<h3>Drag or re-shape for coordinates to display below</h3>
<div id="map-canvas">
</div>
<div id="info">
</div>
</body>
CSS
CSS
#map-canvas {
width: auto;
height: 350px;
}
#info {
position: absolute;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
#3
8
Well, unfortunately it seems that one cannot place custom markers and draw (and obtain coordinates) directly from maps.google.com if one is anonymous/not logged in (as it was possible some years ago, if I recall correctly). Still, thanks to the answers here, I managed to make a combination of examples that has both the Google Places search, and allows drawing via the drawing library, and dumps coordinates upon making a selection of any type of shape (including coordinates for polygon) that can be copypasted; the code is here:
好吧，遗憾的是，如果一个人是匿名/未登录的话，似乎无法直接从maps.google.com放置自定义标记并绘制（并获取坐标）（如果我记得正确的话，可能在几年前就可能）。尽管如此，由于这里的答案，我设法组合了包含Google Places搜索的示例，并允许通过绘图库绘图，并在选择任何类型的形状（包括多边形的坐标）时转储坐标可以复制;代码在这里：
- https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm
- https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm
This is how it looks like:
这是它的样子：
(The Places markers are handled separately, and can be deleted via the DEL "button" by the search input form element; "curpos" shows the current center [position] and zoom level of the map viewport).
（位置标记是单独处理的，可以通过搜索输入表单元素的DEL“按钮”删除;“curpos”显示地图视口的当前中心[位置]和缩放级别）。
#4
7
It's cleaner/safer to use the getters provided by google instead of accessing the properties like some did
使用谷歌提供的getter而不是像某些人那样访问属性更干净/更安全
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
#5
3
to accomplish what you want, you must getPaths from the polygon. Paths will be an array of LatLng points. you get the elements of the array and split the LatLng pairs with the methods .lat and .lng in the function below, i have a redundant array corresponding to a polyline that marks the perimeter around the polygon.
要完成你想要的，你必须从多边形中获取路径。路径将是LatLng点的数组。你得到数组的元素并使用下面函数中的方法.lat和.lng分割LatLng对，我有一个冗余数组，对应于多边形，标记多边形周围的边界。
saving is another story. you can then opt for many methods. you may save your list of points as a csv formatted string and export that to a file (easiest solution, by far). i highly recommend GPS TXT formats, like the ones (there are 2) readable by GPS TRACKMAKER (great free version software). if you are competent to save them to a database, that is a great solution (i do both, for redundancy).
储蓄是另一回事。然后你可以选择很多方法。您可以将您的点列表保存为csv格式的字符串并将其导出到文件（最简单的解决方案，到目前为止）。我强烈推荐GPS TXT格式，如GPS TRACKMAKER（伟大的免费版软件）可读的那些（有2个）。如果你有能力将它们保存到数据库中，这是一个很好的解决方案（我同时做两个，为了冗余）。
function areaPerimeterParse(areaPerimeterPath) {
var flag1stLoop = true;
var areaPerimeterPathArray = areaPerimeterPath.getPath();
var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0\r\n";
var counter01 = 0;
var jSpy = "";
for (var j = 0;j<areaPerimeterPathArray.length;j++) {
counter01++;
jSpy += j+" ";
if (flag1stLoop) {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,1'+'\r\n';
flag1stLoop = false;
} else {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
}
}
// last point repeats first point
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
return markerListParsedTXT;
}
attention, the line that ends with ",1" (as opposed to ",0") starts a new polygon (this format allows you to save multiple polygons in the same file). i find TXT more human readable than the XML based formats GPX and KML.
注意，以“，1”（而不是“，0”）结尾的行开始一个新的多边形（此格式允许您在同一文件中保存多个多边形）。我发现TXT比基于XML的格式GPX和KML更具人类可读性。
#6
2
The other answers show you to create the polygons, but not how to get the coordinates...
其他答案显示您创建多边形，但不是如何获取坐标...
I'm not sure the best way to do it, but heres one way.. It seems like there should be a method to get the paths from the polygon, but I can't find one, and getPath() doesn't seem to work for me. So here's a manual approach that worked for me..
我不确定这样做的最佳方法，但只有一种方式..看起来应该有一个方法从多边形获取路径，但我找不到一个，并且getPath（）似乎没有为我工作所以这是一个适合我的手动方法..
Once you've finished drawing your polygon, and pass in your polygon to the overlay complete function, you can find the coordinates in the polygon.overlay.latLngs.b[0].b
绘制完多边形并将多边形传递到叠加完成函数后，可以在polygon.overlay.latLngs.b [0] .b中找到坐标。
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
$.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
var lat = latlng.d;
var lon = latlng.e;
console.log(lat, lon); //do something with the coordinates
});
});
note, i'm using jquery to loop over the list of coordinates, but you can do loop however.
请注意，我正在使用jquery循环遍历坐标列表，但您可以执行循环。
#7
1
Adding to Gisheri's answer
加入Gisheri的答案
Following code worked for me
以下代码为我工作
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.POLYGON
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
//console.log(polygon.overlay.latLngs.j[0].j);return false;
$.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
var LatLongs = LatLongsObject;
var lat = LatLongs.k;
var lon = LatLongs.B;
console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates
});
#8
1
Since Google updates sometimes the name of fixed object properties, the best practice is to use GMaps V3 methods to get coordinates event.overlay.getPath().getArray() and to get lat latlng.lat() and lng latlng.lng().
由于Google有时会更新固定对象属性的名称，因此最佳做法是使用GMaps V3方法获取坐标event.overlay.getPath（）。getArray（）并获取lat latlng.lat（）和lng latlng.lng（） 。
So, I just wanted to improve this answer a bit exemplifying with polygon and POSTGIS insert case scenario:
所以，我只想通过多边形和POSTGIS插入案例场景来改进这个答案：
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
var str_input ='POLYGON((';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
console.log('polygon path array', event.overlay.getPath().getArray());
$.each(event.overlay.getPath().getArray(), function(key, latlng){
var lat = latlng.lat();
var lon = latlng.lng();
console.log(lat, lon);
str_input += lat +' '+ lon +',';
});
}
str_input = str_input.substr(0,str_input.length-1) + '))';
console.log('the str_input will be:', str_input);
// YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
// INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), 'Test')
});
#9
0
Cleaned up what chuycepeda has and put it into a textarea to send back in a form.
清理了chuycepeda所拥有的东西并将其放入textarea以便以表格形式寄回。
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
var str_input = '{';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
$.each(event.overlay.getPath().getArray(), function (key, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
str_input += lat + ', ' + lon + ',';
});
}
str_input = str_input.substr(0, str_input.length - 1) + '}';
$('textarea#Geofence').val(str_input);
});
#10
0
try this
尝试这个
In your controller use
在你的控制器中使用
> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
>
> function onMapOverlayCompleted(e) {
>
> e.overlay.getPath().getArray().forEach(function (position) {
> console.log('lat', position.lat());
> console.log('lng', position.lng());
> });
>
> }
**In Your html page , include drawning manaer**
<ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
tilt="45"
heading="90">
<drawing-manager
on-overlaycomplete="onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
drawingControl="true"
drawingMode="null"
markerOptions="{icon:'www.example.com/icon'}"
rectangleOptions="{fillColor:'#B43115'}"
circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>
#1
13
here you have the example above using API V3
这里有上面的例子，使用API V3
http://nettique.free.fr/gmap/toolbar.html
http://nettique.free.fr/gmap/toolbar.html
#2
12
If all you need is the coordinates here is a drawing tool I like to use - move the polygon or re-shape it and the coordinates will display right below the map: jsFiddle here.
如果您需要的是这里的坐标是我想要使用的绘图工具 - 移动多边形或重新塑造它，坐标将显示在地图的正下方：jsFiddle here。
Also, here is a Codepen
此外，这是一个Codepen
JS
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById('info').innerHTML = htmlStr;
}
HTML
HTML
<body onload="initialize()">
<h3>Drag or re-shape for coordinates to display below</h3>
<div id="map-canvas">
</div>
<div id="info">
</div>
</body>
CSS
CSS
#map-canvas {
width: auto;
height: 350px;
}
#info {
position: absolute;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
#3
8
Well, unfortunately it seems that one cannot place custom markers and draw (and obtain coordinates) directly from maps.google.com if one is anonymous/not logged in (as it was possible some years ago, if I recall correctly). Still, thanks to the answers here, I managed to make a combination of examples that has both the Google Places search, and allows drawing via the drawing library, and dumps coordinates upon making a selection of any type of shape (including coordinates for polygon) that can be copypasted; the code is here:
好吧，遗憾的是，如果一个人是匿名/未登录的话，似乎无法直接从maps.google.com放置自定义标记并绘制（并获取坐标）（如果我记得正确的话，可能在几年前就可能）。尽管如此，由于这里的答案，我设法组合了包含Google Places搜索的示例，并允许通过绘图库绘图，并在选择任何类型的形状（包括多边形的坐标）时转储坐标可以复制;代码在这里：
- https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm
- https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm
This is how it looks like:
这是它的样子：
(The Places markers are handled separately, and can be deleted via the DEL "button" by the search input form element; "curpos" shows the current center [position] and zoom level of the map viewport).
（位置标记是单独处理的，可以通过搜索输入表单元素的DEL“按钮”删除;“curpos”显示地图视口的当前中心[位置]和缩放级别）。
#4
7
It's cleaner/safer to use the getters provided by google instead of accessing the properties like some did
使用谷歌提供的getter而不是像某些人那样访问属性更干净/更安全
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
#5
3
to accomplish what you want, you must getPaths from the polygon. Paths will be an array of LatLng points. you get the elements of the array and split the LatLng pairs with the methods .lat and .lng in the function below, i have a redundant array corresponding to a polyline that marks the perimeter around the polygon.
要完成你想要的，你必须从多边形中获取路径。路径将是LatLng点的数组。你得到数组的元素并使用下面函数中的方法.lat和.lng分割LatLng对，我有一个冗余数组，对应于多边形，标记多边形周围的边界。
saving is another story. you can then opt for many methods. you may save your list of points as a csv formatted string and export that to a file (easiest solution, by far). i highly recommend GPS TXT formats, like the ones (there are 2) readable by GPS TRACKMAKER (great free version software). if you are competent to save them to a database, that is a great solution (i do both, for redundancy).
储蓄是另一回事。然后你可以选择很多方法。您可以将您的点列表保存为csv格式的字符串并将其导出到文件（最简单的解决方案，到目前为止）。我强烈推荐GPS TXT格式，如GPS TRACKMAKER（伟大的免费版软件）可读的那些（有2个）。如果你有能力将它们保存到数据库中，这是一个很好的解决方案（我同时做两个，为了冗余）。
function areaPerimeterParse(areaPerimeterPath) {
var flag1stLoop = true;
var areaPerimeterPathArray = areaPerimeterPath.getPath();
var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0\r\n";
var counter01 = 0;
var jSpy = "";
for (var j = 0;j<areaPerimeterPathArray.length;j++) {
counter01++;
jSpy += j+" ";
if (flag1stLoop) {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,1'+'\r\n';
flag1stLoop = false;
} else {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
}
}
// last point repeats first point
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
return markerListParsedTXT;
}
attention, the line that ends with ",1" (as opposed to ",0") starts a new polygon (this format allows you to save multiple polygons in the same file). i find TXT more human readable than the XML based formats GPX and KML.
注意，以“，1”（而不是“，0”）结尾的行开始一个新的多边形（此格式允许您在同一文件中保存多个多边形）。我发现TXT比基于XML的格式GPX和KML更具人类可读性。
#6
2
The other answers show you to create the polygons, but not how to get the coordinates...
其他答案显示您创建多边形，但不是如何获取坐标...
I'm not sure the best way to do it, but heres one way.. It seems like there should be a method to get the paths from the polygon, but I can't find one, and getPath() doesn't seem to work for me. So here's a manual approach that worked for me..
我不确定这样做的最佳方法，但只有一种方式..看起来应该有一个方法从多边形获取路径，但我找不到一个，并且getPath（）似乎没有为我工作所以这是一个适合我的手动方法..
Once you've finished drawing your polygon, and pass in your polygon to the overlay complete function, you can find the coordinates in the polygon.overlay.latLngs.b[0].b
绘制完多边形并将多边形传递到叠加完成函数后，可以在polygon.overlay.latLngs.b [0] .b中找到坐标。
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
$.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
var lat = latlng.d;
var lon = latlng.e;
console.log(lat, lon); //do something with the coordinates
});
});
note, i'm using jquery to loop over the list of coordinates, but you can do loop however.
请注意，我正在使用jquery循环遍历坐标列表，但您可以执行循环。
#7
1
Adding to Gisheri's answer
加入Gisheri的答案
Following code worked for me
以下代码为我工作
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.POLYGON
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
//console.log(polygon.overlay.latLngs.j[0].j);return false;
$.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
var LatLongs = LatLongsObject;
var lat = LatLongs.k;
var lon = LatLongs.B;
console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates
});
#8
1
Since Google updates sometimes the name of fixed object properties, the best practice is to use GMaps V3 methods to get coordinates event.overlay.getPath().getArray() and to get lat latlng.lat() and lng latlng.lng().
由于Google有时会更新固定对象属性的名称，因此最佳做法是使用GMaps V3方法获取坐标event.overlay.getPath（）。getArray（）并获取lat latlng.lat（）和lng latlng.lng（） 。
So, I just wanted to improve this answer a bit exemplifying with polygon and POSTGIS insert case scenario:
所以，我只想通过多边形和POSTGIS插入案例场景来改进这个答案：
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
var str_input ='POLYGON((';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
console.log('polygon path array', event.overlay.getPath().getArray());
$.each(event.overlay.getPath().getArray(), function(key, latlng){
var lat = latlng.lat();
var lon = latlng.lng();
console.log(lat, lon);
str_input += lat +' '+ lon +',';
});
}
str_input = str_input.substr(0,str_input.length-1) + '))';
console.log('the str_input will be:', str_input);
// YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
// INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), 'Test')
});
#9
0
Cleaned up what chuycepeda has and put it into a textarea to send back in a form.
清理了chuycepeda所拥有的东西并将其放入textarea以便以表格形式寄回。
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
var str_input = '{';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
$.each(event.overlay.getPath().getArray(), function (key, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
str_input += lat + ', ' + lon + ',';
});
}
str_input = str_input.substr(0, str_input.length - 1) + '}';
$('textarea#Geofence').val(str_input);
});
#10
0
try this
尝试这个
In your controller use
在你的控制器中使用
> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
>
> function onMapOverlayCompleted(e) {
>
> e.overlay.getPath().getArray().forEach(function (position) {
> console.log('lat', position.lat());
> console.log('lng', position.lng());
> });
>
> }
**In Your html page , include drawning manaer**
<ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
tilt="45"
heading="90">
<drawing-manager
on-overlaycomplete="onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
drawingControl="true"
drawingMode="null"
markerOptions="{icon:'www.example.com/icon'}"
rectangleOptions="{fillColor:'#B43115'}"
circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>