文档章节

百度离线API获取坐标和添加标注

liary
 liary
发布于 2016/01/27 10:22
字数 1328
阅读 68
收藏 1

前言:对百度地图的使用已经成为了我们生活中的一部分,对于习惯使用百度地图的朋友来说更是不可或缺。但是如果没有网络的话就不能正常使用百度地图的服务,制作一款离线地图在这个时候就显得尤为重要,那我们应该如何制作呢,今天就给大家分享一下如何制作离线百度地图并获取坐标和添加标注。 
 

1、材料准备

水经注百度电子地图下载器 百度地图离线API:BaiduMap V1.3

百度地图离线API下载地址:


 

2、制作过程

2.1下载瓦片

打开水经注百度电子地图下载器,将地图缩小至全球可见,框选上全球(图1),双击左键,弹出“新建任务”,设置下载名称和选择下载级别,这里我选择的是1到6级(图2),单击“确认”开始下载。

 

图1

 


 

图2

 

2.2导出瓦片

点击“我的下载”,勾选上刚刚下载的地图数据,就可以在下面查看到刚才下载的地图(图3),点击“导出拼接图片”,弹出“导出图片数据”对话框,在“导出类型”一栏选择“瓦片.百度”(图4),点击“输出”开始导出瓦片。导出完成后,找到瓦片存储的文件夹,可以看到导出的瓦片(图5)

 

图3


 

图4

 

 

图5

 

2.3加载瓦片

打开文件夹BaiduMap V1.3,我们可以看到3个文件夹和1个示例代码html文件和一个css文件(图6),其中images文件夹是存储的地图相关的控件图标的;js文件夹存储的是离线API的相关js代码;demo.html是调用瓦片的示例代码;bmap.css是相关的css样式文件。最重要的是maptile文件夹,里面存放的是需要调用的瓦片。

接下来讲如何调用瓦片,这里其实只要把下载好的瓦片复制到maptile文件夹下就可以了,这里给大家讲解一下代码的组成。 

 

图6

 

2.4代码组成
 

2.4.1首先我们需要连接到百度的API上:
 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度离线版DEMO</title>

<script type="text/javascript" src="js/apiv1.3.min.js"></script>

<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->

<link rel="stylesheet" type="text/css" href="bmap.css"/>

</head>

</html>

 

2.4.2新建一个容器,用以存放地图和相关的控件:
 

<body>

<div style="width:100%;height:100%;border:1px solid gray;position:absolute;" id="container"></div>

<div id="position" style="width:220px;height:10%;border:1px solid gray;position:absolute;background-color:#cacfd2;filter: Alpha(opacity=50);opacity:0.6;  right:1px;bottom:1px;font-size:15px">

 

</div>

</body>

 

2.4.3加载百度的地图和添加相关的控件:
 

<script type="text/javascript">

var mapOptions = {

//minZoom: 12, 地图最小层级

mapType: BMAP_NORMAL_MAP

}

var map = new BMap.Map("container", mapOptions);      //设置卫星图为底图BMAP_PERSPECTIVE_MAP

var initPoint = new BMap.Point(116.404, 39.915);    // 创建点坐标

 

map.centerAndZoom(initPoint,3);                    // 初始化地图,设置中心点坐标和地图级别。

map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。

map.enableKeyboard();                         // 启用键盘操作。  

map.enableContinuousZoom();//启用连续缩放效果

 

// ----- control -----

map.addControl(new BMap.NavigationControl()); //地图平移缩放控件

map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角

</script>

 

2.4.4添加标注并获取坐标信息:
 

// ----- maker -----

addCabinMarker(initPoint);//设置标注点

function addCabinMarker(point) { 

var cabinIcon = new BMap.Icon("images/marker_red_sprite.png", new BMap.Size(32, 37));    

var cabinMarkerOptions = {

icon: cabinIcon,

enableDragging: true,

draggingCursor: "move",

title: "标注点"

}

 var cabinMarker = new BMap.Marker(point, cabinMarkerOptions);  

 cabinMarker.setAnimation(BMAP_ANIMATION_DROP);

 

 map.addOverlay(cabinMarker);

 cabinMarker.addEventListener("dragging", function(e) {

document.getElementById("position").innerHTML = "坐标像素</br>x :" + e.pixel.x + " y :" + e.pixel.y + "<br>坐标经纬度</br>经度: " + e.point.lng + " 纬度: " + e.point.lat;//获取经纬度

}); 

}

现在,我们已经制作完成百度的离线地图了,现在给大家提供完整的代码:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度离线版DEMO</title>

<script type="text/javascript" src="js/apiv1.3.min.js"></script>

<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->

<link rel="stylesheet" type="text/css" href="bmap.css"/>

</head>

<body>

<div style="width:100%;height:100%;border:1px solid gray;position:absolute;" id="container"></div>

<div id="position" style="width:220px;height:10%;border:1px solid gray;position:absolute;background-color:#cacfd2;filter: Alpha(opacity=50);opacity:0.6;  right:1px;bottom:1px;font-size:15px">

 

</div>

</body>

</html>

<script type="text/javascript">

var mapOptions = {

//minZoom: 12, 地图最小层级

mapType: BMAP_NORMAL_MAP

}

var map = new BMap.Map("container", mapOptions);      //设置卫星图为底图BMAP_PERSPECTIVE_MAP

var initPoint = new BMap.Point(116.404, 39.915);    // 创建点坐标

 

map.centerAndZoom(initPoint,3);                    // 初始化地图,设置中心点坐标和地图级别。

map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。

map.enableKeyboard();                         // 启用键盘操作。  

map.enableContinuousZoom();//启用连续缩放效果

 

// ----- control -----

map.addControl(new BMap.NavigationControl()); //地图平移缩放控件

map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角

//map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: true})); //缩略图控件

 

// ----- maker -----

addCabinMarker(initPoint);//设置标注点

function addCabinMarker(point) { 

var cabinIcon = new BMap.Icon("images/marker_red_sprite.png", new BMap.Size(32, 37));    

var cabinMarkerOptions = {

icon: cabinIcon,

enableDragging: true,

draggingCursor: "move",

title: "标注点"

}

 var cabinMarker = new BMap.Marker(point, cabinMarkerOptions);  

 cabinMarker.setAnimation(BMAP_ANIMATION_DROP);

 

 map.addOverlay(cabinMarker);

 cabinMarker.addEventListener("dragging", function(e) {

document.getElementById("position").innerHTML = "坐标像素</br>x :" + e.pixel.x + " y :" + e.pixel.y + "<br>坐标经纬度</br>经度: " + e.point.lng + " 纬度: " + e.point.lat;//获取经纬度

}); 

}

 

</script>

3、总结

以上就是制作离线百度地图的方法,有兴趣的朋友可以自己试一下。如果想要制作百度地图卫星影像的离线地图,可以使用“水经注百度卫星地图下载器”下载百度卫星影像的瓦片,再用上面的方法加载就行了。


© 著作权归作者所有

共有 人打赏支持
liary
粉丝 1
博文 14
码字总数 14312
作品 0
成都
百度地图离线数据包V2,0

离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了。。。。。。哈哈哈哈哈!!! 支持各大主流浏览器 IE7、8、9、10、11,火狐、360浏览器、谷歌浏览...

ysw349686
2016/10/21
518
2
百度离线地图资源

离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了。。。。。。哈哈哈哈哈!!! 支持各大主流浏览器 IE7、8、9、10,火狐、360浏览器、谷歌浏览器 ...

迷猫
2016/11/12
391
0
【高小爱课堂】_地图API开发者教程(全平台精华版)

一、使用须知 二、坐标相关问题 三、标注问题 四、定位相关问题 五、云图 六、地图API 1)Javascript API 2)Android API 3)iOS API 4)Windows Phone 及win8 API 5)URI API ▼使用须知 Q:...

高德LBS开放平台
2014/06/13
1K
0
百图离线地图怎么对标注添加监听

@于忠达 ,想跟你请教个问题:看了你写的百度离线地图demo,测试了使用经纬添加标注后没有问题, 但是我想给标注添加时间做自定义信息提示,代码如下: var infoWindow = new BMap.InfoWindow...

上官胡闹
2016/11/23
59
0
nmgwap/百度地图轨迹,多个标注点,坐标拾取

百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体 平台页面功能说明 获取多个坐标点标注在地图上 根据不同状态显示不同的信息窗口样式 根据地址检索坐标点(可显示多个) 鼠标点击...

nmgwap
03/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
6
0
现场看路演了!

HiBlock
昨天
16
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
10
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
19
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部