在最近项目中，我接触了百度地图的API写法，对其中的代码有了一点兴趣，所以我在完成任务后，在办公室里学习了百度地图的相关引用，并申请了服务秘钥： E7PCho0sv3FdzmjC901ttP0HrS9bT4nY

下面是我在学习中总结的对项目有帮助的代码

<!DOCTYPE html>

<html>

<head>

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

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

<title>Hello, World</title>

<script type="text/javascript" src="jQuery1.7.2.js"></script>

<script type="text/javascript" src="map.jquery.min.js"></script>

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

</head>  

<body>

<div  class="bMap" style="width:500px;height: 500px;margin:auto;padding-top:100px;">

	 <table>

        <td>

            <div id="r-result"><input type="text" name="address" id="suggestId" size="20" datatype="*" value="" style="width:400px;margin-bottom: 5px;padding:3px" /></div>

            <input type="hidden" name="address_lat" id="address_lat" value=""/>

            <input type="hidden" name="address_lng" id="address_lng" value=""/>

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

            <div id="l-map" style="width:400px;height: 400px;"></div>

        </td>

    </tr>

</table>

</div>

<script type="text/javascript">

    // 百度地图API功能

    function G(id) {

        return document.getElementById(id);

    }

    var map = new BMap.Map("l-map");

    var point = new BMap.Point(116.331398,39.897445);

    map.centerAndZoom(point,14);

    function myFun(result){

        var cityName = result.name;

        map.setCenter(cityName);

    }

    var myCity = new BMap.LocalCity();

    myCity.get(myFun);

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

    map.enableContinuousZoom();

    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

            {"input" : "suggestId"

                ,"location" : map

            });

    var geoc = new BMap.Geocoder();

    map.addEventListener("click", function(e){

        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度

        var pt = e.point;

        geoc.getLocation(pt, function(rs){

            //addressComponents对象可以获取到详细的地址信息

            var addComp = rs.addressComponents;

            var site = addComp.province+addComp.city+ addComp.district+addComp.street+ addComp.streetNumber;

            //将对应的HTML元素设置值

            // setMyPoint(pt.lng,pt.lat);

            $("#suggestId").attr("value",site);

            console.log("获取到的位置的详情=="+site);

            console.log("获取到的位置的lng=="+pt.lng);

            console.log("获取到的位置的lat=="+pt.lat);

        });

    });

    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;

        // console.log(_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 setMyPoint(lng,lat) {

        $("#address_lng").attr("value",lng)

        $("#address_lat").attr("value",lat)

    }

    function setPlace(){

        map.clearOverlays();    //清除地图上所有覆盖物

        function myFun(){

            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            //获取坐标

            setMyPoint(pp.lng,pp.lat);

            console.log("lng=="+ pp.lng+";lat=="+pp.lat);

            map.centerAndZoom(pp, 18);

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

        }

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

            onSearchComplete: myFun

        });

        local.search(myValue);

    }

</script>

</body>

</html>

map.jquery.min.js

$.fn.bMap=function(h){h=$.extend({name:"map"},h);var j=$(this),b=h.name,p,m=116.331398,l=39.897445,q,a,n=$("<div class='map-warp' id='Map_"+b+"'></div"),o=$("<input type='text' name='"+b+"' id='Map_input_"+b+"'/>"),g=$("<input type='hidden' name='location_"+b+"' id='Map_location_"+b+"'/>"),f=$('<svg t="1495288306982" class="icon" style="position: absolute;right:5px;top:50%;margin-top: -10px;" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M883.3663 412.6822c0-203.9497-165.3527-369.3186-369.3347-369.3186-203.9811 0-369.3337 165.3679-369.3337 369.3186 0 114.989 52.5405 217.6864 134.9211 285.4175l190.8474 200.2232c9.8307 13.246 25.5877 21.8352 43.3424 21.8352 16.3706 0 31.0232-7.2981 40.9139-18.8023h0.006995543838574828l200.5313-208.9993c17.6088-15.1997 33.7645-32.0373 48.2363-50.2719l8.1298-8.4733h-1.5949839951950608C856.0917 572.0042 883.3663 495.532 883.3663 412.6822zM513.9646 596.0299c-112.971 0-204.5377-91.5619-204.5377-204.5073 0-112.9674 91.5667-204.5293 204.5377-204.5293 112.9501 0 204.5157 91.5629 204.5157 204.5293C718.4813 504.468 626.9157 596.0299 513.9646 596.0299z" p-id="2379" fill="#666666"></path></svg>');j.append(o).append(g).append(n).append(f);if(h.location||h.address){if(h.location){p=new BMap.Point(h.location[0],h.location[1]);m=h.location[0];l=h.location[1];g.val(m+","+l);if(!h.address){c(p,null,false)}else{o.val(h.address)}}else{o.val(h.address);var i=new BMap.Geocoder();i.getPoint(h.address,function(r){p=r;m=r.lng;l=r.lat;g.val(m+","+l)})}}else{var k=new BMap.Geolocation();k.getCurrentPosition(function(t){if(this.getStatus()==BMAP_STATUS_SUCCESS){var s=new BMap.Marker(t.point);p=t.point;m=t.point.lng;l=t.point.lat}},{enableHighAccuracy:true})}o.focus(function(r){n.show().css("zIndex",999);d()});o.blur(function(r){n.hide().css("zIndex",0)});function d(){if(a){return false}a=new BMap.Map("Map_"+b,{enableMapClick:false});a.centerAndZoom(new BMap.Point(m,l),15);a.enableScrollWheelZoom();a.enableContinuousZoom();e(p);a.addEventListener("click",function(s){e(s.point);c(s.point)});var r=o.val();q=new BMap.Autocomplete({input:"Map_input_"+b,location:a});q.setInputValue(r);q.addEventListener("onconfirm",function(v){var t=v.item.value;myValue=t.province+t.city+t.district+t.street+t.business;function s(){var w=u.getResults().getPoi(0).point;a.centerAndZoom(w,15);c(w,t);e(w)}var u=new BMap.LocalSearch(a,{onSearchComplete:s});u.search(myValue)})}function c(r,s,u){var t=new BMap.Geocoder();g.val(r.lng+","+r.lat);t.getLocation(r,function(v){var w=v.addressComponents;if(s){w=$.extend(s,w)}w.business=w.business?w.business:"";if(q){q.setInputValue(w.province+w.city+w.district+w.street+w.streetNumber+w.business)}else{t.getLocation(r,function(x){o.val(x.address)})}if(h.callback&&!u){h.callback(w,r)}})}function e(r){a.clearOverlays();var s=new BMap.Marker(r);a.addOverlay(s);s.enableDragging();s.addEventListener("dragend",function(t){c(t.point)})}};

获取地图的信息到input里的更多相关文章

  1. ionic基于GPS定位并通过百度地图获取定位详细信息

    相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...

  2. 根据关键字获取高德地图poi信息

    根据关键字获取高德地图poi信息 百度地图和高德地图都提供了根据关键字获取相应的poi信息的api,不过它们提供给普通开发者使用的次数有限无法满足要求.其次百度地图返回的poi中位置信息不是经纬度,而 ...

  3. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  4. 【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？

    原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...

  5. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

  6. 在Android Studio中使用BaiduMap SDK实时获取当地位置信息

    配置BaiduMap 环境 1.在百度API中新建自己的一个APP包名和APP名需要注意和自己Android Studio 中的包名和APP名保持一致: 2.百度地图中还需要填写一个SHA1 数字签名 ...

  7. 通过ADB获取Android手机信息

    原文:https://blog.csdn.net/fasfaf454/article/details/51438743 1.获取手机系统信息( CPU,厂商名称等)adb shell "ca ...

  8. ThinPHP命名空间,连接数据库是要修改的配置文件，Model数据模型层,跨控制器调用，如何获取系统常量信息，

    一.命名空间(主要是为了实现自动加载类) *命名空间(相当于虚拟的目录),为了让类有一个统一的文件夹来管理(可以自动加载'类'),每个文件都要有命名空间*tp如何做命名空间:*TP框架下有一个初始命名 ...

  9. C# 获取 mp3文件信息

    C# 获取 mp3文件信息[包括:文件大小.歌曲长度.歌手.专辑] 第一种方式:[代码已验证] // http://bbs.csdn.net/topics/390392612   string fil ...

随机推荐

  1. Redis 实现分布式锁

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  2. C# 使用Guid类生成不重复的随机数

    什么是Guid GUID(全局唯一标识符)         全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID ...

  3. 《Visual C++ 2010入门教程》系列一：关于Visual Studio、VC和C++的那些事

    原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115606.html 作者:董波 日期:2010.6.15 写在前面 在我还在上学的时候,我 ...

  4. 【Python】Python3基本语法入门学习

    0.Python概述 1.First Word Game 2.变量与字符串 3.improved game 4.Python数据类型 5.常用操作符 6.分支与循环 7.列表 8.元组 9.字符串内置 ...

  5. dubbo学习总结一 API

    API 一般用来暴露接口 项目分层一般是 api + entity + enums + model 就是接口加上一些实体之类的东西

  6. js 巧妙去除数组中的重复项

    1.代码如下: var toObject = function(a) { var o = {}; for (var i=0, j=a.length; i<j; i=i+1) { // 这里我调整 ...

  7. 网络分析 ANP

    在许多实际问题中,各层次内部元素往往是依赖的. 低层元素对高层元素亦有支配作用,即存在反馈. 此时系统的结构更类似于网络结构.网络分析法正是适应这种需要,由AHP延伸发展得到的系统决策方法.   AN ...

  8. Debian/Kali 安装原生Firefox

    出于种种原因,有很多人信仰原装纯净:就像debian下的iceweasel,有人总想换成firefox.好吧,正好最近29版发布了,我们无视掉这两者哥两好的关系,尝试在Debian/Kali 下安装F ...

  9. hdu-4135 Co-prime---容斥定理经典&&求1-m中与n互质的数目

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4135 题目大意: 求区间[a, b]中与N互质的数目. 解题思路: 首先对n求出所有素因子. 对于区 ...

  10. ZooKeeper介绍与环境搭建

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...