<!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. Python基础教程之第1章 基础知识

    #1.1 安装Python #1.1.1 Windows #1.1.2 Linux和UNIX #1.1.3 Macintosh #1.1.4 其它公布版 #1.1.5 时常关注.保持更新 #1.2 交 ...

  2. 删除online日志測试及ora-600 [4194]错误的处理

    今天做了一个关于破坏online日志的恢复測试,主要三个场景: 測试1:正常关闭数据库后删除非当前日志 測试2:正常关库后.删除在线日志文件 測试3:非正常关闭数据库.并删除当前在线日志文件 我的測试 ...

  3. VPS 的 CentOS6 升级 Python 的方法

    VPS 的 CentOS6 升级 Python 的方法 centos默认安装python2.6.由于python和centos关联紧密,所以不建议卸载,进行编译升级 1.新开的VPS务必系统更新 yu ...

  4. caffe 在 windows 下的配置（scripts\build_win.cmd）

    官网配置文档见:GitHub - BVLC/caffe at windows 1. windows 设置 requirements: visual studio 2013/2015 CMake > ...

  5. Linux体系结构

    linux内核结构: system call interface (SCI层) 为用户空间提供了一套标准的系统调用函数来访问linux内核. process management (PM层) 进程管理 ...

  6. 使用node.js+babel,支持import/export语法

    如果要在node里面支持import/export default语法步骤: 1.使用npm安装 babel的客户端工具 npm init 会生成package.json文件 2.接着安装bebel客 ...

  7. apache+nginx 实现动静分离

    apache+nginx 实现动静分离 http://blog.csdn.net/xysoul/article/details/50347971

  8. Git 经常使用命令

    Git经常使用命令备忘: Git配置 git config --global user.name "storm" git config --global user.email &q ...

  9. codeforces Round 246 D. Prefixes and Suffixes (后缀数组 || KMP)

    题目大意: 求一个子串,子串既是前缀又是后缀. 然后再求出它在整个串中出现的次数. 思路分析: 能够非常easy想到怎样推断一个串既是前缀又是后缀. 仅仅须要它与 sa[0] 的lcp 等于 整个串的 ...

  10. 【u252】泽泽在巴西

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 泽泽帮助了英国某街道尽量减少酸雨的伤害,街道办主任非常感激他,就把他领到一扇门前,告诉他这扇门能通往好 ...