您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
百度地图javascript接口开发-label标注-折线-多边形-圆-海量点
发布时间：2016-11-20 14:24:54编辑：雪饮阅读（）
Label标记示例:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="initial-scale,user-scalable=no" />
<title>百度地图使用示例</title>
<style type="text/css">
body,html,#container{
width:100%;height:100%;overflow:hidden;margin:0 auto;font-family:"微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s9vYSVwPjtPFv00vuxKzoNxD"></script>
<script type="text/javascript">
var map;//地图对象
var oldLongitude;//保存改变之后的经度
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//以point居中，并放大级别15
map.enableScrollWheelZoom();//开启鼠标滚动对地图进行缩放
//添加标记
var marker=new BMap.Marker(map.getCenter());
map.addOverlay(marker);
//标记添加结束
//添加标记下标标注
var labelOptions={position:map.getCenter(),offset:new BMap.Size(0,0),enableMassClear:false};//enableMassClear参数设置是否允许被清除
var label=new BMap.Label("label演示",labelOptions);
map.addOverlay(label);
//添加标记下标标注结束
//清除标记
map.clearOverlays();
}
</script>
</head>
<body onLoad="InitMap();">
<div id="container"></div>
</body>
</html>
折线图示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body,html,#container{
width:100%;height:100%;overflow:hidden;margin:0 auto;font-family:"微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s9vYSVwPjtPFv00vuxKzoNxD"></script>
<script type="text/javascript">
var map;//地图对象
var oldLongitude;//保存改变之后的经度
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//以point居中，并放大级别15
map.enableScrollWheelZoom();//开启鼠标滚动对地图进行缩放
//绘制折线
var polylineOptions={
strokeColor:'green',//折线颜色
strokeWeight:4,//折线宽度，以像素为单位
strokeOpacity:1,//折线透明度0-1
strokeStyle:'dashed',//折线样式，solid或dashed
enableEditing:true,//是否启用折线上面的点的编辑功能，启用后点击折线上某点就可以显示“到这里去”的信息框
};
var points=[
new BMap.Point(104.036392,30.672454),
new BMap.Point(104.055724,30.659034),
new BMap.Point(104.074984,30.673634),
new BMap.Point(104.064168,30.684784),
new BMap.Point(104.045268,30.681368)
];
var polyline=new BMap.Polyline(points,polylineOptions);
map.addOverlay(polyline);
//折线绘制结束
}
</script>
</head>
<body onLoad="InitMap();">
<div id="container"></div>
</body>
</html>
多边形,圆与海量点示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body,html,#container{
width:100%;height:100%;overflow:hidden;margin:0 auto;font-family:"微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s9vYSVwPjtPFv00vuxKzoNxD"></script>
<script type="text/javascript">
var map;//地图对象
var oldLongitude;//保存改变之后的经度
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,15);//以point居中，并放大级别15
map.enableScrollWheelZoom();//开启鼠标滚动对地图进行缩放
//绘制多边形
var polylineOptions={
fillColor:"red",//填充颜色
strokeWeight:4,//边线宽度，以像素为单位
strokeOpacity:1,//边线透明度0-1
strokeStyle:'dashed',//边线样式，solid或dashed
fillOpacity:0.5,//填充透明度
};
var points=[
new BMap.Point(104.036392,30.672454),
new BMap.Point(104.055724,30.659034),
new BMap.Point(104.074984,30.673634),
new BMap.Point(104.064168,30.684784),
new BMap.Point(104.045268,30.681368)
];
var polyline=new BMap.Polygon(points,polylineOptions);
//map.addOverlay(polyline);
//多边形绘制结束
//绘制圆
var circleOptions=polylineOptions;
var circle=new BMap.Circle(map.getCenter(),2000,circleOptions);//以circleOptions中的点求出圆心，以改圆心向周围2000长度为单位绘制圆的对象
var pointCollectionOption={
shape:BMAP_POINT_SHAPE_STAR,//海量点形状
color:"red",//海量点颜色
size:BMAP_POINT_SIZE_BIG//海量点大小
};
var pointCollection=new BMap.PointCollection(points,pointCollectionOption);
//map.addOverlay(circle);
//圆绘制完成
//绘制海量点
map.addOverlay(pointCollection);
//海量点绘制结束
}
</script>
</head>
<body onLoad="InitMap();">
<div id="container"></div>
</body>
</html>
关键字词：百度地图api,javascript