调用百度地图API的总结

因为项目要用到百度地图，所以先摸索了一下，各种功能官方都有文档，点击可查看，文章的话我就直接写我用到的功能例子了，要用可以直接复制粘贴~

一、主要涉及到的几个接口（先申请密钥）：

1、技术一：坐标转换API（转换成百度地图的经纬度）

官网地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition 可以查看API用法及各参数含义

API服务地址：http://api.map.baidu.com/geoconv/v1/? //GET请求

使用示例一：http://api.map.baidu.com/geoconv/v1/?coords=转换前的经度,转换前的纬度&from=1&to=5&ak=你的密钥

2、技术二：正逆地址解析（结构化地址与经纬度的解析）

（1）地址解析（结构化地址解析得到经纬度）

官网地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding 可以查看API用法及各参数含义

API服务地址：http://api.map.baidu.com/geocoder/v2/? //GET请求

使用示例一：http://api.map.baidu.com/geocoder/v2/address=结构化的地址&output=json&ak=你的密钥

（2）逆地址解析（经纬度解析得到结构化地址）

官网地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad 可以查看API用法及各参数含义

API服务地址：http://api.map.baidu.com/geocoder/v2/? //GET请求

使用示例一：http://api.map.baidu.com/geocoder/v2/?location=纬度,经度&output=xml&pois=1&ak=你的ak [ ！注意：location=纬度,经度，不要写反了 ]

二、完整例子：

1、百度地图——在地图中展示当前位置

总体思路：通过 H5 获取当前地理位置得到经纬度；将这个经纬度转换成百度地图的经纬度（如果不转换，误差有点大）；在地图中标记该百度地图经纬度对应的点（即当前位置）。

<html>

<head>

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

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title>显示当前位置—优化</title>

    <style type="text/css">

        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

        #allmap{height:400px;width:100%;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

</head>

<body>

<div id="allmap"></div>

<script type="text/javascript">

    //地图初始化

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

    bm.centerAndZoom(new BMap.Point(121.48054,31.235929), 12);

    bm.enableScrollWheelZoom(true);

    bm.addControl(new BMap.NavigationControl());

    // H5 获取当前位置经纬度

    var location_lon = '',location_lat = '',myPoint; // 经度,纬度

    if (navigator.geolocation){

        navigator.geolocation.getCurrentPosition(function (position) {

            location_lon = position.coords.longitude;

            location_lat = position.coords.latitude;

            // alert('h5经度：'+location_lon);alert('h5纬度：'+location_lat);

            myPoint = new BMap.Point(location_lon,location_lat);

            bm.centerAndZoom(myPoint, 15); // 改变地图中心点

            //添加 H5坐标 marker和label

            var markergg = new BMap.Marker(myPoint);

            bm.addOverlay(markergg); //添加GPS marker

            var labelgg = new BMap.Label("未转换的H5坐标（误差大）",{offset:new BMap.Size(20,-10)});

            markergg.setLabel(labelgg); //添加GPS label

            setTimeout(function(){

                var convertor = new BMap.Convertor();

                var pointArr = [];

                pointArr.push(myPoint);

                convertor.translate(pointArr, 1, 5, translateCallback);

            }, 1000);

            //坐标转换完之后的回调函数

            translateCallback = function (data){

                if(data.status === 0) {

                    var marker = new BMap.Marker(data.points[0]);

                    bm.addOverlay(marker);

                    var label = new BMap.Label("转换后的百度坐标（误差小）",{offset:new BMap.Size(20,-10)});

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

                    bm.setCenter(data.points[0]);

                }

            };

        });

    }else {

        alert("您的设备不支持定位功能");

    }

</script>

</body>

</html>

效果图（如果拒绝共享位置信息就无法继续）：

2、百度地图——输入两个地址显示中间的轨迹

<html>

<head>

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

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

        #allmap{height:400px;width:100%;}

        #r-result,#r-result table{width:100%;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <title>两点轨迹</title>

</head>

<body>

<div id="allmap"></div>

<div id="driving_way">

    起点: <input id="point_start" type="text" style="width:200px; margin-right:10px;" /><br><br>

    终点: <input id="pint_end" type="text" style="width:200px; margin-right:10px;" /><br><br>

    <input type="button" id="result" value="查询路线"/>

</div>

<div id="r-result"></div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

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

    map.centerAndZoom(new BMap.Point(121.48054,31.235929),12);  // 当前地图的中心点经纬度（上海）

    map.enableScrollWheelZoom(true);

    $("#result").click(function(){

        var start = $("#point_start").val();

        var end = $("#pint_end").val();

        map.clearOverlays();

        var i=$("#driving_way select").val();

        if(start != '' && end != ''){

             searchPointWay(start,end);

        }else{

            alert('起终点地址都不能为空！');

        }

        function searchPointWay(start,end){

            var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});

            driving.search(start,end);

        }

    });

</script>

效果图：

三、百度地图API的跨域问题

在本地直接用 AJAX 调用百度地图API，存在跨域问题，后来用 nginx 做一个反向代理转发请求，修改了请求配置文件就好了。

然后有个很奇怪的地方，项目启动也用 nginx ，只统一配置域名就好了，可是百度地图API要写到参数那里才行，

location /BMap-getPoint {

    proxy_pass  http://api.map.baidu.com/geocoder/v2;

}

如果写成这样就不行：proxy_pass http://api.map.baidu.com; 不知道为啥。

因为是Angular 项目，所以我的请求用的是 Angular 项目里面封装好的 http 请求：

/*百度地图—地址解析*/

var getPoint = function () {

      var param = '北京市海淀区上地十街100号';

      $http.get("/BMap-getPoint/"+"?address="+param+"&output=json&ak=密钥").success(function(response){

       if(response.status == 0){

            $('#location_lon').val(response.result.location.lng);

                 $('#location_lat').val(response.result.location.lat);

             }else {

                 alert('1状态码:'+response.status);

             }

        }).error(function(XMLHttpRequest, textStatus, errorThrown){

                 alert("getPosition Error");

        });

};

<p>1、北京市海淀区上地十街100号</p>

        经度1: <input id="location_lon" type="text" style="width:200px; margin-right:10px;" /><br><br>

        纬度1: <input id="location_lat" type="text" style="width:200px; margin-right:10px;" /><br><br>

显示正确：

调用百度地图API的总结的更多相关文章

调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图示例代码 <!DOCTYPE html> <html> <head> <title& ...
HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）
1.获取秘钥调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...

随机推荐

GitHub开源的10个超棒后台管理面板
目录1.AdminLTE 2.vue-Element-Admin 3.tabler 4.Gentelella 5.ng2-admin 6.ant-design-pro 7.blur-admin 8.i ...
TLS1.3 PPT 整理
1.握手协议的目的是什么建立共享秘钥(通常使用公钥加密).协商算法和模型以及加密使用的参数,验证身份. 2.记录协议传输独立的信息,在堆成加密算法下保护数据传输 3.RSA Handshake S ...
Helix QAC — 软件静态测试工具
Helix QAC 是Perforce 公司(原PRQA 公司)产品,主要用于C/C++ 代码的完全自动化静态分析工作,可以提供编码规则检查.代码质量度量.软件结构分析.测试结果管理等功能.Helix ...
个性化召回算法实践(二)——LFM算法
LFM算法核心思想是通过隐含特征(latent factor)联系用户兴趣和物品,找出潜在的主题和分类.LFM(latent factor model)通过如下公式计算用户u对物品i的兴趣: \[ P ...
【小顶堆的插入构造/遍历】PatL2-012. 关于堆的判断
L2-012. 关于堆的判断时间限制将一系列给定数字顺序插入一个初始为空的小顶堆H[].随后判断一系列相关命题是否为真.命题分下列几种: “x is the root”:x是根结点: “x a ...
mysql中一个字段升序，另一个字段降序
mySql中,升序为asc,降序为desc.例如: 升序:select * from 表名 order by 表中的字段 asc(mysql中默认是升序排列,可不写) 降序:select ...
OTFS Research Notes
△f = f·v·cosθ/c,f表示载波频率,5G/B5G朝着毫米波等高频段方向发展,因此多普勒拓展的影响将更显著.此外,Masssive MIMO的现有规模已达256维度,并将朝着上千的规模发展. ...
Codeforces Round #459 (Div. 2) C题【思维好题--括号匹配问题】
题意:给出一个串,只包含 ( ? ) 三种符号,求出有多少个子串是完美匹配的. ( ) ? ) => ( ) ( ) 完美匹配( ( ) ? => ( ( ) )完美匹配? ? ? ? = ...
java调出cmd窗口长ping某个ip
package lct.conference.test; import java.io.IOException; public class Test { public static void main ...
Laravel - 解决连接MySQL时报"The server requested authentication method unknown to the client”错误
2019-04-12发布:hangge阅读:934 1,问题描述最近建了个 Laravel 项目,当配置好 MySQL 数据库进行请求时,页面报如下错误: SQLSTATE[HY000] [ ...

调用百度地图API的总结

调用百度地图API的总结的更多相关文章

随机推荐

热门专题