点标记是用来标示某个位置点信息的一种地图要素，本章介绍如何在地图图面使用点标记，分别包括：
1.点标记 Marker
2.灵活点标记 ElasticMarker
3.圆形标记 CircleMarker
4.文本标记 Text
先上源码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>默认点标记</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.amap-icon img,
.amap-marker-content img{
width: 25px;
height: 34px;
}
.marker {
position: absolute;
top: -20px;
right: -118px;
color: #fff;
padding: 4px 10px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25A5F7;
border-radius: 3px;
}
.input-card{
width: 18rem;
z-index: 170;
}
.input-card .btn{
margin-right: .8rem;
}
.input-card .btn:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
<label style="color:grey">点标记操作</label>
<div class="input-item">
<input id="addMarker" type="button" class="btn" onclick="addMarker()" value="添加点标记">
<input id="updateMarker" type="button" class="btn" onclick="updateIcon()" value="更新点标记图标">
</div>
<div class="input-item">
<input id="clearMarker" type="button" class="btn" onclick="clearMarker()" value="删除点标记">
<input id="updateMarker" type="button" class="btn" onclick="updateContent()" value="更新点标记内容">
</div>
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
var marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
// 实例化点标记
function addMarker() {
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [116.406315,39.908775],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
}
function updateIcon() {
marker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png')
}
function updateContent() {
if (!marker) {
return;
}
// 自定义点标记内容
var markerContent = document.createElement("div");
// 点标记中的图标
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
markerContent.appendChild(markerImg);
// 点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "Hi，我被更新啦！";
markerContent.appendChild(markerSpan);
marker.setContent(markerContent); //更新点标记内容
marker.setPosition([116.391467, 39.927761]); //更新点标记位置
}
// 清除 marker
function clearMarker() {
if (marker) {
marker.setMap(null);
marker = null;
}
}
</script>
</body>
</html>这里分析：
创建地图并设置默认坐标：
var marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});添加一个点：静态
function addMarker() {
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [116.406315,39.908775],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
}更新图标：
function updateIcon() {
marker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png')
}更新文本和坐标：
function updateContent() {
if (!marker) {
return;
}
// 自定义点标记内容
var markerContent = document.createElement("div");
// 点标记中的图标
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
markerContent.appendChild(markerImg);
// 点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "Hi，我被更新啦！";
markerContent.appendChild(markerSpan);
marker.setContent(markerContent); //更新点标记内容
marker.setPosition([116.391467, 39.927761]); //更新点标记位置
}清除坐标：
// 清除 marker
function clearMarker() {
if (marker) {
marker.setMap(null);
marker = null;
}
}
下面是自定义图标：为创建的 Marker 指定 Icon 实例。此种方式可以设置图标大小，偏移等属性，比单纯设置 URL 更加灵活。创建方式如下
先上源码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>图标点标记</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html,body,#container{
height:100%;
width:100%;
}
.amap-icon img{
width: 25px;
height: 34px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 13,
center: [116.4,39.92],
resizeEnable: true
});
// 以 icon URL 的形式创建一个途经点
var viaMarker = new AMap.Marker({
position: new AMap.LngLat(116.38,39.92),
// 将一张图片的地址设置为 icon
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30)
});
// 创建一个 Icon
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25, 34),
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(135, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-9, -3)
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({
position: new AMap.LngLat(116.35,39.89),
icon: startIcon,
offset: new AMap.Pixel(-13, -30)
});
// 创建一个 icon
var endIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-95, -3)
});
// 将 icon 传入 marker
var endMarker = new AMap.Marker({
position: new AMap.LngLat(116.45,39.93),
icon: endIcon,
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
map.add([viaMarker, startMarker, endMarker]);
</script>
</body>
</html>
下面分析：
先创建地图：
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 13,
center: [116.4,39.92],
resizeEnable: true
});创建起点坐标：（都是两步，先创建，再传值）
// 创建一个 Icon
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25, 34),
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(135, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-9, -3)
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({
position: new AMap.LngLat(116.35,39.89),
icon: startIcon,
offset: new AMap.Pixel(-13, -30)
});途经点：
// 以 icon URL 的形式创建一个途经点
var viaMarker = new AMap.Marker({
position: new AMap.LngLat(116.38,39.92),
// 将一张图片的地址设置为 icon
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30)
});终点：
// 创建一个 icon
var endIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-95, -3)
});
// 将 icon 传入 marker
var endMarker = new AMap.Marker({
position: new AMap.LngLat(116.45,39.93),
icon: endIcon,
offset: new AMap.Pixel(-13, -30)
});
自定义点标记的锚点位置
如果用户自定义点标记内容，无论是自定义 Icon 还是 自定义内容，都需要为定义的图片重新设置锚点位置。设置方法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>点标记锚点</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html,body,#container{
height:100%;
width:100%;
}
.amap-marker-label{
border: 1px solid #53c4f7;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 13,
center: [116.473195,39.973253],
resizeEnable: true,
mapStyle: 'amap://styles/whitesmoke'
});
var positions = [
[116.493195,39.993253],
[116.473195,39.993253],
[116.453195,39.993253],
[116.493195,39.973253],
[116.473195,39.973253],
[116.453195,39.973253],
[116.493195,39.953253],
[116.473195,39.953253],
[116.453195,39.953253]
];
var anchor = [
'bottom-left',
'bottom-center',
'bottom-right',
'middle-left',
'center',
'middle-right',
'top-left',
'top-center',
'top-right'
]
var pos_icon = [];
var pos_marker = [];
var icon = [];
var marker = [];
for (var i = 0; i < positions.length; i++) {
// 创建一个 Icon
pos_icon[i] = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(12, 12),
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(12, 12),
});
var labelContent = "<div class='labelContent'>anchor:"+anchor[i]+"</div>"
// 将 Icon 传入 marker
pos_marker[i] = new AMap.Marker({
position: positions[i],
icon: pos_icon[i],
anchor: 'center', //设置锚点
offset: new AMap.Pixel(0,0) //设置偏移量
});
map.add(pos_marker[i]);
// 创建一个 Icon
var imageUrl = '//a.amap.com/jsapi_demos/static/demo-center/marker/icon.png'
icon[i] = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(46, 28),
// 图标的取图地址
image: imageUrl,
// 图标所用图片大小
imageSize: new AMap.Size(46, 28),
});
// 将 Icon 传入 marker
var labelOffset = new AMap.Pixel(-23,-28);
marker[i] = new AMap.Marker({
position: positions[i],
icon: icon[i],
anchor: anchor[i], //设置锚点
offset: new AMap.Pixel(0,0), //设置偏移量
label: {
content: labelContent,
offset: labelOffset
}
});
map.add(marker[i]);
}
</script>
</body>
</html>下面分析：
锚点坐标：
var positions = [
[116.493195,39.993253],
[116.473195,39.993253],
[116.453195,39.993253],
[116.493195,39.973253],
[116.473195,39.973253],
[116.453195,39.973253],
[116.493195,39.953253],
[116.473195,39.953253],
[116.453195,39.953253]
];锚点属性：
var anchor = [
'bottom-left',
'bottom-center',
'bottom-right',
'middle-left',
'center',
'middle-right',
'top-left',
'top-center',
'top-right'
]for（）循环：
for (var i = 0; i < positions.length; i++) {
// 创建一个 Icon
pos_icon[i] = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(12, 12),
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(12, 12),
});
var labelContent = "<div class='labelContent'>anchor:"+anchor[i]+"</div>"
// 将 Icon 传入 marker
pos_marker[i] = new AMap.Marker({
position: positions[i],
icon: pos_icon[i],
anchor: 'center', //设置锚点
offset: new AMap.Pixel(0,0) //设置偏移量
});
map.add(pos_marker[i]);
// 创建一个 Icon
var imageUrl = '//a.amap.com/jsapi_demos/static/demo-center/marker/icon.png'
icon[i] = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(46, 28),
// 图标的取图地址
image: imageUrl,
// 图标所用图片大小
imageSize: new AMap.Size(46, 28),
});
// 将 Icon 传入 marker
var labelOffset = new AMap.Pixel(-23,-28);
marker[i] = new AMap.Marker({
position: positions[i],
icon: icon[i],
anchor: anchor[i], //设置锚点
offset: new AMap.Pixel(0,0), //设置偏移量
label: {
content: labelContent,
offset: labelOffset
}
});
map.add(marker[i]);
}
圆形标记 CircleMarker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>CircleMarker</title>
<style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin:0;
}
</style>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/resource/capitals.js'></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值'></script>
</head>
<body>
<div id="map"></div>
<script>
var map = new AMap.Map('map', {
// viewMode: '3D',
zoom: 4,
center: [ 108, 34]
})
for(var i=0;i<capitals.length;i+=1){
var center = capitals[i].center;
var circleMarker = new AMap.CircleMarker({
center:center,
radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
strokeColor:'white',
strokeWeight:2,
strokeOpacity:0.5,
fillColor:'rgba(0,0,255,1)',
fillOpacity:0.5,
zIndex:10,
bubble:true,
cursor:'pointer',
clickable: true
})
circleMarker.setMap(map)
}
</script>
</body>
</html>这里面用for（）直接遍历省会城市个数：
for(var i=0;i<capitals.length;i+=1){
var center = capitals[i].center;
var circleMarker = new AMap.CircleMarker({
center:center,
radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
strokeColor:'white',
strokeWeight:2,
strokeOpacity:0.5,
fillColor:'rgba(0,0,255,1)',
fillOpacity:0.5,
zIndex:10,
bubble:true,
cursor:'pointer',
clickable: true
})
circleMarker.setMap(map)
}
文本标记 Text
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>设置点标注的文本标签</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.amap-icon img {
width: 25px;
height: 34px;
}
.amap-marker-label{
border: 0;
background-color: transparent;
}
.info{
position: relative;
top: 0;
right: 0;
min-width: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
center: [113.667488,34.753181],
zoom: 13
});
var marker = new AMap.Marker({
position: map.getCenter(),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
// 设置鼠标划过点标记显示的文字提示
marker.setTitle('我是marker的title');
// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
marker.setLabel({
offset: new AMap.Pixel(10, 10), //设置文本标注偏移量
content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
direction: '' //设置文本标注方位
});
</script>
</body>
</html>这个是设置坐标：
var map = new AMap.Map('container', {
resizeEnable: true,
center: [113.667488,34.753181],
zoom: 13
});偏移量+文本框内容：
marker.setLabel({
offset: new AMap.Pixel(10, 10), //设置文本标注偏移量
content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
direction: '' //设置文本标注方位
});下面是添加多个点：
用for（）方法和数组来添加多个点
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>添加多个点</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.amap-icon img {
width: 25px;
height: 34px;
}
</style>
</head>
<body>
<div id="container"></div>
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
var markers = [];
var positions = [[116.405467, 39.907761], [116.415467, 39.907761], [116.415467, 39.917761], [116.425467,
39.907761], [116.385467, 39.907761]];
for (var i = 0, marker; i < positions.length; i++) {
marker = new AMap.Marker({
map: map,
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (i + 1) + '.png',
position: positions[i]
});
markers.push(marker);
}
</script>
</body>
</html>
绘制圆的教程还没有看：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
