百度地图API的调用

<!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的调用的更多相关文章

vue中百度地图API的调用
1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...
如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
在XAF(ASP.NET)中以ListEditor的形式调用百度地图API
因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...
调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
【百度地图API】当地址解析失败时，如何调用search方法查找地址
原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...
HTML 百度地图API调用示例源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...

随机推荐

delphi 自带报告内存泄漏
//报告内存泄漏 ReportMemoryLeaksOnShutdown := true;
sirius的python学习笔记（1）
1.可以通过try...except语句来简单的判断字符串是否为整数值,如例程 x = raw_input('>') try: print int(x) except ValueError: r ...
hdu 4641 K-string SAM的O(n^2)算法以及 SAM+并查集优化
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4641 题意:有一个长度为n(n < 5e4)的字符串,Q(Q<=2e5)次操作:操作分为:在末 ...
第二章约束和排序数据（SQL基础）
第二章约束和排序数据 1. 在 emp 表中选择工资介于 1500 到 2500 的员工的信息: 注意:使用 between 下边界 and 上边界时,条件包括边界值: ...
easy ui window 相关属性
<div class="easyui-window" title="提示" style="width:550px;height:500px;pa ...
SVN 提交必填备注Commit
操作方法:在SVN的Repositories下,找到要配置的项目,在项目目录下找到hooks文件夹,在其下创建pre-commit.bat文件,把下面复制进去就可以了(无需重启,如果改动,保存bat文 ...
The ‘Microsoft.ACE.OLEDB.12.0′ provider is not registered on the local machine. (System.Data)
When you try to import Excel 2007 or later “.xlsx” files into an SQL Server 2008 database you may ge ...
C# - Generic
定义泛型类创建泛型类,在类定义中包含尖括号语法 class MyGenericClass<T> { ... } T可以是任意标识符,只要遵循通常的C#命名规则即可.泛型类可以在其定义中包 ...
[SQL SERVER系列]读书笔记之SQL注入漏洞和SQL调优
最近读了程序员的SQL金典这本书,觉得里面的SQL注入漏洞和SQL调优总结得不错,下面简单讨论下SQL注入漏洞和SQL调优. 1. SQL注入漏洞由于“'1'='1'”这个表达式永远返回 true, ...
Maven系列--"maven-compiler-plugin"的使用、Maven之Surefire插件
一."maven-compiler-plugin"的使用 http://my.oschina.net/poorzerg/blog/206856 二.Maven之Surefire插件 ...

百度地图API的调用

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

随机推荐

热门专题