最新代码 - http://jsfiddle.net/YsQdh/88/ -
此版本使用 gDouglasPeuker 从绘制版本创建基本的多边形形状 - http://jsfiddle.net/YsQdh/94/
^ 这将禁用 map 绘制，并在创建形状后再次启用它。
我正在开发一个谷歌地图应用程序。与多边形点和点击练习相反。我希望能够绘制一个形状 - 然后将其转换为多边形。
这是我最新的申请 - http://jsfiddle.net/Cbk9J/168/
我找到了以下代码 - 但我不确定如何将其合并到示例中。我没有找到任何免费手绘的文档，我不确定这些功能是否存在于谷歌地图绘图管理器中。
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>
关于javascript - 谷歌地图手绘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22758950/
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=
我正在尝试从googleAPI下载client_secret.json。我正在执行https://developers.google.com/gmail/api/quickstart/ruby中列出的步骤.使用此向导在GoogleDevelopersConsole中创建或选择项目并自动启用API。在左侧边栏中，选择同意屏幕。选择电子邮件地址并输入产品名称(如果尚未设置)，然后单击“保存”按钮。在左侧边栏中，选择凭据并点击创建新客户端ID。选择应用程序类型已安装应用程序，已安装应用程序类型为其他，然后单击“创建客户端ID”按钮。点击新客户端ID下的下载JSON按钮。将此文件移动到您的工作
我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click
🎉精彩专栏推荐💭文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业：【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码：【🔰Echarts大屏展示大数据平台可视化(150套)】🔖HTML+CSS+JS实例代码：【🗂️5000套HTML+CSS+JS实例代码(炫酷代码)继续更新中…】🎁免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程120G干货分享】🥇关于作者:💬历任研发工程师，技术组长，教学总监；