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. 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架

    目录 准备工作 搭建项目 vue 中 ts 语法 项目代理及 webpack 性能优化 其他 忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 web ...

  2. 利用etcd实现服务注册和服务发现

    文章目录 服务注册 服务发现 协议编写 服务端实现 客户端实现 实验结果 参考文章 服务注册 主要逻辑在go func函数里面,先是去etcd获取一下服务,没有获取到的话就注册进去. package ...

  3. kubernetes学习笔记（二）——部署服务

    文章目录 (1)创建app (2)创建app的docker镜像 (3)部署app到k8s (4)参考资料 前面一篇文章部署好了minikube环境,这次学习下怎么部署app到kubernetes环境当 ...

  4. BZOJ1014 火星人的prefix

    火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 8 9 10 11 字 ...

  5. 适用于Java开发人员的SOLID设计原则简介

    看看这篇针对Java开发人员的SOLID设计原则简介.抽丝剥茧,细说架构那些事——[优锐课] 当你刚接触软件工程时,这些原理和设计模式不容易理解或习惯.我们都遇到了问题,很难理解SOLID + DP的 ...

  6. 【系列专题】JavaScript 重温系列（22篇全）

    JavaScript 初级篇 [JS]120-重温基础:语法和数据类型 [JS]121-重温基础:流程控制和错误处理 [JS]122-重温基础:循环和迭代 [JS]123-重温基础:函数 [JS]12 ...

  7. visual studio code开发代码片段扩展插件

    背景 visual studio code编辑器强大在于可以自己扩展插件,不仅可以去插件市场下载,也可以按照官方的API很方便的制作适合自己的插件: 自己最近在开发一个手机端网站项目,基于vant项目 ...

  8. 001_Java概述与环境搭建

    Java由来: SUN公司开发,95年推出,96年推出JDK1.0版本 09年被Oracle(甲骨文)收购 詹姆斯·高斯林被称作“Java之父” JavaSE:Java Standard Editoi ...

  9. 每天用Mybatis，但是Mybatis的工作原理你真的知道吗？

    近来想写一个mybatis的分页插件,但是在写插件之前肯定要了解一下mybatis具体的工作原理吧,于是边参考别人的博客,边看源码就开干了. 核心部件: SqlSession Executor Sta ...

  10. 你不知道的JavaScript（上）作用域与闭包

    第一部分 作用域与闭包 第一章 作用域是什么 1.作用域 变量赋值操作会执行两个动作:首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后会在运行时引擎会在作用域中查找该变量,找到就会 ...