<!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前端开发资源，请看原文链接：祈澈姑娘
或者联系我的微信，姑娘家家创作不易，走过路过点个赞呗
 

前端调用百度API的更多相关文章

  1. 调用百度API返回经纬度

    后台调用百度API接口生成: import java.io.BufferedReader; import java.io.IOException;import java.io.InputStreamR ...

  2. 调用百度API进行文本纠错

    毕设做的是文本纠错方面,然后今天进组见研究生导师 .老师对我做的东西蛮感兴趣.然后介绍自己现在做的一些项目,其中有个模块需要有用到文本纠错功能. 要求1:有多人同时在线编辑文档,然后文档功能有类似Wo ...

  3. Vue 通过调用百度API获取地理位置-经度纬度省份城市

    一.首先在百度api注册获得ak密钥 二.新建js文件,我命名为loadBMap.js,里面创建script,代码如下: /** * 加载地图 * @param {Function} callback ...

  4. 调用百度API将地名转为经纬度

    最近做一道数据科学竞赛题,特征中有城市名和地名,需要转为经纬度来使用 故用python写了一个地名转经纬度的脚本,调用了百度地图的API,key在百度地图开放平台上申请 申请key的地方:http:/ ...

  5. PHP调用百度api生成短网址&根据短网址恢复长网址

    接口api文档地址:http://dwz.cn/#/apidoc?_k=i9ev5p 代码demo header("Content-type: text/html; charset=utf- ...

  6. 怎样在自己的网页中调用百度API

    https://blog.csdn.net/u010251278/article/details/52877370 以下内容转自上述网站,为了以后的学习方便,为此才特地将该网站内容转到自己的博客,多谢 ...

  7. java程序：调用百度api进行情感分析

    源码: package com.jeson.ceshi; import java.util.HashMap; import org.json.JSONObject; import com.baidu. ...

  8. 调用百度API接口 正解析地址和逆解析

    地址解析(结构化地址 解析得到 经纬度): public void SaveLocation(DataRequest<Location> request, DataResponse< ...

  9. 调用百度api的原理流程

    1.为了实现酒店地址的定位 2.使用可视化便捷的百度地图API生成器:设置公司的地址和地图等级 3.设置地图的滚轮.缩放功能 4.获取代码,拷贝到html页面中 5.申请秘钥,在html中引用地图AP ...

随机推荐

  1. log4j的总结

    概述 log4j是日志处理的框架,相当于.net中的log4net.因为之前在.net中学习过log4net.所以.在学习log4j上,感觉很的亲切.本篇博客主要是讲一个图,好了进入正题. log4j ...

  2. 程序猿必须知道FTP命令

                                             程序猿必须知道FTP命令 文件传输软件的使用格式为:FTP<FTP地址>.若连 接成功.系统将提示用户输入 ...

  3. Event Serializers官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  4. 报错 关于python的x和y不等长

    ValueError: shape mismatch: objects cannot be broadcast to a single shape 这个错误可能是因为传入的两个参数数据长度不一样,比如 ...

  5. .net core 修改网站启动端口

    原文:.net core 修改网站启动端口 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yenange/article/details/81675 ...

  6. 【习题 3-8 UVA - 202】Repeating Decimals

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 余数出现循环节. 就代表出现了循环小数. [代码] #include <bits/stdc++.h> using nam ...

  7. Spring Boot集成EHCache实现缓存机制

    SpringBoot 缓存(EhCache 2.x 篇) SpringBoot 缓存 在 Spring Boot中,通过@EnableCaching注解自动化配置合适的缓存管理器(CacheManag ...

  8. SorceTree 与 Bitbucket连接

    选择bitbucket,由于bitbucket免费的帐号最多能够8个人一起协同开发.我们项目组人数少于8个,私有仓库也不限制. 经过半个多月的应用,大家感觉也还不错,对个人而言.在家也能訪问代码,对公 ...

  9. 3、Unicode\UTF-8\GBK 区别和联系

    字符编码:Unicode和UTF-8之间的关系 可以参考下面blog:https://blog.csdn.net/xiaolei1021/article/details/52093706/ 这篇文章写 ...

  10. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...