百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ：

搜索：<input type="text" size="20" name="keyword" id="keyword" /> <input type="submit" value="提交" onclick="MblogDotccMap(document.getElementById('keyword').value)" />

<!--
更多技术分享请看博客：http://blog.csdn.net/fuyifang
-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>百度地图Demo-更多技术分享请看博客：http://blog.csdn.net/fuyifang</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
    <div style="width: 520px; height: 340px; border: 1px solid gray" id="container">
    </div>
</body>
</html>
<script type="text/javascript">

    var map = new BMap.Map("container"); //初始化地图

    var opts = { type: BMAP_NAVIGATION_CONTROL_LARGE }; //初始化地图控件
    map.addControl(new BMap.NavigationControl(opts));

    var point = new BMap.Point(121.48, 31.22); //初始化地图中心点
    var marker = new BMap.Marker(point); //初始化地图标记
    marker.enableDragging(); //标记开启拖拽

    var gc = new BMap.Geocoder();
    //添加标记拖拽监听
    marker.addEventListener("dragend", function (e) {
        //获取地址信息
        gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
        });
    });

    //添加标记点击监听
    marker.addEventListener("click", function (e) {
        gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
        });
    });

    map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
    map.addOverlay(marker); //将标记添加到地图中

    //显示地址信息窗口
    function showLocationInfo(pt, rs) {
        var opts = {
            width: 250, //信息窗口宽度
            height: 100, //信息窗口高度
            title: "" //信息窗口标题
        }

        var addComp = rs.addressComponents;
        var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br />";
        addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
        //alert(addr);

        var infoWindow = new BMap.InfoWindow(addr, opts); //创建信息窗口对象
        marker.openInfoWindow(infoWindow);
    }
    function MblogDotccMap(keyword) {
        //搜索
        var local = new BMap.LocalSearch(map,
         { renderOptions: { map: map, panel: "results_info" }
          }
         );

        map.panBy(point);

        local.search(keyword);

        local.getResults()

        local.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            //alert(poi.point.lng+"   "+poi.point.lat);
            //document.getElementById("info").innerHTML = "<strong>" + keyword + "</strong>" + "坐标：" + poi.point.lng + "," + poi.point.lat;
        });

    }

</script>
<div id="results_info"></div>
搜索：<input type="text" size="20" name="keyword" id="keyword" /> <input type="submit" value="提交" onclick="MblogDotccMap(document.getElementById('keyword').value)" />
<!--
更多技术分享请看博客：http://blog.csdn.net/fuyifang
-->

百度地图JavaScript API经纬度查询-MAP的更多相关文章

  1. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  2. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  3. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  4. 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

  5. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

  6. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  7. 百度地图JavaScript API本地搜索的结果面板

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

  8. 百度地图 JavaScript API

    最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...

  9. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

随机推荐

  1. Django REST framework中的版本控制

    1.REST framework版本控制的流程分析 1.1 determine_version方法的执行流程 首先,请求到达REST framework的CBV,执行CBV中的dispatch方法再次 ...

  2. BZOJ 1180: [CROATIAN2009]OTOCI [LCT]

    1180: [CROATIAN2009]OTOCI Time Limit: 50 Sec  Memory Limit: 162 MBSubmit: 961  Solved: 594[Submit][S ...

  3. python---协程 学习笔记

    协程 协程又称为微线程,协程是一种用户态的轻量级线程 协程拥有自己的寄存器和栈.协程调度切换的时候,将寄存器上下文和栈都保存到其他地方,在切换回来的时候,恢复到先前保存的寄存器上下文和栈,因此:协程能 ...

  4. .NET Core UI框架Avalonia

    .NET Core UI框架Avalonia,Avalonia是一个基于WPF XAML的跨平台UI框架,并支持多种操作系统:Windows(.NET Framework,.NET Core),Lin ...

  5. 【剑指offer28：字符串的排列】【java】

    题目:输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. import ja ...

  6. prop&attr区别和用法,以多选框为例

    1.比较 相同点 : prop和attr作为jquery的方法都可以获取属性值; 不同点 : (1) 对于HTML元素本身就带有的固有属性,使用prop方法, attr获取checkbox的check ...

  7. statement preparestatement CallableStatement

    大家都知道Statement.PrepareStatement 和CallableStatement 对象,其实它们是interface,为什么JDBC2.0中要提供这三个对象呢?对于Statemen ...

  8. MySQL体系结构及多实例

    MySQL客户端和服务器端模型 MySQL是一个典型C/S,服务器端与客户端两部分组成 服务器端程序  mysqld mysql自带的客户端(mysql mysqladmin  mysqldump等) ...

  9. C#委托与事件--简单笔记

    委托 简单记录点东西 适合似懂非懂的朋友看看 委托类型用来定义和响应应用程序中的回调. 借此可以设计各种有面向对象特性的代码模式.下面要说的事件在我看来就是委托的一种实现,再深一步讲,利用委托加事件, ...

  10. python使用

    1. ipython 打印所有的输出变量 from IPython.core.interactiveshell import InteractiveShell InteractiveShell.ast ...