<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

    <head>

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

        <title>地图 - 老干部管理信息系统</title>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

        <style type="text/css">

        body{font-size:14px;}

        h5{line-height:3em;padding:;margin:;}

        .txt{border:1px solid #ccc;background:none;padding:1px; width:400px;}

        .f-l{float:left;}

        .t-c{text-align:center;}

        .clear{clear:both;}

        .hidden{display:none;}

        .searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding: 20px;margin:   50px;}

        .mainbox{margin:20px  ;}

        .boxmap{width:700px;height:500px;border:1px solid gray;float:left;}

        .boxpanel{width:250px;float:left;margin:   10px;border:1px solid gray;padding: 10px 10px;}

        #startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}

        #startPanel div,#endPanel div{padding:5px;}

        #startPanel p,#endPanel p{margin:;padding:;line-height:.2em;}

        #drivingPanel{border:1px solid #6688EE;}

        </style>

    </head>

    <body>

    <div>

        <!-- <img class="f-l" src="pictures/book.png" width="50px" height="50px" alt="老干部管理信息系统"/> -->

        <div class="searchbox">

            位置：<input class="txt" type="text" value="天安门" id="searchPlace" />&nbsp;&nbsp;

            周边：<select

                id="aroundType">

                <option>医院</option>

                <option>学校</option>

                <option>超市</option>

                <option>银行</option>

            </select>

            <input type="button" value="搜索" id="btnSearch" onclick="doSearchPlace()" />

        </div>

    </div>

    <div class="clear"></div>

    <div class="mainbox">

        <div class="boxmap" id="container"></div>

        <div id="results" style="font-size:13px;margin-top:10px;"></div>

<div id="hospitalresults" style="font-size:13px;margin-top:10px;"></div>

    </div>

    </body>

</html>

<script type="text/javascript">

    var map = new BMap.Map("container");            // 创建Map实例

    var point = new BMap.Point(116.404, 39.915);    // 创建点坐标

    map.centerAndZoom(point, );                     // 初始化地图,设置中心点坐标和地图级别。

    map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。

    map.enableKeyboard();                         // 启用键盘操作。

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

    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件

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

    var searchresult;

    var local = new BMap.LocalSearch(map, {

        renderOptions: {

            map: map,

            panel: "results"

        },

        onSearchComplete: function (results) {

            // 判断状态是否正确

            if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult = results;

            else searchresult = null;

        }

    });

    var searchresult2;

    var local2 = new BMap.LocalSearch(map, {

        renderOptions:

    {

        map: map,

        panel: "hospitalresults"

    },

    onSearchComplete: function (results) {

        // 判断状态是否正确

        if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult2 = results;

        else searchresult2 = null;

    }

    });

    function doSearchPlace() {

        if (local.getResults() != null)

            local.clearResults();

        if (local2.getResults() != null)

            local2.clearResults();

        map.clearOverlays();

        var destination = document.getElementById("searchPlace").value;

        local.search(destination);

        local.setResultsHtmlSetCallback(function () {//加载完结果面板后调用

            if (searchresult == null) return false;

            var controls = document.getElementsByTagName("li");

            for (var i = ; i < controls.length; i++) {

                var spans = controls[i].getElementsByTagName("span");

                var arr = new Array();

                var p = searchresult.getPoi(i);

                if (p == null) continue;

                arr[] = searchresult.getPoi(i).point.lng;

                arr[] = searchresult.getPoi(i).point.lat;

                spans[].onclick = function () {

                    map.clearOverlays();

                    point.lng = arr[];

                    point.lat = arr[];

                    var circle = new BMap.Circle(point, , { strokeWeight: , fillOpacity: 0.5 });

                    map.addOverlay(circle);

                    var around = document.getElementById("aroundType");

                    var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());

                    local2.searchInBounds(around[around.selectedIndex].text, bounds);

                };

            }

        });

    }

    /**

    * 得到圆的内接正方形bounds

    * @param {Point} centerPoi 圆形范围的圆心

    * @param {Number} r 圆形范围的半径

    * @return 无返回值

    */

    function getSquareBounds(centerPoi, r) {

        var a = Math.sqrt() * r; //正方形边长

        mPoi = getMecator(centerPoi);

        var x0 = mPoi.x, y0 = mPoi.y;

        var x1 = x0 + a / , y1 = y0 + a / ; //东北点

        var x2 = x0 - a / , y2 = y0 - a / ; //西南点

        var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));

        return new BMap.Bounds(sw, ne);

    }

    //根据球面坐标获得平面坐标。

    function getMecator(poi) {

        return map.getMapType().getProjection().lngLatToPoint(poi);

    }

    //根据平面坐标获得球面坐标。

    function getPoi(mecator) {

        return map.getMapType().getProjection().pointToLngLat(mecator);

    }

</script>

百度地图API的调用的更多相关文章

  1. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  2. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  3. 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API

    因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...

  4. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  5. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  6. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  7. 【百度地图API】当地址解析失败时，如何调用search方法查找地址

    原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...

  8. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

随机推荐

  1. CodeIgniter 框架---学习笔记

    1.输出sql语句:echo $this->db->last_query();

  2. MYSQL 多表更新 UPDATE SET like concat('%',abc,'%');

    SQL语句为:select * from table1 where `text` like CONCAT('%',(select name from table2 where id =3),'%'); ...

  3. ComboBox Control Messages 消息

    连接到MSDN,有时间完善这个.具体说明可点击进入msdn CB_ADDSTRING 添加一个字符串组合框的列表框.如果组合框没有cbs_sort风格,字符串添加到列表的结尾.否则,该字符串插入列表, ...

  4. Spark小课堂Week1 Hello Spark

    Spark小课堂Week1 Hello Spark 看到Spark这个词,你的第一印象是什么? 这是一朵"火花",官方的定义是Spark是一个高速的.通用的.分布式计算系统!!! ...

  5. PyQt4学习记录之事件和信号

    事件是任何 GUI程序中很重要的部分.所有 Python GUI 应用都是事件驱动的.一个应用对其生命期产生的不同的事件类型做出反应.事件是主要由应用的用户产生.但是,也可以通过其他方法产生,比如,网 ...

  6. MenuItem

    private void 文件ToolStripMenuItem_Click(object sender, EventArgs e) { MessageBox.Show("打开测试" ...

  7. 详解Google-ProtoBuf中结构化数据的编码

    本文的主要内容是google protobuf中序列化数据时用到的编码规则,但是,介绍具体的编码规则之前,我觉得有必要先简单介绍一下google protobuf.因此,本文首先会介绍一些google ...

  8. MVC5 Bundles发布到IIS失效问题解决方案

    MVC中Bundles可以提高代码的可重用性 我每个页面都需要用到这十几个JS+CSS 当我把MVC发布到服务器以后,Bundles中的JS和CSS会失效的时候 宝宝的心里是崩溃的.... 查了很多资 ...

  9. HttpClient抓取网页内容简单介绍

    版本HttpClient3.1 1.GET方式 第一步.创建一个客户端,类似于你用浏览器打开一个网页 HttpClient httpClient = new HttpClient(); 第二步.创建一 ...

  10. ajax,json和$.each()

    json返回的时候,只需要展示部分字段,如果是 ajax从后台获取结果处理,可以使用.select() 等处理结合匿名类,生成需要的字段的匿名类json字符串,返回前端,可以使用$.parseJson ...