1、首先要有密钥AK ，可以自己注册获取或复制别人的 。搜索百度地图API （http://lbsyun.baidu.com/apiconsole/key）

2、地图示例

<head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=weuMwIVhzBCjZgGaPA5SVOQV"></script> //这里是引入，ak=您的密钥

　　　　<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"></script> //如果是https的网站，后面要加&s=1 

    </head>

        <style>

            *{margin:0;padding:0;}

            #container{

                margin:50px auto;

                width:800px;height:600px;

                border:2px solid #F65F57;

            }

        </style>

    <body>

        <div id="container"></div>  //显示地图的div

        <script type="text/javascript">

            var map= new BMap.Map('container'); // 创建地图实例

            var point= new BMap.Point(114.059627,22.627415); // 创建点坐标

            map.centerAndZoom(point,16);    // 初始化地图，设置中心点坐标和地图缩放级别

            map.addControl(new BMap.NavigationControl());  //添加平移缩放控件，左上方位置

            map.addControl(new BMap.ScaleControl());//添加比例尺控件，左下方位置

            map.addControl(new BMap.MapTypeControl());//地图类型控件，右上方位置

            map.addControl(new BMap.OverviewMapControl());

            var marker = new BMap.Marker(point); // 创建标注

            map.addOverlay(marker);   // 将标注添加到地图中

            msg = {

                   width : 300,     // 信息窗口宽度

                   height: 50,     // 信息窗口高度

                   title : "公司简介" , // 信息窗口标题

                   offset:new BMap.Size(8,-12) //调位置，相当于css相对定位relative

            }    

            // 创建信息窗口对象  ，写文字内容

            var infoWindow = new BMap.InfoWindow("<p>hello world!</p> <div style='color:red;'>客服电话：123456</div>", msg);

            map.openInfoWindow(infoWindow, map.getCenter());      // 页面显示信息窗口

        </script>

    </body>

如图：

引原文：https://www.cnblogs.com/luhailin/p/6639943.html

页面中加入地图map的更多相关文章

  1. 如何添加地图控件到Windows Phone 8的页面中

    原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...

  2. 百度地图api在Html中显示，在jsp页面中不显示解决方法

    在jsp页面中显示如下 但是在html中正常显示. 原来的代码如下: <script type="text/javascript" src="http://api. ...

  3. 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

  4. 润乾报表一个页面中的echarts地图与其他区块的联动

    需求概述: DBD样式效果如下图所示,需要点击左侧地图中的地区,右侧的仪表盘,柱线图可以对应显示对应该地区的数据. 实现思路: 分别制作带有地图.仪表盘.柱线图的3张报表:将3张报表放到DBD中设置布 ...

  5. jsp页面中jstl标签详解

    JSLT标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可以随手就可以写出来.这算是Java程序员的基本功吧,一定要扎实. JSTL ...

  6. JSF页面中使用js函数回调后台bean方法并获取返回值的方法

    由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的, ...

  7. ArcGIS for Flex中引入google map作底图

    上篇文章到在ArcGIS View中引入google map,这里讲ArcGIS for Flex中引入google map作底图. 同样道理,以google map作底图,需要编写继承自TiledM ...

  8. 【转】jsp页面中jstl标签详解

    原文地址: JSLT标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可以随手就可以写出来.这算是Java程序员的基本功吧,一定要扎实 ...

  9. Python抓取页面中超链接(URL)的三中方法比较(HTMLParser、pyquery、正则表达式) <转>

    Python抓取页面中超链接(URL)的3中方法比较(HTMLParser.pyquery.正则表达式) HTMLParser版: #!/usr/bin/python # -*- coding: UT ...

随机推荐

  1. Pandas学习（一）——数据的导入

    欢迎加入python学习交流群 667279387 学习笔记汇总 Pandas学习(一)–数据的导入 pandas学习(二)–双色球数据分析 pandas学习(三)–NAB球员薪资分析 pandas学 ...

  2. Java修炼——文件夹的复制

    文件夹的复制用到了俩个流:缓冲流和文件字节流 缓冲流用来加快写入和读取速度. 在这里我简述一下复制文件夹的过程,当然复制文件夹都可以,复制文件更是不在话下 1.首先要明确俩点.要复制的文件夹的位置(源 ...

  3. ThreadLocal的进化——InheritableThreadLocal

    之前有介绍过 ThreadLocal,JDK 后来针对此做了一个升级版本 InheritableThreadLocal,今天就来好好介绍下. 为什么要升级 首先我们来想想,为什么要升级?这就要说起 T ...

  4. HDU1561 The more ,The better （树形背包Dp）

    ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允许攻克M个城堡并获得里面的宝物.但由于地理位置原因,有些城堡不能直接攻克,要攻克这些城堡必须先 ...

  5. web性能优化指南

    前端性能优化,是每个前端必备的技能,优化自己的代码,使自己的网址可以更加快速的访问打开,减少用户等待,今天就会从几个方面说起前端性能优化的方案, 看下面的一张图,经常会被面试官问,从输入URL到页面加 ...

  6. synchronized和volatile区别

    不同一: synchronized可以修饰方法, volatile只能修饰变量 不同二: synchronized是同步的 volatile修饰的变量具有可见性.

  7. 新安装mariadb远程登陆配置及相关问题排查

    前言: 安装过程不再赘述,直接说问题,mysql的远程连接需要解决两个问题:1.允许root用户远程连接.2.允许任意ip远程连接数据库.当然,在测试和解决问题之前,得首先保证你的数据库与远程主机之间 ...

  8. 酷狗音乐API接口大全（40+个）

    歌单分类部分 获取精选专区所有分类 http://mobilecdnbj.kugou.com/api/v3/tag/list?pid=0&apiver=2&plat=0 获取热门推荐分 ...

  9. android开发检测用户是否使用了虚拟定位

    在应用开发中,如果有签到打卡之类的功能,你是否会遇到检测用户是否使用了虚拟定位软件来进行打卡?如果有,那么请仔细阅读这篇文章.该文章会带你认识什么是虚拟定位.什么是应用分身,以及如何通过代码来检测用户 ...

  10. var和let部分浅析

    ES6中新增了let命令,用于声明变量,但所声明的变量只在let命令的代码块内有效. 举个例子: var a = []; for(var i=0;i<10;i++){ a[i] = functi ...