文档章节

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

liary
 liary
发布于 2016/01/27 10:22
字数 1328
阅读 55
收藏 1
点赞 1
评论 0

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

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
浅谈百度Baidu坐标系反转至WGS84的三种思路

摘要:基于百度地图进行数据展示是目前项目中常见场景,但是因为百度地图是基于BD09坐标系的,GPS坐标(WGS84)或者其他常见的标准坐标是无法准确在地图上进行展示的,但是互联网在线情况下,...

sinat_34719507
2017/03/09
0
0
BMap:WEB 服务API

ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScrip...

吞吞吐吐的
2017/11/07
0
0
百度地图新手教程4(转载自百度)

百度地图API>JavaScript API>开发指南 概述 开发指南 类参考V1.4 示例DEMO 更新日志 常见问题 相关下载 覆盖物 地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、...

长平狐
2013/01/06
3.1K
0
去百度API的百度地图准确叠加和坐标转换的解决方案研究

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百度提供的接口来...

李晓晖
2015/02/07
0
0
iOS定位服务与地图应用开发:高德地图开发

由于博客迁移至www.coderyi.com,文章请看http://www.coderyi.com/archives/419 之前工作在一家智能设备的公司,做过一个亲友定位监控系统,类似现在比较流行的360儿童手环。所以这里简单介绍...

flyicarus
2014/07/09
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

17.TCP:传输控制协议

介绍 TCP和UDP使用同一网络层(IP),但TCP提供了面向连接、可靠的传输层服务 TCP传输给IP层的信息单位称为报文段或段 TCP通过如下方式保证可靠性: 应用数据被分割成TCP认为最合适发送的数据...

loda0128
5分钟前
0
0
重装Oracle时出现environment variable "PATH"错误的解决办法

在win7 64位下重新安装oracle 11g,一直报environment variable "PATH"的错误,按说明将path里多余的路径删除,但没办法解决。选择忽略错误继续安装,装一半会报CRC错误,还是安装失败。最好...

良言
10分钟前
0
0
TensorFlow 全连接的mnist

全连接的mnist import tensorflow as tf# 导入 MINST 数据集from tensorflow.examples.tutorials.mnist import input_datamnist = input_data.read_data_sets("MNIST_data/", one_ho......

阿豪boy
11分钟前
0
0
JAVA 三种WebService 规范

JAVA 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC)、JAXM&SAAJ、JAX-RS。 1. Jaxws(掌握) JAX-WS 的全称为 Java API for XML-Based Webservices ,早期的基于SOAP 的JAVA 的Web 服务...

onedotdot
30分钟前
0
0
将博客搬至CSDN

将博客搬至CSDN

xpbob
30分钟前
1
0
Aidl进程间通信详细介绍

目录介绍 1.问题答疑 2.Aidl相关属性介绍 2.1 AIDL所支持的数据类型 2.2 服务端和客户端 2.3 AIDL的基本概念 3.实际开发中案例操作 3.1 aidl通信业务需求 3.2 操作步骤伪代码 3.3 服务端操作...

潇湘剑雨
48分钟前
0
0
python爬虫日志(3)下载图片

import urlliburl='https://xxx.jpg'#图片地址res=urllib.request.urlopen(url)#此函数用于对url的访问data=res.read() #字节流with open(r'D:\1.jpg',"wb") as code: c...

茫羽行
今天
0
0
vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运...

JamesView
今天
0
0
bash审计系统搭建

step1:使用saltstack工具bash部署>>>>>> # salt -N clienta state.sls audit step2:安装elasticsearch>>>>>> 注意: 1.不能以root用户进行启动,需要创建用户,并对解压的elasticsearch目录赋......

硅谷课堂
今天
0
0
Linux sar性能分析

Linux使用sar进行性能分析 sar简介 sar命令常用格式 sar常用性能数据分析 整体CPU使用统计-u 各个CPU使用统计-P 内存使用情况统计-r 整体IO情况-b 各个IO设备情况-d 网络统计-n sar日志保存-...

易野
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部