需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： 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. Python连接MySQL之Python库pymysql

    连接数据库 pymysql连接数据库的方式和使用sqlite的方式基本相同: 使用connect创建连接对象 connect.cursor创建游标对象,SQL语句的执行基本都在游标上进行 cursor ...

  2. jquery empty选择器 语法

    jquery empty选择器 语法 作用::empty 选择器选取空的元素.空元素指的是不包含子元素或文本的元素.直线电机滑台 语法:$(":empty") jquery emp ...

  3. C++ 值传递、指针传递、引用传递

    1.值传递 (1)形参是实参的拷贝(这句话说明形参和实参是两个实体),改变形参的值并不会影响外部实参的值. (2)从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入,不能传 ...

  4. python实现的ocr接口

    太累了,,有时间再补解释 import pytesseract import requests from PIL import Image from PIL import ImageFilter fr ...

  5. Html !!!了解一下

    1.什么是超文本 超文本:就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素; 最常用的超文本格式:超文本标记语言(标记通用语言的下个一个应用)和富文本格式 超文本语言的特点: 简易性:超文本 ...

  6. cmake尝试检测GCC版本报错

    本人尝试编译指定commit版本的MRPT库,报错如下, CMake Error at cmakemodules/script_detect_gcc.cmake: (LIST): list GET g ...

  7. [CSP-S模拟测试]:椎（线段树维护区间最值和单调栈）

    题目描述 虽不能至,心向往之. $Treap=Tree+Heap$ 椎$=$树$+$堆 小$\pi$学习了计算机科学中的数据结构$Treap$. 小$\pi$知道$Treap$指的是一种树. 小$\p ...

  8. http常用标签

    HTML标签大全(常用)   文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. HTML之所以称为超文本标记语言,是因为文本中包含了所 ...

  9. Spring MVC过滤器HiddenHttpMethodFilter

    浏览器form表单只支持GET与POST请求,而DELETE.PUT等method并不支持,spring3.0添加了一个过滤器,可以将这些请求转换为标准的http方法,使得支持GET.POST.PUT ...

  10. 【重点突破】—— UniApp 微信小程序开发官网学习Two

    一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ...