今天在使用高德地圖的時候，使用鼠標工具進行地圖範圍折線標註，但是發現鼠標在畫第二個點，鼠標落下的時候會自動請求這個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>
若有小夥伴有更好的高德官方解決方案請留言給我，謝謝