百度API学习
2015-05-18 11:27
169 查看
地图事例
点定位
var map = new
BMap.Map("allmap"); // 创建Map实例 var map2 = new BMap.Map("allmap2"); // 创建Map实例
var point = new
BMap.Point(104.072091, 30.663729); // 创建点坐标 var point2 = new BMap.Point(116.404, 39.915); //可同时加载两张地图
城市定位
map.centerAndZoom("成都",15); // 初始化地图,用城市名设置地图中心点
map.enableScrollWheelZoom(); //启用滚轮放大缩小
缩放级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(104.072091, 30.663729),8);
map.enableScrollWheelZoom(true);
移动地图
map.centerAndZoom(new BMap.Point(104.072091, 30.663729),8);
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345)); //两秒后移动到广州
}, 2000);
地图放大指定倍数
setTimeout(function(){
map.setZoom(14);
}, 2000); //2秒后放大到14级
禁止和开启拖拽
map.disableDragging(); //禁止拖拽
setTimeout(function(){
map.enableDragging(); //两秒后开启拖拽
//map.enableInertialDragging(); //两秒后开启惯性拖拽
}, 2000);
设定地图范围
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
} //防止地图拖出该区域(重新弹回)
显示地图范围
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
alert("当前地图可视范围是:" +
bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
获取两点间距离
map.getDistance(pointA,pointB)).toFixed(2) 保留小数点后两位
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线 划线颜色 宽度 透明度
map.addOverlay(polyline); //添加折线到地图上
关闭地图POI
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时,关闭底图可点功能
地图控件事例
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});//停泊 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角,航行控制添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type:BMAP_NAVIGATION_CONTROL_LARGE});
//右上角,仅包含平移 和缩放按钮
/* 缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;
BMAP_NAVIGATION_CONTROL_ZOOM: 仅包含缩放按钮 */
BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});//地图类型
BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});//地图类型
定位
var navigationControl = new BMap.NavigationControl({// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true// 启用显示定位
});
创建小狐狸图标
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(1000,557));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
标定可拖拽
marker.enableDragging()
标定区域可编辑
polygon.enableEditing()
覆盖显示、隐藏
<div id="r-result">
<input type="button" onclick="showOver()" value="显示" />
<input type="button" onclick="hideOver()" value="隐藏" />
</div>
function showOver(){
marker.show(); polyline.show(); circle.show();
}
function hideOver(){
marker.hide(); polyline.hide(); circle.hide();
}
添加文字标签
var label = new
BMap.Label("欢迎使用百度地图,这是一个简单的文本标注哦~", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);
为覆盖物添加文字标签
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
获取覆盖物信息
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click",getAttr);
function getAttr(){
var p = marker.getPosition(); //获取marker的位置
alert("marker的位置是" +
p.lng + "," + p.lat);
}
标点
function addMarker(point){
var marker = new
BMap.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 BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat + latSpan * (Math.random() * 0.7));
addMarker(point);
}
标点 建label 删除特定点label
function addMarker(point){
var marker = new BMap.Marker(point);
marker.setLabel(label);
map.addOverlay(marker);
}
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
var label = new
BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
addMarker(point,label);
function deletePoint(){
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length -1; i++){
if(allOverlay[i].getLabel().content == "我是id=1"){
map.removeOverlay(allOverlay[i]);
return false;
}
}
}
添加弧线
var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能
点定位
var map = new
BMap.Map("allmap"); // 创建Map实例 var map2 = new BMap.Map("allmap2"); // 创建Map实例
var point = new
BMap.Point(104.072091, 30.663729); // 创建点坐标 var point2 = new BMap.Point(116.404, 39.915); //可同时加载两张地图
城市定位
map.centerAndZoom("成都",15); // 初始化地图,用城市名设置地图中心点
map.enableScrollWheelZoom(); //启用滚轮放大缩小
缩放级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(104.072091, 30.663729),8);
map.enableScrollWheelZoom(true);
移动地图
map.centerAndZoom(new BMap.Point(104.072091, 30.663729),8);
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345)); //两秒后移动到广州
}, 2000);
地图放大指定倍数
setTimeout(function(){
map.setZoom(14);
}, 2000); //2秒后放大到14级
禁止和开启拖拽
map.disableDragging(); //禁止拖拽
setTimeout(function(){
map.enableDragging(); //两秒后开启拖拽
//map.enableInertialDragging(); //两秒后开启惯性拖拽
}, 2000);
设定地图范围
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
} //防止地图拖出该区域(重新弹回)
显示地图范围
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
alert("当前地图可视范围是:" +
bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
获取两点间距离
map.getDistance(pointA,pointB)).toFixed(2) 保留小数点后两位
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线 划线颜色 宽度 透明度
map.addOverlay(polyline); //添加折线到地图上
关闭地图POI
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时,关闭底图可点功能
地图控件事例
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});//停泊 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角,航行控制添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type:BMAP_NAVIGATION_CONTROL_LARGE});
//右上角,仅包含平移 和缩放按钮
/* 缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;
BMAP_NAVIGATION_CONTROL_ZOOM: 仅包含缩放按钮 */
BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});//地图类型
BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});//地图类型
定位
var navigationControl = new BMap.NavigationControl({// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true// 启用显示定位
});
创建小狐狸图标
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(1000,557));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
标定可拖拽
marker.enableDragging()
标定区域可编辑
polygon.enableEditing()
覆盖显示、隐藏
<div id="r-result">
<input type="button" onclick="showOver()" value="显示" />
<input type="button" onclick="hideOver()" value="隐藏" />
</div>
function showOver(){
marker.show(); polyline.show(); circle.show();
}
function hideOver(){
marker.hide(); polyline.hide(); circle.hide();
}
添加文字标签
var label = new
BMap.Label("欢迎使用百度地图,这是一个简单的文本标注哦~", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);
为覆盖物添加文字标签
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
获取覆盖物信息
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click",getAttr);
function getAttr(){
var p = marker.getPosition(); //获取marker的位置
alert("marker的位置是" +
p.lng + "," + p.lat);
}
标点
function addMarker(point){
var marker = new
BMap.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 BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat + latSpan * (Math.random() * 0.7));
addMarker(point);
}
标点 建label 删除特定点label
function addMarker(point){
var marker = new BMap.Marker(point);
marker.setLabel(label);
map.addOverlay(marker);
}
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
var label = new
BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
addMarker(point,label);
function deletePoint(){
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length -1; i++){
if(allOverlay[i].getLabel().content == "我是id=1"){
map.removeOverlay(allOverlay[i]);
return false;
}
}
}
添加弧线
var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能
相关文章推荐
- 百度 地点输入提示服务 API 学习笔记
- 百度API学习笔记1
- PHP学习笔记:利用百度api实现手机归属地查询
- 对于FacebookF8开发者大会开源深度学习框架Caffe2以及百度开放自动驾驶平台API的看法
- 如何学习百度API
- [学习笔记]如何调用百度天气api,学习自百度api
- App后台开发运维和架构实践学习总结(9)——三种常见的API设计错误及解决方案
- 百度IFE学习笔记(三)js获取页面内容及后续处理
- Html5 学习系列(五)Canvas绘图API快速入门(1)
- MQTT的学习研究(十四) MQTT moquette 的 Callback API 消息发布订阅的实现
- Javascript获取经纬度,关于调用百度API的问题
- JAVA学习第三十三课(常用对象API) —迭代器
- [API学习]操作驱动器挂载点说明
- android开发使用百度api获得天气情况
- API学习List接口
- ZigBee学习之——ZStack API解读
- arcgis API for javascript 学习笔记
- Ajax学习摘录之第九部分 使用 Google Ajax Search API
- 学习使用MEAN开发RESTful WEB api,实现数据的CRUD
- Java学习资料(三)——API文档