开发者社区> java牛> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

百度地图api 常用demo

简介: 功能一:获取map地图窗口的可视区域: var map = new BMap.Map("allmap");            // 创建Map实例 map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);  //初始化时,即可设置中心点和地图缩放级别。
+关注继续查看
功能一:获取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);
末了
若转载请注明出处!若有疑问,请回复交流!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring Data Solr的api demo测试操作
Spring Data Solr的api demo测试操作
0 0
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
0 0
阿里云智能视觉开放平台人脸人体API测试Demo
阿里云视觉智能开放平台基于达摩院自研的人脸人体分析技术,提供人脸检测与五官定位、人脸属性识别、人脸比对、人脸搜索、人体检测、人体属性、行为分析等多种功能,为开发者和企业用户提供高性能高可用的人脸人体识别服务。广泛应用于数字门店、楼宇门禁、身份识别、互动娱乐、IPC摄像头、内容广告等领域。本文以厨师帽检测为例,使用新版本Java SDK演示服务的快速调用。
0 0
阿里云Rocket MQ 管理API Go SDK使用示例Demo
消息队列 RocketMQ 版产品接口支持 HTTP 调用、SDK 调用和 OpenAPI Explorer 调用,本文主要演示Go SDK的安装和使用。
0 0
Kafka原理解析-旧版本0.8高级Api的Demo和配置信息获取技巧
旧版本高级Api封装: package xxxxxx; import kafka.producer.KeyedMessage; import kafka.producer.ProducerConfig; import java.util.Properties; public class KafkaProducerTest implements Runnable {
0 0
Flink1.9 Sate Processor API 介绍和实例demo
功能介绍 Flink1.9 新添加的功能,其能够帮助用户直接访问Flink中存储的State,API能够帮助用户非常方便地读取、修改甚至重建整个State。这个功能的强大之处在于几个方面,第一个就是灵活地读取外部的数据,比如从一个数据库中读取自主地构建Savepoint,解决作业冷启动问题,这样就不用从N天前开始重跑整个数据 可以使用的场景 异步校验或者查看某个阶段的状态,一般而言,flink作业的最终结果都会持久化输出,但在面临问题的时候,如何确定哪一级出现问题,state processor api也提供了一种可能,去检验state中的数据是否与预期的一致。
447 0
电商企业在线预约快递取件接口API对接demo
(1)支持自定义预约时间,不遗漏订单(2)已支持三通一达(申通不支持)、顺丰、EMS、宅急送、德邦、优速等物流公司(3)快递公司会在两小时内联系发件人并上门揽件(4)接口支持的消息接收方式为HTTP POST,请求方法的编码格式(utf-8):“application/x-www-form-urlencoded;charset=utf-8”。
1026 0
顺丰快递单号查询api接口免费对接参数以及demo
顺丰快递对物流信息的管控较为严格,官网上也加上了由XX云提供的滑动验证码进行保护,如果需要大批量查询顺丰的物流信息,必须要对接顺丰官方的路由查询接口。注意,对接接口必须要有顺丰月结账户,对接成功后只能查询自己发货的物流单号的路由信息。
2287 0
常用电子面单接口API demo下载(菜鸟&快递鸟)
手写快递单太麻烦了,公司的订单又多,每次都写不过来,还容易出错,直接电子化在打印快递单就快了,不过现在有些人不懂怎么批量对接多个快递的电子面单,这里就给大家讲解讲解,希望对大家有用。一.电子面单接口类型及定义 快递电子面单接口:快递公司自己开发的电子面单服务, 商家使用必须快递公司上门做系统对接,使用一家快递则需要对接一次。
2410 0
Marketing Cloud demo环境和API使用方法说明
version 1.0作者:Wang Jerry更多问题请联系我 demo 系统url:https:/jerry.hybris.com/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html 用户名/密码:Jerry1/Diablo1登录成功之后,可以在菜单"快速启动"->"Manage Contacts"里找到Marketing Cloud contact管理应用。
353 0
+关注
java牛
善于分享,乐于分享
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载