原型图

图片发自简书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. Flask项目之手机端租房网站的实战开发（十二）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  2. [python]类与对象-下

    [实例对象]可以简称为[实例] 一.类与对象的关系 [类]是[对象]的模板. [类]就像工厂的模具,以它为模板,造出来的成千上万的产品,才是被我们消费.购买.使用,真正融入我们生活的东西.这些产品,在 ...

  3. 网络博客 VC\图案像处理

    http://blog.csdn.net/lvwx369/article/category/1185452 http://blog.csdn.net/lyy289065406/article/deta ...

  4. 【习题 6-3 UVA - 536】 Tree Recovery

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 递归题 [代码] #include <bits/stdc++.h> using namespace std; const ...

  5. POJ2029:Get Many Persimmon Trees(二维树状数组)

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  6. python3 登录验证小程序，同一用户输错三次密码，锁定账户

    ''' 让用户输入用户名密码 认证成功后显示欢迎信息用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态''' # !/usr/bin/env python # -*- coding:u ...

  7. 如何在本地运行查看github上的开源项目

    看中了一款很多星星的github的项目,想把这个项目拉到自己的电脑上运行查看项目效果,该怎么做?示例:我们今天要看的 github项目地址:https://github.com/lzxb/vue-cn ...

  8. (转)const char to LPCTSTR不能转化问题

    转: const char to LPCTSTR不能转化问题 Visual C++ 2008里cannot convert parameter 1 from 'const char [13]' to ...

  9. zoj 2724 Windows Message Queue 优先队列

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1724 题目大意: 给出两种操作,GET要求取出当前队首的元素,而PUT会输入名 ...

  10. 10.13 android输入系统_多点触摸驱动理论与框架

    1.多点触摸驱动理论 驱动程序仅上报多个触点的位置就可以,是放大还是缩小由应用程序控制 对于多点触摸驱动在linux系统中有个输入子系统,其已经实现了open/read/write等接口 我们只需要实 ...