點擊添加標記
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>點擊添加標記圖標</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=60bfe5c3e788a9fab038276f33631a57"></script>
<script language="javascript">
var mapObj,marker,mouseTool;
//初始化地圖對象，加載地圖
function mapInit(){
mapObj = new AMap.Map("iCenter",{
//二維地圖顯示視口
view: new AMap.View2D({
center:new AMap.LngLat(116.397428,39.90923),//地圖中心點
zoom:13 //地圖顯示的縮放級別
})
});
initLine();
}
//在地圖上添加點標記函數
function addMarker(){
marker=new AMap.Marker({
icon:new AMap.Icon({ //複雜圖標
size:new AMap.Size(128,128),//圖標大小
image:"./icon/129.png", //大圖地址
imageOffset:new AMap.Pixel(-28,0)//相對於大圖的取圖位置
}),
position:new AMap.LngLat(116.365467,39.907761),
title:"test1",
draggable:true //是否可拖動
});
marker.setMap(mapObj); //在地圖上添加點
}
function initLine(){
//設置折線的屬性
var polylineOption = {
strokeColor:"#FF33FF",
strokeOpacity:1,
strokeWeight:2
};
//在地圖中添加MouseTool插件
mapObj.plugin(["AMap.MouseTool"],function(){
mouseTool = new AMap.MouseTool(mapObj);
mouseTool.marker({
map:mapObj,
icon:new AMap.Icon({ //複雜圖標
size:new AMap.Size(54,54),//圖標大小
image:"./icon/129.png", //大圖地址
imageOffset:new AMap.Pixel(0,0),//相對於大圖的取圖位置
imageSize:new AMap.Size(54,54)
}),
//position:new AMap.LngLat(116.365467,39.907761),
title:"test1",
draggable:true //是否可拖動
});
});
}
</script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
</body>
</html>2 click連線
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>drag</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=60bfe5c3e788a9fab038276f33631a57"></script>
<script language="javascript">
var mapObj, marker, marker2, linePathArr, polyline, movepolyline, startP, endP, currentPosition;
var markerArr = new Array();
var polylineArr = new Array();
//初始化地圖對象，加載地圖
function mapInit(){
mapObj = new AMap.Map("iCenter",{
//二維地圖顯示視口
view: new AMap.View2D({
center:new AMap.LngLat(116.397428,39.90923),//地圖中心點
zoom:13 //地圖顯示的縮放級別
})
});
addMarker();
}
function addMarker(){
// /////////////////marker 1
marker=new AMap.Marker({
position:mapObj.getCenter(),
draggable:true,
cursor:'move',
extData:{id:"mk1ID"},
title:"mk1"
});
marker.setMap(mapObj);
markerArr.push(marker);
// /////////////////marker 2
marker2=new AMap.Marker({
position:new AMap.LngLat(116.365467,39.907761),
draggable:true,
cursor:'move',
extData:{id:"mk2ID"},
title:"mk2"
});
marker2.setMap(mapObj); //在地圖上添加點
markerArr.push(marker2);
// /////////////////marker 3
marker3=new AMap.Marker({
position:new AMap.LngLat(116.365467,39.917761),
draggable:true,
cursor:'move',
extData:{id:"mk3ID"},
title:"mk3"
});
marker3.setMap(mapObj); //在地圖上添加點
markerArr.push(marker3);
// /////////////////marker 4
marker4=new AMap.Marker({
position:new AMap.LngLat(116.395467,39.917761),
draggable:true,
cursor:'move',
extData:{id:"mk4ID"},
title:"mk4"
});
marker4.setMap(mapObj); //在地圖上添加點
markerArr.push(marker4);
////////////////////////////////////////////////////////////////////////// 添加事件
for(var i=0;i<markerArr.length;i++)
{
// mourse move :mousemove
AMap.event.addListener(mapObj,'mousemove',function(e){
if (startP != null) {
currentPosition=e.lnglat;
clickConnLine();
}
});
AMap.event.addListener(markerArr[i],'click',function(e){
var data=e.target.getExtData().id;
if (startP == null) {
startP = e.target;
} else {
if (startP.getExtData().id != data) {
endP = e.target;
clickConnLine();
drawLine();
} else {
alert("same node");
startP=null;
endP=null;
}
}
});
AMap.event.addListener(markerArr[i],'dragstart',function(e){
var data=e.target;
//alert("markerArr[i].getPosition() :" + e.target.getPosition());
getResult("dragStart--"+data+">"+e.target.getPosition())
});
AMap.event.addListener(markerArr[i],'dragging',function(e){
var data=e.target;
getResult("draggING--"+data+">"+e.target.getPosition());
updateLine(data);
});
AMap.event.addListener(markerArr[i],'dragend',function(e){
var data=e.target;
getResult("draggEND--"+data+"|"+e.target.getPosition());
updateLine(data);
});
}
///////////////////////////////////////////////////////////////////////////
}
function clickConnLine(){
linePathArr=[];
linePathArr[0]=startP.getPosition();
linePathArr[1]=currentPosition;
if (movepolyline != null) {
movepolyline.setMap(null);
}
if (endP == null) {
movepolyline = new AMap.Polyline({
map:mapObj,
path:linePathArr,
strokeColor:"#FF33FF",//線顏色
strokeOpacity:1,//線透明度
strokeWeight:3,//線寬
strokeStyle:"solid"//線樣式
});
}
}
//
function drawLine(){
linePathArr=[];
linePathArr[0]=startP.getPosition();
startMarkerID=startP.getExtData().id;
linePathArr[1]=endP.getPosition();
endMarkerID=endP.getExtData().id;
for (var k=0;k<polylineArr.length;k++) {
if (polylineArr[k].getExtData().sID == startMarkerID || polylineArr[k].getExtData().sID == endMarkerID) {
if (polylineArr[k].getExtData().eID == startMarkerID || polylineArr[k].getExtData().eID == endMarkerID) {
alert("same line");
startP=null;
endP=null;
return;
}
}
}
polyline = new AMap.Polyline({
map:mapObj,
path:linePathArr,
strokeColor:"#FF33FF",//線顏色
strokeOpacity:1,//線透明度
strokeWeight:3,//線寬
strokeStyle:"solid",//線樣式
extData:{sID:startMarkerID, eID:endMarkerID}
});
startP=null;
endP=null;
polylineArr.push(polyline);
}
function updateLine(mkr){
for (var j=0;j<polylineArr.length;j++) {
if (polylineArr[j].getExtData().sID == mkr.getExtData().id || polylineArr[j].getExtData().eID == mkr.getExtData().id) {
polylineArr[j].setMap(null);
linePathArr=polylineArr[j].getPath();
if (polylineArr[j].getExtData().sID == mkr.getExtData().id) {
linePathArr[0]=mkr.getPosition();
} else {
linePathArr[1]=mkr.getPosition();
}
polylineArr[j] = new AMap.Polyline({
map:mapObj,
path:linePathArr,
strokeColor:"#FF33FF",//線顏色
strokeOpacity:1,//線透明度
strokeWeight:3,//線寬
strokeStyle:"solid",//線樣式
extData:{sID:polylineArr[j].getExtData().sID, eID:polylineArr[j].getExtData().eID}
});
}
}
}
function getResult(str){
document.getElementById('resultInfo').innerHTML = document.getElementById('resultInfo').innerHTML + "<br/>" + str;
}
</script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div id="resultInfo" style="margin-top:10px;margin-left:10px;height:50px"></div>
</body>
</html>