本文共 2032 字,大约阅读时间需要 6 分钟。
JavaScript+HTML
设置marker属性* {
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;
}
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
var marker = new qq.maps.Marker({
//设置Marker的位置坐标
position: center,
//设置显示Marker的地图
map: map
});
//设置Marker的可见性,为true时可见,false时不可见,默认属性为true
marker.setVisible(true);
//设置Marker的动画属性为从落下
marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
//设置Marker是否可以被拖拽,为true时可拖拽,false时不可拖拽,默认属性为false
marker.setDraggable(true);
设置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/img/nilt.png",
size,
origin,
anchor
);
marker.setIcon(icon);
//设置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/img/nilb.png",
sizeb,
origin,
anchorb
);
marker.setShadow(iconb);
//设置标注的名称,当鼠标划过Marker时显示
marker.setTitle("测试");
//添加信息窗口
var info = new qq.maps.InfoWindow({
map: map
});
//获取标记的可拖动属性
info.open();
info.setContent('标记的可拖动属性为:' + marker.getDraggable());
info.setPosition(marker.getPosition());
//标记Marker点击事件
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('
info.setPosition(marker.getPosition());
});
//设置Marker停止拖动事件
qq.maps.event.addListener(marker, 'dragend', function() {
info.open();
info.setContent('
//getPosition() 返回Marker的位置
info.setPosition(marker.getPosition());
});
}
Marker可以拖动,点击时弹出单击信息窗口,拖动Marker时弹出拖动信息窗口
转载地址:https://blog.csdn.net/weixin_32646781/article/details/115619010 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!