原型图

图片发自简书App


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

        <!--调用百度地图api-->

        <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true">

        </script>

        <title></title>

        <style>

            /*服务网点*/

            #wrap {

                width: 1196px;

                height: 540;

                margin: auto;

                overflow: hidden;

            }

            #wrap div ._left {

                width: 281px;

                float: left;

                height: 339px;

                border-right: 1px solid #CCCCCC;

            }

            #wrap ul {

                width: 1196px;

                height: 50px;

                border-bottom: 1px solid #CCCCCC;

                border-top: 1px solid #CCCCCC;

                margin-bottom: 57px;

            }

            /*搜索框城市*/

            #input {

                width: 360px;

                height: 37px;

                margin-left: 51px;

            }

        </style>

    </head>

    <body>

        <!--服务网点与帮助中心-->

        <div id="wrap">

        <ul></ul>

            <!--服务网点-->

            <!--百度地图容器-->

            <div style="width: 563px; height: 435px; float: left;  margin-bottom: 142px;" id="dituContent"></div>

            <div style="float: left;">

                <input type="text" id="input" />

                <input type="button" onclick="searchMap();" value="搜索地图" style="width: 160px; height: 39px;" />

            </div>

            <!--百度地图容器结束-->

        </div>

    </body>

    <script type="text/javascript">

        //创建和初始化地图函数：

        function initMap() {

            createMap(114.025974, 22.546054); //创建地图

            setMapEvent(); //设置地图事件

            addMapControl(); //向地图添加控件

        }

        //地图搜索

        function searchMap() {

            var area = document.getElementById("input").value; //得到地区

            var ls = new BMap.LocalSearch(map);

            ls.setSearchCompleteCallback(function(rs) {

                if(ls.getStatus() == BMAP_STATUS_SUCCESS) {

                    var poi = rs.getPoi(0);

                    if(poi) {

                        createMap(poi.point.lng, poi.point.lat); //创建地图(经度poi.point.lng,纬度poi.point.lat)

                        setMapEvent(); //设置地图事件

                        addMapControl(); //向地图添加控件

                    }

                }

            });

            ls.search(area);

        }

        //创建地图函数：

        function createMap(x, y) {

            var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图

            var point = new BMap.Point(x, y); //定义一个中心点坐标

            map.centerAndZoom(point, 12); //设定地图的中心点和坐标并将地图显示在地图容器中

            window.map = map; //将map变量存储在全局

        }

        //地图事件设置函数：

        function setMapEvent() {

            map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)

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

            map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)

            map.enableKeyboard(); //启用键盘上下左右键移动地图

        }

        //地图控件添加函数：

        function addMapControl() {

            //向地图中添加缩放控件

            var ctrl_nav = new BMap.NavigationControl({

                anchor: BMAP_ANCHOR_TOP_LEFT,

                type: BMAP_NAVIGATION_CONTROL_LARGE

            });

            map.addControl(ctrl_nav);

            //向地图中添加缩略图控件

            var ctrl_ove = new BMap.OverviewMapControl({

                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

                isOpen: 1

            });

            map.addControl(ctrl_ove);

            //向地图中添加比例尺控件

            var ctrl_sca = new BMap.ScaleControl({

                anchor: BMAP_ANCHOR_BOTTOM_LEFT

            });

            map.addControl(ctrl_sca);

        }

        initMap(); //创建和初始化地图

    </script>

</html>

代码图

图片发自简书App

前端切图:调用百度地图API的更多相关文章

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

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

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

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

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

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

  4. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  5. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  6. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  7. HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地

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

  8. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  9. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

随机推荐

  1. Linux下守护进程精析

    什么是守护进程?     守护进程就是通常所说的Daemon进程,它是Linux中的后台服务程序. 它是一个生存期较长的进程,通常独立于终端而且周期性的运行某种须要的任务以及有时候会等待一些将会发生的 ...

  2. C++ 学习路线推荐

        相信有非常大一部分学计算机的童鞋都是靠自学,即使本身是计算机专业的同学,也会认为只通过课堂上的学习是远远不够的,并且在上课时所用到的教材也不够好.然而自学的时候有个非常大的问题就是找不到合适的 ...

  3. 洛谷 P1458 顺序的分数 Ordered Fractions

    P1458 顺序的分数 Ordered Fractions 题目描述 输入一个自然数N,对于一个最简分数a/b(分子和分母互质的分数),满足1<=b<=N,0<=a/b<=1, ...

  4. Altium Designer布局移动原件的问题

  5. 微服务实战（四）：服务发现的可行方案以及实践案例 - DockOne.io

    原文:微服务实战(四):服务发现的可行方案以及实践案例 - DockOne.io 这是关于使用微服务架构创建应用系列的第四篇文章.第一篇介绍了微服务架构的模式,讨论了使用微服务架构的优缺点.第二和第三 ...

  6. SpringMVC实战(三种控制器方式)

    1.前言 上篇博客着重说了一下SpringMVC中几种处理映射的方式,这篇博客来说一下SpringMVC中几种经常使用的控制器.  2.经常使用控制器 2.1 ParameterizableViewC ...

  7. SDWebImage使用

    SDWebImage这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. 将SDWebImage类库添加入工程时,一定 ...

  8. spark提交应用的方法(spark-submit)

    参考自:https://spark.apache.org/docs/latest/submitting-applications.html 常见的语法: ./bin/spark-submit \    ...

  9. WebService--CXF与Spring的整合（jaxws:endpoint形式配置）以及客户端调用（spring配置文件形式，不需要生成客户端代码）

    一.CXF与Spring整合(jaxws:endpoint形式配置) 工具要点:idea.maven 1.新建一个maven项目 <?xml version="1.0" en ...

  10. CImage将图片转为指定像素大小

    CFileDialog fDlg(true, "jpg", "",   OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT,   &q ...