qq.maps.MarkerImage 类
构造函数
创建MarkerImage类的语法:
new qq.maps.MarkerImage(url, size, origin, anchor, scaleSize);
参数:
url : {String}
(必填) 图片地址
size : {Size}
(可选) 图标尺寸，该尺寸为显示图标的实际尺寸，不是整个图片的原始尺寸，当需要显示的是整个图片中一部分的时候必须设置该属性。
origin : {Point}
(可选) 切图坐标，该坐标是相对于图片左上角的相对像素坐标，当需要显示的是整个图片中一部分的时候必须设置该属性，默认为（0,0）。
anchor : {Point}
(可选) 锚点坐标，描述经纬度点对应图标中的位置，坐标是相对于图标部分左上角的相对像素坐标，如果设置的origin参数，该坐标就是相对于origin的相对坐标，默认为底部中心点（x/2,y）
scaleSize : {Size}
(可选) 缩放尺寸，用于拉伸或缩小原图片时使用，该尺寸是用来改变整个图片的尺寸。
shadowAngle : {Number}
(可选) 阴影角度，定义阴影与Y轴正半轴的夹角，在动画时阴影会朝设置的方向运动
实例
本示例中，介绍如何自定义标注图片和阴影
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>设置marker为大头针样式</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body,
button,
input,
select,
textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p {
width: 603px;
padding-top: 3px;
margin-top: 10px;
overflow: hidden;
}
.btn {
width: 112px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body onLoad="init()">
<script>
function init() {
var center = new qq.maps.LatLng(39.982163, 116.306070);
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom: 16
});
//设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc_v2/img/nilt.png",
size,
origin,
anchor
);
//设置Marker阴影图片属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
var anchorb = new qq.maps.Point(3, -30),
sizeb = new qq.maps.Size(42, 11),
origin = new qq.maps.Point(0, 0),
iconb = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc_v2/img/nilb.png",
sizeb,
origin,
anchorb
);
var marker = new qq.maps.Marker({
map: map,
position: center
});
marker.setIcon(icon);
marker.setShadow(iconb);
}
</script>
<div style="width:603px;height:300px" id="container"></div>
<p>自定义marker样式,并添加阴影。</p>
</body>
</html>
这篇文章对您解决问题是否有帮助？
已解决
未解决