需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： 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. 洛谷 P3049 Landscaping ( 贪心 || DP)

    题意 : 有n块土地,每块有A[i]泥土,现把其改造成B[i]泥土,有3种操作:(1)花费X向任意土地增加1泥土:(2)花费Y向任意土地减少1泥土:(3)花费Z*|i-j|把土地i的1泥土运到土地j. ...

  2. UML——用例视图

    用例视图中交互功能部分被称为用例.   参与者   作为外部用户与系统发生交互作用,这是参与者的特征. 在系统的实际运作中,一个实际用户可能对应系统的多个参与者.不同的用户也可以只对应于一个参与者,从 ...

  3. pycharm的个性化设置

    1. 调整背景颜色 file -- settings -- Editor -- Color Scheme 2. 调整字体.字号.行间距 file -- settings -- Editor -- Fo ...

  4. 【canvas学习笔记三】样式和颜色

    上一节我们学习了如何用路径绘制各种形状,但我们只能用默认的颜色和线条.这节就来学习设置不同的颜色和线条样式. 颜色 设置颜色主要有两个属性: fillStyle = color 设置填充颜色 stro ...

  5. SSM整合之---简单选课系统

    简单选课系统 一.实体图 二.功能 三.代码实现 1.SSM环境搭建 (1)pom.xml <dependencies> <dependency> <groupId> ...

  6. pycharm 安装激活

    下载pycharm :http://www.jetbrains.com/pycharm/download/download 安装 直到 finish 下载补丁jetbrains-agent.jar并添 ...

  7. leetcode-easy-array-1 two sum

    mycode  33.91% class Solution: def twoSum(self, nums: List[int], target: int) -> List[int]: for i ...

  8. ARM过程调用标准——APCS

    APCS(ARM Procedure Call Standard) 1.ARM寄存器 ARM核支持9种工作模式——User/System/Hyp+/SVC/Abort/Undefined/Monito ...

  9. Git-Runoob：Git 教程

    ylbtech-Git-Runoob:Git 教程 1.返回顶部 1. Git 教程 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torva ...

  10. ArcCatalog连接远程ArcGIS Server服务器

    注意:本地机器登陆的用户名和密码必须与ArcGIS Server服务器上的用户名和密码完全一致,并加入到agsadmin和agsuser组中.重启电脑.   (其实就是在自己的电脑上建立一个用户名,这 ...