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. luogu P2672 推销员 |贪心

    题目描述 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有N家住户,第ii家住户到入口的距离为Si米.由于同一栋 ...

  2. Vue.js命名风格指南

    前言 本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码.这使得代码具有如下的特性: 统一团队的命名规范,其它开发者或是团队成员更容易上手阅读和理解. IDEs 更容易理解代码,从而提供 ...

  3. ARTS-S docker安装miniconda

    FROM centos:centos7.3.1611 MAINTAINER zhouyang3 <aaa@qq.com> WORKDIR /usr/local ADD ./ /usr/lo ...

  4. rails 5 功能新增及改变

    1.ApplicationRecord 在Rails4中所有的模型都继承自ActiveRecord::Base,不过在Rails5中新引进了一个叫ApplicationRecord的类,存放在: ap ...

  5. Java入门(一)——类、抽象类和接口

    Java是一门面向对象语言,可以看出"对象"在Java有着举足轻重的位置.那么,"对象"从何而来呢?那必须是丈母娘造出来的,下面我们就先来说说这个丈母娘--类. ...

  6. [ASP.NET Core 3框架揭秘] 配置[4]:将配置绑定为对象

    虽然应用程序可以直接利用通过IConfigurationBuilder对象创建的IConfiguration对象来提取配置数据,但是我们更倾向于将其转换成一个POCO对象,以面向对象的方式来使用配置, ...

  7. ReadWriteLock场景应用解析

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  8. springboot搭建项目,实现Java生成随机图片验证码。

    这篇文章主要介绍了如何通过Java如何生成验证码并验证.验证码的作用我想必大家都知道,话不多说开始实施! 首先创建一个springboot项目以下是项目结构,内有utli工具类.存放生成图片验证码方法 ...

  9. Python爬虫实战:爬取腾讯视频的评论

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 易某某 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  10. git版本控制入门--码云

    1.下载git:https://git-scm.com/download   2.安装过程一直点下一步即可.   3.进入刚创建的文件夹     4.在此时登录码云,创建项目.项目名称最好与文件夹名称 ...