<!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>

若需要转载，联系原文作者
更多技术文章，行业交流，web前端开发资源，请看原文链接：祈澈姑娘
或者联系我的微信，姑娘家家创作不易，走过路过点个赞呗

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

  1. JS调用百度地图API标记地点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  3. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

  4. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

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

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

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

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

  7. js调用百度地图接口

    原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...

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

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

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

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

随机推荐

  1. A glance on VDBI

    Just like other thing in data transfter, a resource should have themselves description. And the reso ...

  2. 【编程】辨异 —— proxy 与 delegate

    二者分别对应着设计模式中的代理模式和委托模式. proxy:译为代理, 被代理方(B)与代理方(A)的接口完全一致. 主要使用场景(语义)应该是:为简化编程(或无法操作B),不直接把请求交给被代理方( ...

  3. HDU 6217 BBP Formula (数学)

    题目链接: HDU 7217 题意: 题目给你可以计算 \(π\) 的公式: \(\pi = \sum_{k=0}^{\infty}[\frac{1}{16^k}(\frac{4}{8k+1})-(\ ...

  4. 常用的Windows命令

    常用的Windows命令 explorer-------打开资源管理器 logoff---------注销命令 shutdown-------关机命令 lusrmgr.msc----本机用户和组 se ...

  5. 视频编码器评測系统：VideoCodecRank

    视频编码器领域一直有个比較复杂的问题:mpeg2.divx.xvid.mpeg4.vp8.vp9.x264.openh264.x265等等这一系列编码器究竟哪个好?而对于同一种视频编码器,又包括了各种 ...

  6. Swift UIView 层次调整

    Swift 中添加的UIView都是有层级的. 我们先添加三个看一看 let view1=UIView(frame: CGRectMake(10, 50, 200, 200)) let view2=U ...

  7. (转)Bash 快捷键 完整版

    转自:http://www.opsers.org/linux-home/base/full-version-of-bash-keyboard-shortcuts.html#toc-3 生活在 Bash ...

  8. 重写ajax方法实现异步请求session过期时跳转登录页面（转）

    一般我们会在过滤器里判断登录状态,如果没登录就跳转登录页面,过滤器java核心代码如下: UserItem loginUser = (UserItem)request.getSession().get ...

  9. 一、Github博客搭建之jekyll安装

    注意:以下步骤是FQ后操作的,需要了解FQ的可以移步 -> 枫叶主机 一.安装jekyll需要Ruby-2.1.0以上版本,本人是mac pro系统版本10.12.5(macOS Sierra) ...

  10. ZOJ 1136 Longest Ordered Subsequence DP

    传送门:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1136 题目大意:给定一串序列,求最长的升序列长度,如1, 7, 3, ...