高德地图使用鼠标工具(mouseTool)画覆盖物折线(mouseTool.polyline)，光标使用十字架(crosshair)类型，不断出现closehand小手图标干扰

今天在使用高德地图的时候，使用鼠标工具进行地图范围折线标注，但是发现鼠标在画第二个点，鼠标落下的时候会自动请求这个URL http://webapi.amap.com/theme/v1.3/closedhand.cur，如图：请求返回的是鼠标悬浮的小手(.cur光标文件)，如下图：

然后介绍一下这个小手什么时候它会显示:经过我的测试，发现它在我的鼠标在移到我绘制的线和正在绘制的线上面的时候显示为小手，如下图：

，

这个也许是高德地图对热点移动到覆盖物上时自动请求这个图标回来，正常情况下也没什么影响，但是现在我在绘线过程中它会一直与十字架光标交替闪烁出现，这是客户不能接受的，我也不能接受，希望的是在绘画过程中一直保持十字架光标用以区分绘线和退出的状态。

因为它的热点就是光标的热点，而这就直接导致我在后续的绘线过程中，鼠标的热点一直在我的线上，这样就一直闪烁的显示小手和十字架光标，因为在移动的时候(快速移动==>)，热点下面还没有线的显示，那段时间是不会显示小手，但是只要慢了，光标下面就会有线，导致小手图标与十字架图标一直不停换着显示，这种情况会在strokeWeight（线宽）的值越大的时候越严重。

我阅读了高德官方的开发者文档，但是并没有找到能解决的办法（如果有朋友有官方的解决办法请留言告诉我，谢谢了）。

最后我的解决办法是给地图的容器div设置鼠标样式，如下图：

现在无论我怎么画线，光标都能一直保持十字架crosshair光标，当然我这里只是大概讲了一下思路，后续功能的完善就不细讲了，你可以把这个样式用两个class来定义，通过点击事件控制某个参数，在行内使用三元表达式来控制鼠标的样式，以此实现开始绘线和停止绘线的状态。

下面是我自己的例子：

<div id="containes" style="width:100%; height:100%" :class="[cursor ? 'cursorCrosshair' : 'cursorPointer']" />

这下面是测试用的简单例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=78bfb693a2a4c44c028a8be7c2e0f1b7&plugin=AMap.PolyEdito"></script><script src="https://webapi.amap.com/maps?v=1.4.15&key=78bfb693a2a4c44c028a8be7c2e0f1b7&plugin=AMap.MouseTool"></script><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=78bfb693a2a4c44c028a8be7c2e0f1b7&plugin=AMap.PolyEdito,AMap.MouseTool,AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script><title>Title</title>
</head>
<body>
<div id="container" style="width:100%; height: 100%;"></div>
<div style="position: absolute;top: 30px;left: 500px"><input id="tipinput" /><button id="polyline">开始绘图</button><button id="clear">取消绘图</button>
</div>
<style type="text/css">html,body{width: 100%;height: 100%;margin: 0px;}
</style>
<script>//新建地图var map = new AMap.Map('container',{center: [106.535499, 29.546464],resizeEnable: true,zoom: 18});var overlays = [];//新建鼠标工具var mouseTool = new AMap.MouseTool(map);//搜索位置var autoOptions = {input: 'tipinput',city: '重庆'}var auto = new AMap.Autocomplete(autoOptions)var placeSearch = new AMap.PlaceSearch({map: map,zoom: 12}) // 构造地点查询类AMap.event.addListener(auto, 'select', select)// 注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode)placeSearch.search(e.poi.name) // 关键字查询查询}//鼠标连线监听时间mouseTool.on('draw', (type, obj) => {var map_m = type.obj.getPath()console.log('AAA',map_m)})//开始绘图事件document.getElementById('polyline').onclick = function(){// map.setDefaultCursor("crosshair")mouseTool.polyline({strokeColor:'red',strokeWeight: 6,//同Polyline的Option设置});}//清楚绘图事件document.getElementById('clear').onclick = function(){// map.setDefaultCursor("pointer")map.remove(overlays)overlays = [];mouseTool.close(true)}
</script>
<style>#container {cursor : crosshair !important;}
</style>
</body>
</html>

若有小伙伴有更好的高德官方解决方案请留言给我，谢谢

高德地图使用鼠标工具(mouseTool)画覆盖物折线(mouseTool.polyline)，光标使用十字架(crosshair)类型，不断出现closehand小手图标干扰相关推荐

高德地图坐标查询工具——JavaScript
原文出处: http://www.2cto.com/kf/201311/260807.html 最近需要查询高德地图上某个地点的坐标,但是苦于高德地图没有提供这样的功能.幸运的是,高德地图提供了jav ...
JLabel鼠标停在上面显示小手图标点击跳转到相应网页
//鼠标显示小手标志Cursor myCursor = new Cursor(Cursor.HAND_CURSOR); jblFgt = new JLabel("点击显示小手形状" ...
今日收获可以点击的标签鼠标悬浮小手图标
在style中添加cursor:pointer 实现鼠标悬停变成小手样式. 没用过这个属性:cursor 查询详细如下: cursor:hand也是表示文本选择效果 cursor: url(" ...
高德地图-添加一个或多个覆盖物
https://lbs.amap.com/demo/jsapi-v2/example/common/add-several-overlay 添加如下,可显示点.线面 map.add([marker, ...
鼠标移动到按钮上显示小手图标
<input type="submit" value="ok" style="cursor:hand" /> 转载于:https ...
高德地图面积测量在地图上的面积块上增加清除功能
前言业务需求用到了高德地图的鼠标工具的测量距离和测量面积,其中测量距离绘制出来后地图上有按钮可以清除,但是面积画完后没有清空按钮,如下图: 参考连接 codepen在线预览产品提出需求,面积画完后 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
vue 高德地图多边形_Vue + 高德地图画矢量图
功能需求引入并创建地图支持鼠标工具鼠标画矢量图(线.圆.矩形.多边形) 支持矢量图编辑.获取各点经纬度及求面积等操作自定义鼠标右键事件一图胜千言,效果图如下创建地图对象 //DOM加载后动 ...
JS百度地图高德地图API的接入与使用
1.实现功能 1.显示地图移动地图缩放地图拖拽地图显示地图小部件 2.添加删除自定义覆盖物(服务区) 点弹跳动画添加文字标签/图标/ 点聚合 3.点聚合功能 4.弹出文字信息窗口弹出图文信 ...

高德地图使用鼠标工具(mouseTool)画覆盖物折线(mouseTool.polyline)，光标使用十字架(crosshair)类型，不断出现closehand小手图标干扰

高德地图使用鼠标工具(mouseTool)画覆盖物折线(mouseTool.polyline)，光标使用十字架(crosshair)类型，不断出现closehand小手图标干扰相关推荐

最新文章

热门文章