百度地图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. jQuery&Ajax应用

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是load(),$.get()和$.post()方法,第三层是$.getScript(),$.getJ ...

  2. vue中如何获取后台数据

    原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...

  3. 51Nod 欢乐手速场1 B 序列变换[容斥原理 莫比乌斯函数]

    序列变换 alpq654321 (命题人)   基准时间限制:1 秒 空间限制:131072 KB 分值: 40 lyk有两序列a和b. lyk想知道存在多少对x,y,满足以下两个条件. 1:gcd( ...

  4. React ref回调函数例子

    ref属性也可以是一个回调函数而不是一个名字.   这个函数将要在组件被挂载之后立即执行. 这个参照的组件将会作为该函数的参数,这个函数可以立即使用这个组件参数,当然也可以将其保存供以后使用. 当这个 ...

  5. UITableView！别再用代码计算行高了（一）

    你还在用代码去计算行高吗?你不感觉那种方式很low吗?从今天起,试着做些改变吧! 别给我讲你喜欢写代码的感觉,你就是要用代码去计算行高,那我这篇文章不适合你. 在讲解复杂内容之前,还是先学习简单的内容 ...

  6. elasticsearch 6 在 centos 6 上的安装问题

    ERROR: bootstrap checks failed max file descriptors [4096] for elasticsearch process likely too low, ...

  7. redis —主从&&集群（CLUSTER）

    REDIS主从配置 为了节省资源,本实验在一台机器进行.即,在一台机器上启动两个端口,模拟两台机器. 机器准备: [root@adailinux ~]# cp /etc/redis.conf /etc ...

  8. OpenCV亚像素角点cornerSubPixel()源代码分析

    上一篇博客中讲到了goodFeatureToTrack()这个API函数能够获取图像中的强角点.但是获取的角点坐标是整数,但是通常情况下,角点的真实位置并不一定在整数像素位置,因此为了获取更为精确的角 ...

  9. OKL4虚拟化技术跟踪

    这篇博客准备介绍OKL4的研究进展,本文的内容主要根据我个人阅读<OKL4_LongPaper_2010_HW_VM>这篇文章之后的理解,我也根据这篇论文的内容做了一些实验,奈何此论文涉及 ...

  10. Spring-mvc 静态资源不拦截

    在Spring-mvc.xml文件中加入这个就可以了 <!-- 用于对静态文件进行解析 --> <mvc:annotation-driven /> <mvc:resour ...