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

2016-7-21 16:22:53 0人评论 733次浏览 分类:技术文章

前言:对百度地图的使用已经成为了我们生活中的一部分,对于习惯使用百度地图的朋友来说更是不可或缺。但是如果没有网络的话就不能正常使用百度地图的服务,制作一款离线地图在这个时候就显得尤为重要,那我们应该如何制作呢,今天就给大家分享一下如何制作离线百度地图并获取坐标和添加标注。 
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、总结
以上就是制作离线百度地图的方法,有兴趣的朋友可以自己试一下。如果想要制作百度地图卫星影像的离线地图,可以使用“水经百度卫星地图下载器”下载百度卫星影像的瓦片,再用上面的方法加载就行了。

附件下载

相关资讯

  • 浙江省谷歌地球高程DEM等高线下载(百度网盘下载)

    一、概述浙江,简称“浙”,省会杭州。境内最大的河流钱塘江,因江流曲折,称之江、折江,又称浙江,省以江名。地处中国东南沿海长江三角洲南翼,东临东海,南接福建,西与安徽、江西相连,北与上海、江苏接壤。浙江省东西和南北的直线距离均为450公里左右。据全国第二次土地调…

    2018-5-18 11:54:10
  • 云南省谷歌地球高程DEM等高线下载(百度网盘下载)

    一、概述云南,简称云(滇),省会昆明,位于中国西南的边陲,北回归线横贯云南省南部,属低纬度内陆地区,东部与贵州省、广西壮族自治区为邻,北部与四川省相连,西北部紧依西藏自治区,西部与缅甸接壤,南部和老挝、越南毗邻,云南有25个边境县分别与缅甸、老挝和越南交界,…

    2018-5-17 15:48:14
  • 新疆自治区谷歌地球高程DEM等高线下载(百度网盘下载)

    一、概述新疆维吾尔自治区,简称新,位于中国西北边陲,首府乌鲁木齐,是中国五个少数民族自治区之一,也是中国陆地面积最大的省级行政区,面积166万平方公里,占中国国土总面积六分之一。新疆地处亚欧大陆腹地,陆地边境线5600多公里,周边与俄罗斯、哈萨克斯坦、吉尔吉斯斯坦…

    2018-5-16 17:25:01
  • 香港特别行政区谷歌地球高程DEM等高线下载(百度网盘下载)

    一、概述香港(粤拼:hoeng1 gong2;英文:Hong Kong;普通话拼音:xiāng gǎng;缩写:HK),简称“港”,全称为中华人民共和国香港特别行政区(HKSAR)。地处中国华南地区,珠江口以东,南海沿岸,北接广东省深圳市,西接珠江,与澳门特别行政区、珠海市以及中山市隔着珠江…

    2018-5-16 16:56:44

共有访客发表了评论 网友评论

验证码: 看不清楚?