需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： 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. String,Integer,int类型之间的相互转换

    String, Integer, int 三种类型之间可以两两进行转换 1. 基本数据类型到包装数据类型的转换 int -> Integer (两种方法) Integer it1 = new I ...

  2. 配置：Uri

    URI是网络资源的定义,代表了要操作的数据,Uri主要包含了两部分信息: 1>需要操作的ContentProvider  2>对ContentProvider中的什么数据进行操作   一个 ...

  3. golang rabbitmq实践 （一 rabbitmq配置）

    1:环境选择 系统为ubuntu 15.04 ,我装在虚拟机里面的 2:rabbitmq tabbitmq 3.5.4  download url : http://www.rabbitmq.com/ ...

  4. floor函数用法

    floor(x),也写做Floor(x),其功能是“向下取整”,或者说“向下舍入”,即取不大于x的最大整数(与“四舍五入”不同,下取整是直接取按照数轴上最接近要求值的左边值,即不大于要求值的最大的那个 ...

  5. 【转】博弈论——acm

    转自http://blog.csdn.net/lgdblue/article/details/15809893 序:博弈是信息学和数学试题中常会出现的一种类型,算法灵活多变是其最大特点,而其中有一类试 ...

  6. [BZOJ1059]:[ZJOI2007]矩阵游戏（二分图匹配）

    题目传送门 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种 ...

  7. Java缓存机制

    1 Java缓存 1.1 jvm内置缓存 Java中实现缓存的方式有很多,比如用static hashMap基于内存缓存的jvm内置缓存,简单不实用,保对象的有效性和周期无法控制,容易造成内存急剧上升 ...

  8. 阿里云OSS文件上传封装

    1.先用composer安装阿里云OSS的PHPSDK 2.配置文件里定义阿里云OSS的秘钥 3.在index控制器里的代码封装 <?php namespace app\index\contro ...

  9. 14 补充 MySQL的创建用户和授权

    权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建一个 ...

  10. P1076 寻宝

    P1076 寻宝 题解 这道题真是感人啊,废了蒟蒻一天的时间 关键 1. a[ k ][ ] 数组记录第k层有楼梯房间的编号 a[ k ][ 0 ]  第k层有几个有楼梯的房间 a[ k ][ i ] ...