1.js显示地图
/* 选择容器；设置地图的中心点，并标记 */ var marker, map = new AMap.Map("container", { resizeEnable: true, center: [114.290924,30.601394], zoom: 13 }); /* 设置地图的中心点，并标记 */ var marker2, map2 = new AMap.Map("container2", { resizeEnable: true, center: [114.290924,30.601394], zoom: 13 }); 2.点击获取地图经纬度坐标；创建marker点
/* 点击获取地图坐标 */ var clickEventListener = map.on('click', function(e) { document.getElementById("xy").value = e.lnglat.getLng() + ',' + e.lnglat.getLat(); /* 点击一次新增一个标记点 */ var marker= new AMap.Marker({ map:map, position:[e.lnglat.getLng(),e.lnglat.getLat()] }); }); 3.在地图上绘制多边形折线
//在地图上绘制折线 var editor={}; editor._polygon=(function(){ return new AMap.Polygon({ map: map, path: lineArr,/* 这里是一个数组； */ strokeColor: "#0000ff", strokeOpacity: 1, strokeWeight: 3, fillColor: "#CD2626", fillOpacity: 0.35 }); })(); map.setFitView(); editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon); 第二种绘制图形
// 绘制轨迹 var polyline = new AMap.Polyline({ map: map, path: lineArr,/* 这里是坐标数组 */ strokeColor: "red", //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 1, //线宽 strokeStyle: "solid" //线样式 }); map.setFitView(); /* 将画线的区域渲染颜色*/ var polygon = new AMap.Polygon({ map: map, fillOpacity:0.4, path: lineArr }); 4.开始编辑多边形；结束编辑多边形
/* 开始编辑 */ editor.startEditPolygon=function(){ editor._polygonEditor.open(); } /*结束编辑 */ editor.closeEditPolygon=function(){ /* 结束编辑时会自动将坐标全部存在数组内 ；将数组转为字符串，以#号分隔 */ var arg = lineArr.join("#"); document.getElementById("arg").value=arg+"#"; /* 这里是将数组转成的字符串存起来 */ editor._polygonEditor.close(); } 5.清除标记的方法
map.clearMap();
6，当时为了去除地图上的样式，起到刷新地图的效果；没有找到更好的方法，选择的重新加载一遍地图。覆盖之前的；也就是在div里重新加载一次；
7，自定义图标以及样式
marker= new AMap.Marker({ title:name,/* 鼠标放上去显示的标题 */ map: map, position: arr,/* 坐标数组*/ icon: new AMap.Icon({ size: new AMap.Size(50,50), //图标大小 image: "static/img/1.png",/*图片路径 */ imageOffset: new AMap.Pixel(0,0)/* 偏移量 */ }) }); marker.setLabel({ //label默认蓝框白底左上角显示，样式className为：amap-marker-label；可以在css样式里调整 offset: new AMap.Pixel(-20,20),//修改label相对于maker的位置 content:""+name+""/* 这里写的是html代码 */ }) 8.自定义标记及标记里面的文字
AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) { new SimpleMarker({ //普通文本 iconLabel: '起', iconStyle: 'green', map: map, position: [arr[0].y,arr[0].x] }); new SimpleMarker({ //普通文本 iconLabel: '终', iconStyle: 'red', map: map, position: [arr[arr.length-1].y,arr[arr.length-1].x] }); }); 9.多边形图形添加点击事件、多边形点击事件、弹窗信息
//在指定位置打开信息窗体 function openInfo() { alert(123); //构建信息窗体中显示的内容 var info = []; info.push(" ![](\")
"); info.push(" 高德软件
"); info.push(" 电话 : 010-84107000 邮编 : 100102
"); info.push(" 地址 :北京市朝阳区望京阜荣街10号首开广场4层
"); infoWindow = new AMap.InfoWindow({ content: info.join("") //使用默认信息窗体框样式，显示信息内容 }); infoWindow.open(map, map.getCenter()); } var polygon = new AMap.Polygon({ map: map, path: lineArr,/* 这里是一个数组； */ strokeColor: "#0000ff", strokeOpacity: 1, strokeWeight: 3, fillColor: "#CD2626", fillOpacity: 0.35 }); //多边形添加点击事件 polygon.on('click', function(){ openInfo(); });