[英]Google Map Drawing freehand
LATEST CODE - http://jsfiddle.net/YsQdh/88/ -最新代码 - http://jsfiddle.net/YsQdh/88/ -
THIS VERSION USES gDouglasPeuker to create a rudamentary polygon shape from the drawn version - http://jsfiddle.net/YsQdh/94/此版本使用 gDouglasPeuker 从绘制版本创建基本多边形形状 - http://jsfiddle.net/YsQdh/94/
^ this disables the map for drawing, and enables it again after creating the shape. ^ 这将禁用地图绘制,并在创建形状后再次启用它。
I am working on a google map application.我正在开发一个谷歌地图应用程序。 As opposed to a polygon point and click exercise.与多边形点和单击练习相反。 I want to be able to draw a shape - that is then converted into a polygon.我希望能够绘制一个形状 - 然后将其转换为多边形。
Here is my latest application - http://jsfiddle.net/Cbk9J/168/这是我的最新应用程序 - http://jsfiddle.net/Cbk9J/168/
I have found the following code - but I am unsure how to incorporate this into the example.我找到了以下代码 - 但我不确定如何将其合并到示例中。 I have not found any documentation to free hand drawing and I am unsure if these functions exist in the google maps drawing manager.我没有找到任何免费手绘的文档,我不确定谷歌地图绘图管理器中是否存在这些功能。
var completeFreehand = function (changed) {
if (changed) {
isUserPolygon = true;
updateLocation();
}
unhighlightControls();
showMessages();
updateListingResults();
};
var completeDelete = function() {
map.endDeleteSearchArea();
unhighlightControls();
showMessages();
};
var cancelDelete = function() {
if (map.isDeletingSearchArea()) {
completeDelete();
updateListingResults();
enableControls();
}
return false;
};
var cancelFreehand = function () {
if (map.isDrawingFreehand()) {
map.cancelFreehand();
completeFreehand();
enableControls();
}
};
var clearMap = function (silent) {
map.clearSearchArea(silent);
mostRecentPinCount = 0;
enableControls();
map.clearMarkers(true);
return false;
};
var drawFreehand = function (element) {
if (map.isDrawingFreehand()) {
cancelFreehand();
return;
} else if (map.isDeletingSearchArea()) {
completeDelete();
}
disableControls(true);
highlightControl(element);
hideMessages();
if ( $(element).hasClass('js-maps-btn-add') ) {
$('.js-maps-status-message-draw').removeClass('is-hidden');
} else {
$('.js-maps-status-message-new').removeClass('is-hidden');
}
map.clearMarkers();
map.drawFreehand(completeFreehand);
updateBasePolygon();
return false;
};
function updateBasePolygon () {
if (typeof(basePolygon) == 'undefined') {
var polys = map.getPolygons();
if (polys.length) {
basePolygon = $.map(polys, function (val, i) {
var a = val.getPath().getArray();
return [
$.map(a, function (val, i) {
return [[ val.lat(), val.lng() ]];
})
];
});
}
}
}
function drawFreeHand() { //the polygon poly=new google.maps.Polyline({map:map,clickable:false}); //move-listener var move=google.maps.event.addListener(map,'mousemove',function(e){ poly.getPath().push(e.latLng); }); //mouseup-listener google.maps.event.addListenerOnce(map,'mouseup',function(e){ google.maps.event.removeListener(move); var path=poly.getPath(); poly.setMap(null); poly=new google.maps.Polygon({map:map,path:path}); google.maps.event.clearListeners(map.getDiv(), 'mousedown'); enable() }); } function disable(){ map.setOptions({ draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: false }); } function enable(){ map.setOptions({ draggable: true, zoomControl: true, scrollwheel: true, disableDoubleClickZoom: true }); } function initialize() { var mapOptions = { zoom: 14, center: new google.maps.LatLng(52.5498783, 13.425209099999961), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //draw $("#drawpoly a").click(function(e) { e.preventDefault(); disable() google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){ drawFreeHand() }); }); } google.maps.event.addDomListener(window, 'load', initialize);
html,body{height:100%;margin:0} #map_canvas{height:500px; width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> <div id="drawpoly"><a href="#">Click Here To Draw On Map</a></div> <div id="map_canvas"></div>
The latest answer - http://jsfiddle.net/YsQdh/94/最新答案 - http://jsfiddle.net/YsQdh/94/
This contains the gDouglasPeuker algorithm这包含 gDouglasPeuker 算法
var theArrayofLatLng = path.j;
var ArrayforPolygontoUse= GDouglasPeucker(theArrayofLatLng,50);
console.log("ArrayforPolygontoUse", ArrayforPolygontoUse);
var polyOptions = {
map: map,
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2,
clickable: false,
zIndex: 1,
path:ArrayforPolygontoUse,
editable: false
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.