<!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. [Javascirpt AST] Babel Plugin -- create new CallExpression

    The code we want to trasform: 2 ** 3; a ** b; a **b * c; a ** b ** c; (a+1) ** (b+1); transform to: ...

  2. [UWP]为什么ContentControl的ContentTemplate里放两个ContentPresenter会出问题(绕口)

    原文:[UWP]为什么ContentControl的ContentTemplate里放两个ContentPresenter会出问题(绕口) 1. 简单的HeaderedContentControl 上 ...

  3. FansMail：邮件发送标准API与技术实现(Java)

    发送邮件,是Web系统等IT建设中最常见的一种功能. 我对最常见的一种需求进行了抽象和封装,定义了一套标准的API,并且使用Java技术实现. 项目信息 项目名称:FansMail 项目作者:LeiW ...

  4. MyCat中间件：读写分离（转）

    利用MyCat中间件实现读写分离 需要两步: 1.搭建MySQL主从复制环境 2.配置MyCat读写分离策略 一.搭建MySQL主从环境 参考上一篇博文:MySQL系列之七:主从复制 二.配置MyCa ...

  5. 深度学习利器： TensorFlow系统架构及高性能程序设计

    2015年11月9日谷歌开源了人工智能平台TensorFlow,同时成为2015年最受关注的开源项目之一.经历了从v0.1到v0.12的12个版本迭代后,谷歌于2017年2月15日发布了TensorF ...

  6. Costura.Fody

    使用Costura.Fody将源DLL合并到目标EXE 本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 一.本文主要是使用Costura.Fody工具将源DLL合并到目标EX ...

  7. 如何在anaconda中切换python2

    如果你不切换可能是默认的python3环境. 下面是在python27版本下下载qt5

  8. PythonAdvanced

    PythonAdvanced function 函数 (要多使用函数,方便,少变量,好改错) 函数是可以重复执行的语句块,可以重复使用 作用: 1.用于封装语句块,提高代码的重用性 2.定义用户级别的 ...

  9. python分解质因数

    将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wa ...

  10. 【例题 6-15 UVA - 10129】Play on Words

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 拓扑大水题 [代码] #include <bits/stdc++.h> using namespace std; con ...