百度api使用说明
2021-06-10 14:03
标签:关闭 viewport safari 广州 geo rest margin address clear 天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门....初始化地图,并设置地图中心点
复制代码
https://www.cnblogs.com/zqzjs/p/5293698.html
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
当然也可以根据城市名称设置地图的中心点:
map.centerAndZoom("上海",15);
map.addControl(new BMap.ScaleControl()); //添加左下方比例尺控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setCurrentCity("北京"); // 设置地图显示的城市
复制代码
2.拖拽地图与滚轮的使用
map.enableScrollWheelZoom(true);
map.disableDragging(); //禁止拖拽
map.enableScrollWheelZoom(); //启用滚轮放大缩小
3.创建地图的时候,关闭地图底图按钮,建筑的可点功能
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时,关闭底图可点功能
4.移动地图,设置地图最大最小的缩放级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
//当然也可以动态设置级别:
map.setMaxZoom(10);
map.setMinZoom(2);
5.获得地图当前中心点,返回两点间的距离
getCenter()
getDistance(start:Point, end:Point)
var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B--江北区
alert(‘距离是:‘+(map.getDistance(pointA,pointB)).toFixed(2)+‘ 米。‘); //获取两点距离,保留小数点后两位
6.添加覆盖物,移除覆盖物,清楚所有覆盖物
addOverlay(overlay:Overlay)
removeOverlay(overlay:Overlay)
clearOverlays()
getOverlays() //返回地图上所有的覆盖物
7.地图添加控件的时候可以设置地图放在四个角中的哪个角
复制代码
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
BMAP_ANCHOR_TOP_LEFT //表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT //表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT //表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT //表示控件定位于地图的右下角。
//缩放空间的type的四种类型:
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮
BMAP_NAVIGATION_CONTROL_LARGE //表示显示完整的平移缩放控件。
BMAP_NAVIGATION_CONTROL_SMALL //表示显示小型的平移缩放控件。
BMAP_NAVIGATION_CONTROL_PAN //表示只显示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM //表示只显示控件的缩放部分功能
复制代码
8.地图采集的经纬度,转化为度数,再转化为百度坐标点,在用new BMap.Point转换成打在地图上的点
9.Marker,添加地图各个事件
复制代码
/设置marker的弹跳
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.enableDragging(); //设置点可以拖拽
//设置marker的样式与偏移
var myIcon = new BMap.Icon(__baseUrl + "/images/circle_blue.png",new BMap.Size(16,16),
{
offset:new BMap.Size(10,25),// 图标中央下端的尖角位置。
imageOffset:new BMap.Size(0,0- index *25)// 设置图片偏移
}
);
//添加事件
marker.addEventListener("click", function(e){
alert("您点击了标注");
alert(e.point.lng + ", " + e.point.lat);
});
//移除事件
map.removeEventListener("click", showInfo);
复制代码
10.信息窗口
信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。 您可以使用InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于打开状态。
复制代码
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 15);
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
复制代码
复制代码
//添加复杂的信息窗口
var sContent =
"天安门
" +
"" +
"
百度api使用说明
标签:关闭 viewport safari 广州 geo rest margin address clear
原文地址:https://www.cnblogs.com/loveMis/p/10599223.html