<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>腾讯地图添加多marker样式</title>
</head>
<!-- <script charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=XTNBZ-3R7C4-IQJUI-DK7EZ-5ECLV-YDBFF"></script>
-->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=xxxxxxxxxxxxxxxxxxxxxx"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 800px;
height: 800px;
}
</style>
<body>
<div id="container"></div>
<script>
function init() {
var center = new qq.maps.LatLng(39.916527, 116.397128);
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom: 13
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
var latlngs = [
new qq.maps.LatLng(39.91374, 116.37333),
new qq.maps.LatLng(39.91347, 116.39336),
new qq.maps.LatLng(39.90184, 116.41306)
];
//根据图片大小调整 界点
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"http://xxx.xxxxxxxxxx.com/style/image/img31.png",
// size,
// origin,
// anchor
);
for (var i = 0; i < latlngs.length; i++) {
(function (n) {
//实例标注
var marker = new qq.maps.Marker({
position: latlngs[n],
map: map
});
//设置每个标注的样式
marker.setIcon(markerIcon);
//标注点击事件
qq.maps.event.addListener(marker, 'click', function () {
infoWin.open();
infoWin.setContent('<div style="text-align:center;white-space:' +
'nowrap;margin:10px;">这是第 ' +
n + ' 个标注</div>');
infoWin.setPosition(latlngs[n]);
});
})(i);
}
}
init();
</script>
</body>
</html>
