1.js显示地图
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><!-- 引入高德地图的样式 -->
<script src="http://webapi.amap.com/maps?v=1.3&key=aafdf4a9edda043681ff641e6d9b9ee8"></script><!-- 传入key --> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script><!-- 引入高德地图js文件 -->
<div id="container" style="width:49%;height: 80%;"></div><!--放置地图的div --> <div id="container2" style="width:49%;height: 80%;"></div>
/* 选择容器;设置地图的中心点,并标记 */ 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:"<span style='color: red'>"+name+"</span>"/* 这里写的是html代码 */ })