百度地图API示例之文本标注
2024-10-16 04:57:46
代码
<!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>
效果
可以进行多个标注
最新文章
- [No0000A2]“原始印欧语”(PIE)听起来是什么样子?
- ORACLE基本知识
- Java 抽象类与oop三大特征
- 【noiOJ】p8208
- jdk、jre、jvm的关系
- SDL_PingGe 1.2
- 自定义cell设置现价,原价(加横线)
- JavaScript是如何工作的: Web推送通知的机制
- css 函数
- swipe使用及竖屏页面滚动方法
- .NET-记一次架构优化实战与方案-底层服务优化
- JQuery operate xml
- Java 递归获取一个路径下的所有文件,文件夹名称
- vue 中使用 axios 请求接口,请求会发送两次问题
- 27-5-LTDC控制LCD显示屏
- JDBC连接自定义sqlserver数据库实例名(多个实例)
- 4.1.4 Nim
- CF1017G The Tree
- crontab 执行脚本,报错/home/scripts/eyeMonitor.sh: line 8: node: command not found
- 品味性能之道<;七>;:索引基础
热门文章
- codeforces 431 D. Random Task 组合数学
- CF534A Exam 构造
- SCREAM:Error suppression ignored for
- dede图片横向滚动
- pycharm 格式化代码
- [复变函数]第11堂课 3.3 Cauchy 积分定理及其推论
- C++ operator 知识点
- yield self和instance_eval用法区别
- 创建一个hibernate helloword
- ElasticSearch的 Query DSL 和 Filter DSL