<!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. android屏幕适配方案

    曾经看了android的屏幕适配方案,有非常多种.当中自己用到的一种是:先找一款主流的分辨率的android机,如:1080*1920的分辨率做基准,然后在这个基准上.调整好一切布局.图片.适配其它手 ...

  2. 自己在linux上编译、链接、动态库和静态库的学习笔记

    在平常的项目中,我们都是使用公司要求的makefile.makedebug一类的文件,因此,在编译.链接.生成和链接动态库与静态库的时候,我们只是简单的使用一些已经设置的变量,只是简单的修改.添加一些 ...

  3. 【原创】面向对象版本地CPU资源占用监控脚本

    前期准备: 1.python2.7环境 2.相关第三方库下载安装 脚本工作过程: 1.根据输入的进程名判断进程是否存在,如果不存在则进行等待,直到检测到进程PID,中途进程退出抛出异常,键入enter ...

  4. Altium Designer如何设置pcb尺寸

  5. css使文本保留多个空格

    css属性: white-space: pre-wrap

  6. python输出杨辉三角

    使用python列表,展示杨辉三角 # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan yanghui = [] fo ...

  7. GO语言学习（十）Go 语言条件语句

    Go 语言提供了以下几种条件判断语句: 语句 描述 if 语句 if 语句 由一个布尔表达式后紧跟一个或多个语句组成. if...else 语句 if 语句 后可以使用可选的 else 语句, els ...

  8. 低成本开始互联网创业：探讨域名、服务器、CDN、邮箱等节流之道

    互联网创业一直是个热门话题,对这个问题我也有不断的思考. 今天,探讨下如何低成本开始互联网创业. 背景 愿意冒险去创业的同志,大多是"屌丝"而非"高富帅",大多 ...

  9. linux下设置密码复杂度限制，怎么设置？

    在linux,设置密码复杂度的方法有几个1. 一个是在/etc/login.defs文件,里面几个选项PASS_MAX_DAYS 90 #密码最长过期天数PASS_MIN_DAYS 80 #密码最小过 ...

  10. Unity自带网络功能——NetworkView组件、Serialize、RPC

    Unity拥有大量的第三方插件,专门提供了对网络功能的支持.可是,大部分开发人员第一次接触到的还是Unity自带的网络功能,也就是大家常常说到的Unity Networking API.这些API是借 ...