入门指导-Web API

覆盖物 JavaScript API

地图覆盖物概述

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

地图API提供了如下几种覆盖物：

Marker：标注表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

添加/删除覆盖物

创建点

下面是创建点的示例：

     
var map = new BigMap.Map("map");
var point = new BigMap.Point(112.404, 35.915);
map.centerAndZoom(point, 5);
	
//创建点
var point = new BigMap.Point(115.398773,30.925272);
var marker = new BigMap.Marker(point);

创建圆

下面是创建园的示例：

//创建圆
var pointCircle = new BigMap.Point(110.398773,40.925272);
var circle = new BigMap.Circle(pointCircle, 50, {
	fillColor:"#CCF3FF",
	fillWeight:2,
	fillOpacity: 0.6,
	strokeColor: "#Efd345",
	strokeWeight: 2,
	strokeOpacity: 0.5
});

创建线

下面是创建园的示例：

//创建线
var pointlineArray = new Array();
pointlineArray.push(new BigMap.Point(116.398773,39.925272));
pointlineArray.push(new BigMap.Point(115.368773,35.875272));
pointlineArray.push(new BigMap.Point(115.388773,33.885272));
var polyline = new BigMap.Polyline(pointlineArray,{
	strokeColor : "#FF00FF",
	strokeWeight : 5,
	strokeOpacity: 0.8
});

创建多边形

下面是创建多边形的示例：

//创建多边形
var pointArray = new Array();
pointArray.push(new BigMap.Point(106.398773,38.925272));
pointArray.push(new BigMap.Point(114.368773,35.875272));
pointArray.push(new BigMap.Point(110.388773,30.885272));
var polygon = new BigMap.Polygon(pointArray, {
	fillColor:"#CC87FF",
	fillWeight:2,
	fillOpacity: 0.6,
	strokeColor: "#0000ff",
	strokeWeight: 2,
	strokeOpacity: 0.5
});

添加/清除覆盖物

下面是添加/清除覆盖物的示例：

//添加覆盖物
function add_overlay(){
	map.addOverlay(marker);//增加点
	map.addOverlay(circle);//增加圆
	map.addOverlay(polyline);//增加线
	map.addOverlay(polygon);//增加多边形
}
//清除覆盖物
function remove_overlay(){
	map.clearOverlays();         
}

设置点是否可拖拽

拖拽示例

var map = new BigMap.Map("map");
var point = new BigMap.Point(116.400244,39.92556);
map.centerAndZoom(point, 10);
var marker = new BigMap.Marker(point);// 创建标注
map.addOverlay(marker);             // 将标注添加到地图中,默认是不可以拖拽

//开启拖拽
function setEnableDragging() {
	marker.enableDragging(map);
}
//禁用拖拽
function setDisableDragging() {
	marker.disableDragging(map);
}

设置线/面可编辑

创建地图

var map = new BigMap.Map("map");
var point = new BigMap.Point(110.400244,34.92556);
map.centerAndZoom(point, 5);

创建线

创建线的示例

//创建线
var pointlineArray = new Array();
pointlineArray.push(new BigMap.Point(116.398773,39.925272));
pointlineArray.push(new BigMap.Point(115.368773,34.875272));
pointlineArray.push(new BigMap.Point(115.388773,30.885272));
var polyline = new BigMap.Polyline(pointlineArray,{
	strokeColor : "#FF00FF",
	strokeWeight : 5,
	strokeOpacity: 0.8
});

创建多边形

创建多边形的示例

//创建多边形
var pointArray = new Array();
pointArray.push(new BigMap.Point(106.398773,38.925272));
pointArray.push(new BigMap.Point(114.368773,35.875272));
pointArray.push(new BigMap.Point(110.388773,30.885272));
var polygon = new BigMap.Polygon(pointArray, {
	fillColor:"#CC87FF",
	fillWeight:2,
	fillOpacity: 0.6,
	strokeColor: "#0000ff",
	strokeWeight: 2,
	strokeOpacity: 0.5
});
map.addOverlay(polyline);//增加线
map.addOverlay(polygon);//增加多边形

function setEnableEditing() {
	polyline.enableEditing(map);
	polygon.enableEditing(map);
}

function setDisableEditing() {
	polyline.disableEditing(map);
	polygon.disableEditing(map);
}

设置覆盖物显示/隐藏

覆盖物显示/隐藏示例

var map = new BigMap.Map("map");
var point = new BigMap.Point(110.400244,34.92556);
map.centerAndZoom(point, 5);

//创建一个标注
var point = new BigMap.Point(115.398773,30.925272);
var marker = new BigMap.Marker(point);
map.addOverlay(marker);

//绘制一个圆
var pointCircle = new BigMap.Point(110.398773,35.925272);
var circle = new BigMap.Circle(pointCircle, 50, {
	fillColor:"#CCF3FF",
	fillWeight:2,
	fillOpacity: 0.6,
	strokeColor: "#Efd345",
	strokeWeight: 2,
	strokeOpacity: 0.5
});
map.addOverlay(circle);//添加一个圆

//绘制一条折线
var pointlineArray = new Array();
pointlineArray.push(new BigMap.Point(116.398773,39.925272));
pointlineArray.push(new BigMap.Point(115.368773,36.875272));
pointlineArray.push(new BigMap.Point(115.388773,33.885272));
polyline = new BigMap.Polyline(pointlineArray,{
	strokeColor : "#FF00FF",
	strokeWeight : 5,
	strokeOpacity: 0.8
});
map.addOverlay(polyline);//添加一条折线

function hide() {
	marker.hide();
	circle.hide();
	polyline.hide();
}

function show() {
	marker.show();
	circle.show();
	polyline.show();
}

添加文字标注

添加文字标注示例

var map = new BigMap.Map("map");
var point = new BigMap.Point(110.400244,34.92556);
map.centerAndZoom(point, 5);

var label = new BigMap.Label("我的家园",{
	point: new BigMap.Point(112.368773,39.875272)
});
label.setStyle({
	"borderColor" : "#000",
       "color" : "red",
       "fontSize" : "16px",
       "height" : "30px",
       "lineHeight" : "30px"
});
map.addOverlay(label);

添加多个点

添加多个点示例

var map = new BigMap.Map("map");
var point = new BigMap.Point(110.400244,34.92556);
map.centerAndZoom(point, 4);

// 编写自定义函数,创建标注
function addMarker(point){
  var marker = new BigMap.Marker(point);
  map.addOverlay(marker);
}
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 25; i ++) {
	var point = new BigMap.Point(sw.lng + lngSpan * Math.random(), ne.lat - latSpan * (Math.random() * 0.7));
	addMarker(point);
}

目录