需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

1、首先注册百度地图开放平台账号

　　注册完之后可以生成自己的密钥

　　http://lbsyun.baidu.com

2、在html页面中引入百度地图js文件

　　http://api.map.baidu.com/api?v=2.0&ak=您的密钥

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

3、demo实例

3-1、根据输入地名定位（并返回经纬度）

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>百度地图API</title>

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

    <!-- 如果需要拖拽鼠标进行操作，可引入以下js文件 -->

    <script type="text/javascript" src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script>

     <style type="text/css">

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

    </style>

</head>

<body>

   <div id="allmap" style="width: 800px;height: 500px;"></div>

   <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>

   <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

</body>

</html>

<script type="text/javascript">  

    // 百度地图API功能

    function G(id) {

        return document.getElementById(id);

    }

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

    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用

    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    var myDrag = new BMapLib.RectangleZoom(map, {

        followText: "拖拽鼠标进行操作"

    });

    myDrag.open();  //开启拉框放大

    // myDrag.close();  //关闭拉框放大

    map.centerAndZoom("北京",19);   // 初始化地图,设置城市和地图级别。

    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;    //获取第一个智能搜索的结果

            console.log('经度：'+pp.lng, '纬度：'+pp.lat);

            map.centerAndZoom(pp, 18);

            map.addOverlay(new BMap.Marker(pp));    //添加标注

        }

        var local = new BMap.LocalSearch(map, { //智能搜索

          onSearchComplete: myFun

        });

        local.search(myValue);

    }

</script>

1、输入地名后，会自动出现多个相关的地名：

2、在下拉列表里选择其中一个地址后，地图就会定位到该地址，并用红色块标注，并且可以获取到该地址的经纬度

3-2、根据经纬度定位

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>百度地图API</title>

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

     <style type="text/css">

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

    </style>

</head>

<body>

   <div id="allmap" style="width: 80%;height: 80%;"></div>

    <div id="r-result">

        经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />

        纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />

        <input type="button" value="查询" onclick="theLocation()" />

    </div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

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

    map.centerAndZoom(new BMap.Point(116.331398,39.897445),19);

    map.enableScrollWheelZoom(true);

    // 用经纬度设置地图中心点

    function theLocation(){

        if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){

            map.clearOverlays();

            var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);

            var marker = new BMap.Marker(new_point);  // 创建标注

            map.addOverlay(marker);              // 将标注添加到地图中

            map.panTo(new_point);

        }

    }

</script>

输入经纬度后，点击查询按钮，即可定位：

javascript百度地图使用(根据地名定位、根据经纬度定位)的更多相关文章

  1. 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. Python使用百度地图API根据地名获取相应经纬度

    今天有个需求,要根据地名获取经纬度坐标值. 于是我第一想法:打开百度地图,手动输入地名,获取.显然当地名较少时,可实施.然而,当地名较多时,此方法显然工作量很大. 于是,第二想法:代码获取,请求百度地 ...

  3. 【百度地图API】自行获取区域经纬度的工具

    原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...

  4. javascript百度地图添加一个普通标注点（2014-3-8 记）

    1.导入jquery.js文件:<script type="text/javascript" src="js/jquery.js"></scr ...

  5. javascript 百度地图无秘钥（appkey）创建marker标记地图

    创建简单的marker地图不一定需要去百度地图申请key,简单代码实现marker地图,效果如图: html代码如下,代码中的baidu.api.js参考后面的隐藏代码: <!DOCTYPE h ...

  6. 百度地图API根据地名获取经纬度

    运用了Geocoding API,它包括地址解析和逆地址解析功能. 地址解析是指,由详细到街道的结构化地址得到百度经纬度信息,且支持名胜古迹.标志性建筑名称直接解析返回百度经纬度.例如:“北京市海淀区 ...

  7. (JavaScript) 百度地图与腾讯地图坐标转换

    /** * 坐标转换,百度地图坐标转换成腾讯地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx) * 经度>纬度 */ function bMapToQQMap( ...

  8. 使用百度地图API自动获取地址和经纬度

    先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  9. python3调取百度地图API输出某地点的经纬度信息

    1. 查看API接口说明 地址:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding 注:callback ...

随机推荐

  1. ASP.NET如何实现断点续传的上传、下载功能？

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  2. PCL智能指针疑云 <三> 智能指针作为函数的传值参数和传引用参数

    一 函数的参数传递可以简单分类为“传值”和“传引用”. 声明函数时,形参带引用“&”,则函数调用时,是把实参所在的内存直接传给函数所开辟的栈内存.在函数内对形参的修改相当于对实参也进行修改. ...

  3. Windows10 + VS2015 环境下对gdal2.0.1进行64bit编译小结

    这是官方给出的编译指导,但是在实践过程中有几点仍然需要特别注意. Tip 1:不要使用默认的"VS开发人员命令提示"工具,使用该工具会遭遇如下的错误: 正在创建库 gdal_i.l ...

  4. 【转】BYV--有向图强连通分量的Tarjan算法

    转自beyond the void 的博客: https://www.byvoid.com/zhs/blog/scc-tarjan 注:红色为标注部分 [有向图强连通分量] 在有向图G中,如果两个顶点 ...

  5. EM 算法资料

    EM 算法的英文全称是: Expectation-Maximum. EM 算法的步骤 假设 \(Z\) 是隐变量,\(\theta\) 是待定参数. E 步:固定参数 \(\theta\),求 \(Z ...

  6. SVN appears to be part of a Subversion 问题心得

    昨天更新了下项目,但同时又增加了一个Java工程,我就在本地单独导出到workspace同目录下:结果第二天提交代码的时候,提示如下错误 svn: E155021: The path 'xxx' ap ...

  7. rtmpdump禁用openssl

    rtmpdump禁用openssl 主要是编译方便 很多地方根本不需要用openssl 先找到librtmp/rtmp_sys.h 然后加入宏#define NO_CRYPTO在#ifdef _WIN ...

  8. [C#菜鸟]C# Hook (一)

    转过来的文章,出处已经不知道了,但只这篇步骤比较清晰,就贴出来了. 一.写在最前 本文的内容只想以最通俗的语言说明钩子的使用方法,具体到钩子的详细介绍可以参照下面的网址: http://www.mic ...

  9. 搜索引擎、邮件营销、微信营销之营销方式大PK

    经常有朋友问到这个问题,关于搜索引擎.邮件营销.微信营销三种网络营销方式的优劣势,用哪种营销方式比较好.下面我们跟随Focussend小编来看看这几种方式的优劣势. 搜索引擎 优势:1.传播速度快:2 ...

  10. Navicat12 for Mysql破解教程

    1. 注册机和Navicat网盘下载地址 链接:https://pan.baidu.com/s/1taWdnaLCPIu8xmNm1uV-Ng 提取码:no8l 2. 请先安装navicat for ...