高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口,移动端、PC端一体化设计,一套 API 兼容众多系统平台。
JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求,同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。下面我们以绘制三角形练习高德地图的API。
我们先来了解一下绘制三角形需要用到的API: Polygon和PolyEditor
了解了API后,我们就要实现绘制图形的功能:
基本思路:
1. 申请高德地图的开发者账号, 登陆之后,在进入「应用管理」 页面「创建新应用」 , 为应用添加Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
2. 获取地图上三个点的坐标(通过添加点击事件监听器获取)
3. 根据坐标创建Polygon对象
4. 创建PolyEditor对象,打开编辑功能绘制Polygon图形
具体代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>绘制三角形</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><style type="text/css">#tipinput {
z-index: auto;
}
#container {
z-index: -1;
}
//下面的key填高德上建立的应用的key
</style><script src="http://webapi.amap.com/maps?v=1.3&key=a64536b5a5606f9a5dcf4103220c6208&plugin=AMap.PolyEditor"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>
<script>
//初始化map对象("container"是用于显示地图的div的ID)
var map = new AMap.Map("container", {
resizeEnable: true, //监控地图容器尺寸变化
center: [116.403322, 39.900255], //初始化地图中心点
zoom: 13 //地图显示的缩放级别
});
var beginNum = 0; //标记数目
var clickListener ; //点击事件
var beginPoints; //轨迹坐标
var beginMarks ; //标记
var polygonEditor;
var resPolygon = []; //完成的图形
var resNum = 0; //完成的数量
init();
function init(){
beginPoints = [];
beginMarks = [];
beginNum = 0;
polygonEditor = '';
//添加地图点击事件的监听器
clickListener = AMap.event.addListener(map, "click", mapOnClick);
}
function mapOnClick(e) {
beginMarks.push(addMarker(e.lnglat));
beginPoints.push(e.lnglat);
beginNum++;
//地图上标记点为3个
if(beginNum == 3){
AMap.event.removeListener(clickListener);
var polygon = createPolygon(beginPoints);
polygonEditor = createEditor(polygon);
clearMarks();
}
};
// 实例化点标记
function addMarker(lnglat) {
//创建标记对象
var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: lnglat //经纬度
});
marker.setMap(map);//使标记显示在地图上
return marker;
}
function createPolygon(arr){
var polygon = new AMap.Polygon({
map: map, //要显示该polygon的地图对象
path: arr, //多边形轮廓线的节点坐标数组
strokeColor: "#0000ff", //线条颜色
strokeOpacity: 1, //轮廓线透明度
strokeWeight: 3, //轮廓线宽度
fillColor: "#f5deb3", //多边形填充颜色
fillOpacity: 0.35 //多边形填充透明度
});
return polygon;
}
//创建polygonEditor并绘制polygon
function createEditor(polygon){
var polygonEditor = new AMap.PolyEditor(map, polygon);
polygonEditor.open();
AMap.event.addListener(polygonEditor,'end',polygonEnd);
polygonEditor.close();
return polygonEditor;
}
//绘制结束,重置标记
function polygonEnd(res){
resPolygon.push(res.target);
resNum++;
init();
}
//移除所以标记
function clearMarks(){
map.remove(beginMarks);
}
</script>
</body>
</html>
最终效果:
个人总结:
Polygon和PolyEditor要配合使用才能有效果,绘制结束后PolyEditor并没有关闭,要调用close方法手动关闭本次绘制。
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}