最新代码-http://jsfidle.net/ysqdh/88/-
这个版本使用gDouglasPeuker从绘制的版本中创建一个rudamentary多边形形状-http://jsfiddle.net/ysqdh/94/
^这将禁用用于绘制的映射,并在创建形状后再次启用该映射。
我正在开发一个谷歌地图应用程序。而不是多边形点击练习。我想要能够画一个形状-然后转换成一个多边形。
下面是我的最新应用程序-http://jsfiddle.net/cbk9j/168/
我找到了下面的代码--但我不确定如何将其合并到示例中。我还没有找到任何免费手工绘图的文档,我也不确定这些功能是否存在于google maps绘图管理器中。
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() ]];
})
];
});
}
}
}
null
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>