百度地图API示例之文本标注
代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
<title>文本标注</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.417854,39.921988);
map.centerAndZoom(point, 15); var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label("姓名:张三 电话:13814823567", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label); var point2 = new BMap.Point(116.121830,39.921940);
var opts2 = {
position : point2, // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30) //设置文本偏移量
}
var label2 = new BMap.Label("姓名:李四 电话:13814823567", opts2); // 创建文本标注对象
label2.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label2);
</script>

效果

可以进行多个标注
百度地图API示例之文本标注的更多相关文章
- 【百度地图API】——如何让标注自动呈现在最佳视野内
原文:[百度地图API]--如何让标注自动呈现在最佳视野内 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道. -------- ...
- 百度地图API显示多个标注点并添加百度样式检索窗口
原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
- 百度地图API显示多个标注点带百度样式信息检索窗口的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...
- 百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...
- 百度地图API示例之移动地图
级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
随机推荐
- POJ 1185 炮兵阵地(状态压缩DP)
题解:nState为状态数,state数组为可能的状态 代码: #include <map> #include <set> #include <list> #inc ...
- 把centos 的mysql 重装一下 把原来的lnmp删除,怎么备份还原数据库
mysqldump --lock-all-tables -u root -p --databases mydb > /opt/database/mydb.sql,或者直接备份mysql的数据存储 ...
- C语言小技巧
/* 求阶乘时设置最大调用层数,防止栈占满 当从函数进入另一个函数时当前函数的内容会入栈,另一个函数调用完时在出栈 */ int factorial(int n, int level) { //pri ...
- 【JavaScript】日期和数字格式化
var date, number; /** * 让日期和时间按照指定的格式显示的方法 * @param date * @param formatString format 格式字符串 * @retur ...
- You need tcl 8.5 or newer in order to run the Redis test
安装Redis时候make test出现的 , 不用下什么tcl8.5再tar了 , 直接yum install tcl就好.
- PHP批量替换MySql数据库中的数据内容(替换MySql数据库内容源码)
PHP批量替换MySql数据库内容 UTF-8 1.0版 <?php //声明 //1.本源码开发意图:作者在使用一些CMS建站的时候发现很多CMS把网址写入到数据库了,如果换网址,那么就需要更 ...
- Python基础05 缩进和选择
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例. ...
- 基于NPOI的Execl导入导出例子
源地址:http://bbs.csdn.net/topics/390830774
- struts (三)
1. <action name="test" class="com.gc.Test"> <result name="success& ...
- hibernate one-to-many many-to-one 双向注解
建表语句: DROP TABLE IF EXISTS `t_company`; CREATE TABLE `t_company` ( `companyId` ) unsigned NOT NULL A ...