<!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. maven项目转eclipse工程的命令：eclipse.bat

    call mvn clean:clean call mvn eclipse:eclipse -DdownloadSources=true @pause 复制以上内容,保存为eclipse.bat 以后 ...

  2. phpcms V9静态判断会员登录状态的方法

    phpcms v9如何在任意地方判断会员的登录状态呢?在php中是比较好判断的,代码如下 <?php if (!$_userid){ echo"会员没有登录"; }else ...

  3. 浅谈String类型

    首先,我们要知道的是String类型是一个引用类型,它的基类是Object.并且它的内容是只读的. 我们有时候经常会看到两个字符串类型,一个是“Sting”,一个是“string”.大写的String ...

  4. 通过 struct 成员地址 获取 struct 结构体地址

    1. 问题描述: 现在定义了一个结构体: struct Foo { int a; int b; }; Foo foo; 假如由于函数传参等原因,现在程序只能拿到 foo.b 的地址,这时想通过某种方法 ...

  5. OFBiz进阶之HelloWorld（五）创建新实体

    参考文档 https://cwiki.apache.org/confluence/display/OFBIZ/OFBiz+Tutorial+-+A+Beginners+Development+Guid ...

  6. php 如何开启session

    1.如果你在session_start()前没有输出内容,哪怕是一个句号也不行,就可以直接使用session_start)_; 2.如果你之前已经有输出内容了,可以使用以下方法: <?php o ...

  7. DataGrid中取HyperLinkColumn列的值,处理DataGrid中绑定的特殊字符

    DataGrid中取HyperLinkColumn列的值. /// <summary> /// 对datagrid中标签进行编码,处理特殊字符 /// </summary> / ...

  8. IE 坑爹的浏览器兼容模式

    作为作为Web的前端开发人员,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,个人比较喜欢用火狐浏览器来做开发和调试,对于不怎么懂CSS的我来说,IE的样式调整一看就头大了.对于没有美工的团 ...

  9. Delphi XE5 android 蓝牙通讯传输

    不多讲,直接上代码了. 代码来自网络 http://files.cnblogs.com/nywh2008/Bluetooth_LEDs_android.rar

  10. query specified join fetching, but the owner of the fetched association was not present in the select list

    报标题的错误,是因为在 select count的时候,不需要fetch 所以在取完count以后,再把fetch加进去,变成left join  fetch /** * 请把jhql以o为返回对象, ...