上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
最新日志:
不错呦！smile@林凯西，确保“准备文件”中的几个文件都有安装，S...您好，看了您这篇帖子觉得很有帮助。但是有个问题想请...我的修改过了怎么还被恶意注册呢 @jjjjiiii 用PJ快9年了，主要是A...PJ3啊，貌似很少有人用PJ了，现在不是WP就是z...@332347365，我当时接入时错误码没有-10...楼主，ChkValue值应为-103是什么意思呢？...大哥 你最近能看到我发的信息，请跟我联系，我有个制...
百度地图标注添加数字序号示例(Javascript API)
编辑:dnawo 日期:2021-03-29
给标注(Marker)添加数字序号会使地图更直观，我想到了两种方法可以给百度地图标注添加数字，代码分享出来，大家可自行选择。
使用带数字的图标替换标注默认图标
在标注上添加文本标注Label
完整示例
使用带数字的图标替换标注默认图标
复制内容到剪贴板
程序代码
程序代码var icon = new BMap.Icon("/img/02.png", new BMap.Size(50, 44));
var marker = new BMap.Marker(map.getCenter(), {icon:icon});
map.addOverlay(marker);
var marker = new BMap.Marker(map.getCenter(), {icon:icon});
map.addOverlay(marker);
在标注上添加文本标注Label
复制内容到剪贴板 程序代码
程序代码//创建并返回带数字的Marker
var createMarker = function(point, content){
var marker = new BMap.Marker(point);
var label = new BMap.Label(content,{offset:new BMap.Size(((content+"").length==1)?5:0,3)});
label.setStyle({background:'none', color:'#fff', border:'none'});
marker.setLabel(label);
return marker;
}
map.addOverlay(createMarker(map.getCenter(), 2));
var createMarker = function(point, content){
var marker = new BMap.Marker(point);
var label = new BMap.Label(content,{offset:new BMap.Size(((content+"").length==1)?5:0,3)});
label.setStyle({background:'none', color:'#fff', border:'none'});
marker.setLabel(label);
return marker;
}
map.addOverlay(createMarker(map.getCenter(), 2));
完整示例
复制内容到剪贴板 程序代码
程序代码<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//创建并返回带数字的Marker
var createMarker = function(point, content){
var marker = new BMap.Marker(point);
var label = new BMap.Label(content,{offset:new BMap.Size(((content+"").length==1)?5:0,3)});
label.setStyle({background:'none', color:'#fff', border:'none'});
marker.setLabel(label);
return marker;
}
var map = new BMap.Map("container");
var point = new BMap.Point(120.124469,30.26139);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
//在地图上添加Marker
for(var i=1;i<=15;i++){
var point = new BMap.Point(map.getCenter().lng+0.001*i, map.getCenter().lat);
map.addOverlay(createMarker(point, i));
}
</script>
</body>
</html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//创建并返回带数字的Marker
var createMarker = function(point, content){
var marker = new BMap.Marker(point);
var label = new BMap.Label(content,{offset:new BMap.Size(((content+"").length==1)?5:0,3)});
label.setStyle({background:'none', color:'#fff', border:'none'});
marker.setLabel(label);
return marker;
}
var map = new BMap.Map("container");
var point = new BMap.Point(120.124469,30.26139);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
//在地图上添加Marker
for(var i=1;i<=15;i++){
var point = new BMap.Point(map.getCenter().lng+0.001*i, map.getCenter().lat);
map.addOverlay(createMarker(point, i));
}
</script>
</body>
</html>
评论: 0 | 引用: 0 | 查看次数: 5498
发表评论
请登录后再发表评论！
