<!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. YII千万级PV架构经验分享--俯瞰篇--业务扩展演变

    hello,大家好,我是方少,世上不如意事十有八九吧,即使你感到很满意,也有人感觉太差了,总得感觉我们技术人员都是一个人在战斗,感情却是最深的,一起吃过苦才难忘吧.娇妻艳女,你失意了会和你一起吃苦吗? ...

  2. 我的第一个canvas的作品：漫画对白编辑器

    背景:一直都对canvas挺有有兴趣的,之前刚刚看了<HTML5 CANVAS基础教程>,写了篇读书笔记. 起因:老婆发来一张最近比较热的漫画图(友谊的小船说翻就翻什么的).这种漫画,经常 ...

  3. Have Fun with Numbers (大数)

    Notice that the number 123456789 is a 9-digit number consisting exactly the numbers from 1 to 9, wit ...

  4. Android 管理Activity中的fragments

    为了管理Activity中的fragments,需要使用FragmentManager,为了得到它,需要调用Activity中的getFragmentManager()方法,接下来详细介绍,感兴趣的朋 ...

  5. 【Entity Framework 7】 完全不一样的玩法

    http://www.cnblogs.com/n-pei/p/4274907.html

  6. SVM整理

    SVM整理 Last modified: 2015.9.2 1.算法总结 支持向量机是Cortes和Vapnik于1995年首先提出的,它在解决小样本,非线性及高维模式识别中表现出许多特有的优势,并能 ...

  7. Java中的break与continue区别

    break跳出当前循环执行循环下面的程序, 如果break出现在嵌套循环的内层循环, 则break语句只会跳出当前层的循环; 当程序执行到continue时时, 则跳过本次循环程序重新回到循环开始继续 ...

  8. 在Hadoop分布式文件系统的索引和搜索

    FROM:http://www.drdobbs.com/parallel/indexing-and-searching-on-a-hadoop-distr/226300241?pgno=3 在今天的信 ...

  9. UINavigationController 总结

    一 . UINavigationBar 1.获取 UINavigationBar 对象: [UINavigationBar appearance] ,可以通过该方法对全部 navigation 进行设 ...

  10. 使用Unity拦截一个返回Task的方法

    目标 主要是想为服务方法注入公用的异常处理代码,从而使得业务代码简洁.本人使用Unity.Interception主键来达到这个目标.由于希望默认就执行拦截,所以使用了虚方法拦截器.要实现拦截,需要实 ...