简介： 1.js 显示地图，选择容器；设置地图的中心点，并标记。 var marker, map = new AMap.
1.js 显示地图
1
| <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><!-- 引入高德地图的样式 -->
|
1
2
| <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文件 -->
|
1
2
| <div id="container" style="width:49%;height: 80%;"></div><!--放置地图的div -->
<div id="container2" style="width:49%;height: 80%;"></div>
|
1
2
3
4
5
6
7
8
9
10
11
12
| /* 选择容器；设置地图的中心点，并标记 */
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 点
1
2
3
4
5
6
7
8
9
| /* 点击获取地图坐标 */
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.在地图上绘制多边形折线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //在地图上绘制折线
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);
|
第二种绘制图形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 绘制轨迹
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.开始编辑多边形；结束编辑多边形
1
2
3
4
5
6
7
8
9
10
11
12
| /* 开始编辑 */
editor.startEditPolygon=function(){
editor._polygonEditor.open();
}
/*结束编辑 */
editor.closeEditPolygon=function(){
/* 结束编辑时会自动将坐标全部存在数组内
；将数组转为字符串，以#号分隔 */
var arg = lineArr.join("#");
document.getElementById("arg").value=arg+"#"; /* 这里是将数组转成的字符串存起来 */
editor._polygonEditor.close();
}
|
5.清除标记的方法
6，当时为了去除地图上的样式，起到刷新地图的效果；没有找到更好的方法，选择的重新加载一遍地图。覆盖之前的；也就是在 div 里重新加载一次；
7，自定义图标以及样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 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代码 */
})
|