代码

<!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示例之文本标注的更多相关文章

  1. 【百度地图API】——如何让标注自动呈现在最佳视野内

    原文:[百度地图API]--如何让标注自动呈现在最佳视野内 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道. -------- ...

  2. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  3. 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

    百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...

  4. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  5. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

  8. 百度地图API图标、文本、图例与连线

    百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...

  9. 百度地图API示例之移动地图

    级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

随机推荐

  1. POJ 2342 &&HDU 1520 Anniversary party 树形DP 水题

    一个公司的职员是分级制度的,所有员工刚好是一个树形结构,现在公司要举办一个聚会,邀请部分职员来参加. 要求: 1.为了聚会有趣,若邀请了一个职员,则该职员的直接上级(即父节点)和直接下级(即儿子节点) ...

  2. POJ 2393 贪心 简单题

    有一家生产酸奶的公司,连续n周,每周需要出货numi的单位,已经知道每一周生产单位酸奶的价格ci,并且,酸奶可以提前生产,但是存储费用是一周一单位s费用,问最少的花费. 对于要出货的酸奶,要不这一周生 ...

  3. Android网络通信库Volley简介

    1. 什么是Volley 在这之前,我们在程序中需要和网络通信的时候,大体使用的东西莫过于AsyncTaskLoader,HttpURLConnection,AsyncTask,HTTPClient( ...

  4. eclipse中输入@符号自动提示Annotation

    将Eclipse中Content Assist中的Auto activation for java里.的后面加上@符号即可

  5. linux下修改path变量（转载）

    比如要把/etc/apache/bin目录添加到PATH中 1.#PATH=$PATH:/etc/apache/bin 使用这种方法,每当登出PATH就会恢复 2.#vi /etc/profile 在 ...

  6. 【转】图解Sql2005创建分区表的全过程

    第一.创建分区表的第一步,先创建数据库文件组,但这一步可以省略,因为你可以直接使用PRIMARY文件.但我个人认为,为了方便管理,还是可以先创建几个文件组,这样可以将不同的小表放在不同的文件组里,既便 ...

  7. Bugtags：移动时代首选 Bug 管理系统

    Bug 管理系统之重 回想我们每次开启一个新项目,筹备之初,首要之事就是选择一款 Bug 管理系统.市面上有诸多 Bug 管理系统可供选择:Jira.Redmine.Bugzilla 等.这些系统功能 ...

  8. mysql数据库同步

    mysql数据库同步  1.1. Master 设置步骤 配置 my.cnf 文件 确保主服务器主机上my.cnf文件的[mysqld]部分包括一个log-bin选项.该部分还应有一个server-i ...

  9. SQLSERVER：计算数据库中各个表的数据量和每行记录所占用空间

    转:http://www.cnblogs.com/lyhabc/p/3828496.html CREATE TABLE #tablespaceinfo ( nameinfo ) , rowsinfo ...

  10. 【原】Nginx添加Content-MD5头部压测分析

    如需转载,必须注明原文地址,请尊重作者劳动成果. http://www.cnblogs.com/lyongerr/p/5048464.html 本文介绍了webbenck安装,但是最后使用的是ab工具 ...