最近項目有一個功能需求，在地圖上打一個圖標圖標，可以拖動移動它的位置，獲取當前位置座標。直接上代碼，提供參考。
要實現這個功能，需要用到 arcgis api 內置的一些鼠標事件，例如：鼠標拖曳（mouse-drag）、鼠標按下（mouse-down）、鼠標放開（mouse-up）。
功能原理：當鼠標按住標註拖動時，觸發鼠標拖曳（mouse-drag）事件，實時更新標註的位置座標。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
<script type="text/javascript">
//下面這段代碼必須放到下面幾個腳本文件的上面，否則會錯誤
var dojoConfig = {
api_url: "localhost/arcgis_js_api/library/3.18/3.18",
async : false,
isDebug : true,
parseOnLoad : true,
mblHideAddressBar : false,
packages : [{
name: "lib",
location: location.pathname.replace(/\/[^/]+$/, '') + '/lib'
}]
};
</script>
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js"></script>
<script type="text/javascript">
var map, mapCenter;
var selected;
var youtian = "youtianLayer";
var _x, _y, youtianLayer;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/SpatialReference",
"esri/graphic",
"dojo/domReady!"
], function (Map, Tiled, GraphicsLayer, Point, SimpleMarkerSymbol, PictureMarkerSymbol, InfoTemplate, SpatialReference, Graphic) {
map = new Map("map_canvas", {
logo: false,
slider: true
});
//添加基礎底圖
var basemap = new Tiled("http://192.168.0.196:6080/arcgis/rest/services/GDXJ/DT/MapServer");
map.addLayer(basemap, 0);
youtianLayer = new GraphicsLayer({ id: youtian });
map.addLayer(youtianLayer);
var pms = new PictureMarkerSymbol("../images/RedPin1LargeB.png", 64, 64);
var attr = { "ID": "1", "名稱": "地圖標註" };
var infoTemplate = new InfoTemplate("企業信息", "企業名稱：${ID}<br/>設備故障數：${名稱}");
var point1 = new Point(117.12277857421876, 36.632967052981364, new SpatialReference({ wkid: 4326 }));
youtianLayer.add(new Graphic(point1, pms, attr, infoTemplate));
var point = new Point(98.01, 33.80, new SpatialReference({ wkid: 4326 }));
youtianLayer.add(new Graphic(point, pms, attr, infoTemplate));
youtianLayer.on("mouse-down", function (e) {
map.disablePan();
selected = e.graphic;
})
youtianLayer.on("mouse-up", function (e) {
console.log(2);
map.enablePan();
selected = "";
//此處可以寫相關的移動標註之後相應的操作，比如保存數據庫等
//alert("11");
})
//地圖拖動，重新給GraphicsLayer賦值座標位置
map.on("mouse-drag", function (e) {
if (selected) {
var lon = Math.round(e.mapPoint.getLongitude() * 1000) / 1000; //經度
var lat = Math.round(e.mapPoint.getLatitude() * 1000) / 1000; //維度
var pt = new Point(lon, lat, new SpatialReference({ wkid: 4326 })) //GPS使用的是WGS84座標
selected.setGeometry(pt);//給所要移動的圖標從新賦值座標
}
})
map.on("mouse-up", function (evt) {
console.log(1);
selected = "";
map.enablePan();
//此處也可以寫相關的移動標註之後相應的操作，比如保存數據庫等
})
});
</script>
<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>