百度地图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 ...
随机推荐
- PLSQL_Database Link的基本概念和用法(概念)
2014-06-08 Created By BaoXinjian
- 树莓派通过apt方式安装opencv库
1.安装opencv 开始之前进行必要的更新工作. sudo apt-get update 安装opencv. sudo apt-get install libcv-dev 安 ...
- Cassandra在Windows上安装及使用方法
http://archive.apache.org/dist/cassandra/2.1.2/ http://docs.datastax.com/en/landing_page/doc/landing ...
- oracle查询锁和杀锁
查询锁: SELECT l.session_id sid, s.serial#, l.locked_mode,l.oracle_username, l.os_user_name,s.machine, ...
- [Java] 01 String 内存分析
public class StringTest{ public static void main(String[] args){ String str1 = new String("123& ...
- [ZOJ 1004] Anagrams by Stack (简单搜索)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1004 题目大意:给你个栈,给你源串和目标串,按字典序输出符合要求 ...
- What is the Database Initialization Parameter That is Associated to an ORA-32004 Error ?
APPLIES TO: Oracle Database - Enterprise Edition - Version 9.2.0.1 to 11.2.0.3 [Release 9.2 to 11.2] ...
- Arch-Linux-添加中文字体
代码下载: Arch-Linux-添加中文字体.txt
- js中字符串的截取
当需要从一组数据中移除到符合条件的某一个数据的时候,在这种情况下如何进行截取呢? 基本思路: ①将其通过特定的符号,将一组字符串进行拼接,或者用","或者用"+" ...
- CInternetSession CHttpFile Post提交数据
//给指定url发请求, 返回请求后的结果 string CAutoPatchDlg::SendURLPost(string strServerName, string strFormActionUr ...