我想编写一个应用程序,让用户在 GoogleMap 上绘制一个多边形,然后让他将其保存到数据库中。
稍后当我们需要时,他应该能够从数据库中绘制地图上的多边形。
做到这一点的最佳方法是什么?
我的建议是将多边形数据保存在 js 数组中,并使用 JSON 将其发送到 mvc。这是一个好方法吗?
如何在 GoogleMap 上绘制多边形?
如何使用 JS 从客户端调用 MVC 上的控制器?
我需要一个特殊的控制器吗(接收 JSON 数据)
是否有任何示例代码?
我想编写一个应用程序,让用户在 GoogleMap 上绘制一个多边形,然后让他将其保存到数据库中。
稍后当我们需要时,他应该能够从数据库中绘制地图上的多边形。
做到这一点的最佳方法是什么?
我的建议是将多边形数据保存在 js 数组中,并使用 JSON 将其发送到 mvc。这是一个好方法吗?
如何在 GoogleMap 上绘制多边形?
如何使用 JS 从客户端调用 MVC 上的控制器?
我需要一个特殊的控制器吗(接收 JSON 数据)
是否有任何示例代码?
这是一个非常粗略的示例,说明如何允许用户绘制多边形。
// declare map outside of initialize function so that drawPoints() can use it
var map;
// called when page is loaded
function initialize() {
// arbitrary point
var myLatLng = new google.maps.LatLng(24.88484848484, -70.268858484);
// options to init map with, again arbitrary
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// get our map object
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// array to store markers that user has drawn
var markers = [];
// add event listener to the map to get the click events and draw a marker
google.maps.event.addListener(map, 'click', function(e) {
var marker = new google.maps.Marker();
marker.setPosition(e.latLng);
marker.setMap(map);
marker.setVisible(true);
// push it to the markers array
markers.push(marker);
// add an event listener to each marker so that we can draw a polygon
// once user clicks on on of the markers in the markers array, assuming
// that they are ready to join up the polygon and have it drawn
google.maps.event.addListener(marker, 'click', function(e) {
drawPoints(markers);
// empty the markers array so that the user can draw a new one, without
// them all joining up. this is perphaps where you would want to push
// the markers array to a database, storing the points as latitude/longitude
// values so that they can be retrieved, put into an array, and drawn
// as a polygon again.
markers = [];
});
});
}
function drawPoints(markers) {
var poly = new google.maps.Polygon;
var points = [];
for (var i = 0; i < markers.length; i++) {
points.push(markers[i].getPosition());
}
poly.setMap(map);
poly.setPath(points);
poly.setVisible(true);
}
在这里试试
这也将非常有用。
编辑:我可能应该解释如何绘制多边形......
单击地图会创建一个标记。您可以根据需要创建任意数量。单击已放置的标记之一后,将在标记点之间绘制一个多边形。绘制多边形后,这些标记将不再计入绘制多边形的下一组。