您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

百度地图api 常用 例子

时间:2020-07-21 12:57:18  来源:  作者:
百度地图api 常用 例子

 

功能

一:获取map地图窗口的可视区域:

var map = new BMap.Map("allmap"); // 创建Map实例

map.centerAndZoom(new BMap.Point(116.4035,39.915), 14); //初始化时,即可设置中心点和地图缩放级别。

var bs = map.getBounds(); //获取可视区域

var bssw = bs.getSouthWest(); //可视区域左下角

var bsne = bs.getNorthEast(); //可视区域右上角

alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);

 

功能二:3D展示地图:

var map = new BMap.Map("allmap", {mapType:BMAP_PERSPECTIVE_MAP});

var point = new BMap.Point(116.4035,39.915);

map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的

map.centerAndZoom(point,19);

map.enableScrollWheelZoom(true);

 

功能三:设置地图允许的大小:

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例

map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时,即可设置中心点和地图缩放级别。 map.enableScrollWheelZoom(true);

 

功能四:获取当前地图视野的中心点:

var map = new BMap.Map("allmap"); // 创建Map实例

map.centerAndZoom(new BMap.Point(116.4035,39.915),8); //初始化时,即可设置中心点和地图缩放级别。

alert("当前地图中心点:" + map.getCenter().lng + "," + map.getCenter().lat);

 

功能五:google地图坐标换算百度地图坐标:

//谷歌坐标

var x = 116.32715863448607;

var y = 39.990912172420714;

var ggPoint = new BMap.Point(x,y); //地图初始化

var bm = new BMap.Map("allmap");

bm.centerAndZoom(ggPoint, 15);

bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label

var markergg = new BMap.Marker(ggPoint);

bm.addOverlay(markergg); //添加谷歌marker

var labelgg = new BMap.Label("我是谷歌标注哦",{offset:new BMap.Size(20,-10)});

markergg.setLabel(labelgg); //添加谷歌label //坐标转换完之后的回调函数

translateCallback = function (point){

var marker = new BMap.Marker(point);

bm.addOverlay(marker);

var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});

marker.setLabel(label); //添加百度label

bm.setCenter(point);

alert(point.lng + "," + point.lat);

}

setTimeout(function(){

BMap.Convertor.translate(ggPoint,2,translateCallback); //GCJ-02坐标转成百度坐标

}, 2000);

 

功能六:GPS坐标换算百度坐标:

//GPS坐标 var xx = 116.397428;

var yy = 39.90923;

var gpsPoint = new BMap.Point(xx,yy); //地图初始化

var bm = new BMap.Map("allmap");

bm.centerAndZoom(gpsPoint, 15);

bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label

var markergps = new BMap.Marker(gpsPoint);

bm.addOverlay(markergps); //添加GPS标注

var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)});

markergps.setLabel(labelgps); //添加GPS标注 //坐标转换完之后的回调函数

translateCallback = function (point){ var marker = new BMap.Marker(point);

bm.addOverlay(marker);

var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});

marker.setLabel(label); //添加百度label

bm.setCenter(point); alert(point.lng + "," + point.lat);

}

setTimeout(function(){ BMap.Convertor.translate(gpsPoint,0,translateCallback); //真实经纬度转成百度坐标 }, 2000);

 

功能七:测距:

var map = new BMap.Map("allmap");

map.centerAndZoom("重庆",12); // 初始化地图,设置城市和地图级别。

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)+' 米。'); //获取两点距离

var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线

map.addOverlay(polyline); //添加折线到地图上

 

功能八:关键字输入提示词条:

function G(id) {

return document.getElementById(id);

}

 

var map = new BMap.Map("l-map");

map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。

//建立一个自动完成的对象

var ac = new BMap.Autocomplete( {"input" : "suggestId" ,"location" : map});

ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件

var str = "";

var _value = e.fromitem.value;

var value = "";

if (e.fromitem.index > -1) {

value = _value.province + _value.city + _value.district + _value.street + _value.business;

}

str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

value = "";

if (e.toitem.index > -1) {

_value = e.toitem.value;

value = _value.province + _value.city + _value.district + _value.street + _value.business;

}

str+= "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

G("searchResultPanel").innerhtml = str;

});

 

var myValue;

ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件

var _value = e.item.value;

myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

setPlace();

});

 

function setPlace(){

map.clearOverlays(); //清除地图上所有覆盖物

function myFun(){

var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果

map.centerAndZoom(pp, 18);

map.addOverlay(new BMap.Marker(pp)); //添加标注

}

var local = new BMap.LocalSearch(map, { //智能搜索

onSearchComplete: myFun

});

local.search(myValue);

}

 

功能九:自定义版权控件:

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});

map.addControl(cr); //添加版权控件

var bs = map.getBounds();

cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀</a>", bounds: bs});

 

功能十:自定义控件:

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 定义一个控件类,即function

function ZoomControl(){ // 默认停靠位置和偏移量

this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

this.defaultOffset = new BMap.Size(10, 10);

} // 通过JAVAScript的prototype属性继承于

BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返 回 // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中

ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素

var div = document.createElement("div"); // 添加文字说明

div.AppendChild(document.createTextNode("放大2级")); // 设置样式

div.style.cursor = "pointer";

div.style.border = "1px solid gray";

div.style.backgroundColor = "white"; // 绑定事件,点击一次放大两级

div.onclick = function(e){ map.setZoom(map.getZoom() + 2); } // 添加DOM元素到地图中

map.getContainer().appendChild(div); // 将DOM元素返回

return div; } // 创建控件

var myZoomCtrl = new ZoomControl(); // 添加到地图当中

map.addControl(myZoomCtrl);



Tags:百度地图 api   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条