<!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. teamviewer连接不上的原因及解决方法有哪些

    teamviewer连接不上的原因及解决方法有哪些 一.总结 一句话总结:这里说的就是版本问题,高版本可以连接低版本,低版本无法连接高版本. 1.TeamViewer官方检测使用环境是否为商用的标准是 ...

  2. ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第六篇:拦截器

    摘要      本文将对“MVC公告发布系统”的发布公告功能添加日志功能和异常处理功能,借此来讨论ASP.NET MVC中拦截器的使用方法. 一个小难题      我们继续完善“MVC公告发布系统”, ...

  3. ospp.vbs是什么文件?激活过程cscript ospp.vbs命令详解

    ospp.vbs是什么文件?激活过程cscript ospp.vbs命令详解 在Office 2013激活过程中我们经常会用到cscript ospp.vbs这个命令.那么,很有必要来了解一下,osp ...

  4. 跨域请求发送不了cookie问题: AJAX跨域请求JS配置和服务器端配置

    1.ajax是同步方式 $.ajax({ type: "post", url:url, async:false, data:datatosend, dataType:"j ...

  5. 【习题 6-8 UVA - 806】Spatial Structures

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写两个dfs模拟就好. 注意每12个数字输出一个换行.. [代码] /* 1.Shoud it use long long ? 2. ...

  6. 【Codeforces Round #447 (Div. 2) C】Marco and GCD Sequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把gcd(a[1..n])放在输入的n个数之间. [代码] /* 1.Shoud it use long long ? 2.Have ...

  7. 洛谷 P2118 比例简化

    P2118 比例简化 题目描述 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有1498 人,反对的有 902人,那么赞同与反对的比例可以简单的记为149 ...

  8. POJ 1325 Machine Schedule(zoj 1364) 最小覆盖数

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=364 http://poj.org/problem?id=1325 题目大意: ...

  9. CentOS下利用Docker部署Surging

    原文:CentOS下利用Docker部署Surging 1. 安装Centos, 配置固定ip配置文件地址vi /etc/sysconfig/network-scripts/ifcfg-ens33`` ...

  10. Swift语言之View,Button控件实现小方块在界面上的移动(纯代码实现)

    import UIKit class ViewController: UIViewController { var diamonds:UIView! var diamondsXY = CGRectMa ...