在 gmap 上绘制和编辑多边形节点，并将检索点作为 Angularjs 上的数组
Posted
技术标签:
【中文标题】在 gmap 上绘制和编辑多边形节点，并将检索点作为 Angularjs 上的数组【英文标题】：Draw and edit polygon nodes on gmap with retrieve points as arrary over Angularjs 【发布时间】：2020-09-29 20:35:53 【问题描述】：我正在创建一个位置基地边界来标记交货区域。 https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
作为上述参考或其他教程的信息非常少。请建议从头开始的参考。
【问题讨论】：
【参考方案1】：这是找到http://jsbin.com/ajimur/10 的解决方案。它使用一个函数向传入的多边形添加一个删除按钮。
别忘了添加谷歌地图库http://maps.googleapis.com/maps/api/js?sensor=false®ion=GB&libraries=drawing
var G = google.maps;
var zoom = 7;
var centerPoint = new G.LatLng(45.5, -100.5);
$(function()
// create options object
var myOptions =
center: centerPoint,
zoom: zoom,
mapTypeId: G.MapTypeId.ROADMAP
;
// create map with options
var map = new G.Map($("#map_canvas")[0], myOptions);
addPolygon(map);
);
function addPolygon(map)
var paths = [
new G.LatLng(45, -100),
new G.LatLng(45.5, -99.5),
new G.LatLng(46, -100),
new G.LatLng(46, -101),
new G.LatLng(45, -101)
];
poly = new G.Polygon(
clickable: false,
paths: paths,
map: map
);
poly.setEditable(true);
addDeleteButton(poly, 'http://i.imgur.com/RUrKV.png');
function addDeleteButton(poly, imageUrl)
var path = poly.getPath();
path["btnDeleteClickHandler"] = ;
path["btnDeleteImageUrl"] = imageUrl;
google.maps.event.addListener(poly.getPath(),'set_at',pointUpdated);
google.maps.event.addListener(poly.getPath(),'insert_at',pointUpdated);
function pointUpdated(index)
var path = this;
var btnDelete = getDeleteButton(path.btnDeleteImageUrl);
if(btnDelete.length === 0)
var undoimg = $("img[src$='http://maps.gstatic.com/mapfiles/undo_poly.png']");
undoimg.parent().css('height', '21px !important');
undoimg.parent().parent().append('<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; width: 30px; height: 27px;top:21px;"><img src="' + path.btnDeleteImageUrl + '" class="deletePoly" style="height:auto; width:auto; position: absolute; left:0;"/></div>');
// now get that button back again!
btnDelete = getDeleteButton(path.btnDeleteImageUrl);
btnDelete.hover(function() $(this).css('left', '-30px'); return false;,
function() $(this).css('left', '0px'); return false;);
btnDelete.mousedown(function() $(this).css('left', '-60px'); return false;);
// if we've already attached a handler, remove it
if(path.btnDeleteClickHandler)
btnDelete.unbind('click', path.btnDeleteClickHandler);
// now add a handler for removing the passed in index
path.btnDeleteClickHandler = function()
path.removeAt(index);
return false;
;
btnDelete.click(path.btnDeleteClickHandler);
function getDeleteButton(imageUrl)
return $("img[src$='" + imageUrl + "']");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Google Maps example</title>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html height: 100%
body height: 100%; margin: 0; padding: 0
#map_canvas height: 100%
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false®ion=GB&libraries=drawing">
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>【讨论】：
嘿，谢谢。让我检查一下。也可以获得这些值吗？ 为什么我的问题是负利率？以上是关于在 gmap 上绘制和编辑多边形节点，并将检索点作为 Angularjs 上的数组的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Flutter 中的 Google 地图上绘制多边形并获取其中的所有 POI？