原型图

图片发自简书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. 决策树2 -- CART算法

    声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结.不得用作商用,欢迎转载,但请注明出处(即:本帖地址). 2,因为本人在学习初始时有非常多数学知识都已忘记.所以为 ...

  2. [Angular] Use :host-context and the ::ng-deep selector to apply context-based styling

    If you want to style host component. You can use ':host-context'. // host @Component({ selector: 'my ...

  3. 手撕面试题ThreadLocal！！！

    说明 面试官:讲讲你对ThreadLocal的一些理解. 那么我们该怎么回答呢????你也可以思考下,下面看看零度的思考: ThreadLocal用在什么地方? ThreadLocal一些细节! Th ...

  4. 1.1 Introduction中 Topics and Logs官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Topics and Logs 话题和日志 (Topic和Log) Let's fi ...

  5. clear属性来取消浮动

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  6. ehcache、memcache、redis三大缓存比较(转)

    最近项目组有用到这三个缓存,去各自的官方看了下,觉得还真的各有千秋!今天特意归纳下各个缓存的优缺点,仅供参考!  Ehcache 在Java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS ...

  7. 洛谷—— P1168 中位数

    https://www.luogu.org/problem/show?pid=1168 题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], ...

  8. 关于mybatis中，批量增删改查以及參数传递的问题

    1.參数传递的问题 大多数情况下,我们都是利用map作为參数,而且大部分情况下都是仅仅有一个參数. 可是,我们也能够利用@param注解,来传入多个參数,此时,mybatis会自己主动将參数封装成ma ...

  9. WinPcap 简介

    WinPcap(windows packet capture) 它包括一个核心态的包过滤器NPF,一个底层的动态链接库(packet.dll)和一个高层的不依赖于系统的库(wpcap.dll). [w ...

  10. java学习笔记之基础语法（二）

    1.数组: 概念:同一种类型数据的集合,其实,数组就是一个容器 优点:可以方便的对其进行操作,编号从0开始,方便操作这些元素. 2,数组的格式 元素类型[]数组名=new 元素类型[数组元素个数]: ...