<!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>
<style>
html,body,#container{
height:100%;
width:100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您自己的key"></script>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
zoom: 13,
center: [116.4,39.92],
resizeEnable: true
});
var startIcon = new AMap.Icon({
// 圖標尺寸
size: new AMap.Size(25, 25),
// 圖標的取圖地址
image: 'tu.png', // 您自己的圖標
// 圖標所用圖片大小
imageSize: new AMap.Size(25, 25),
});
var capitals = [{
center: [116.42,39.93123],
name: 1,
}, {
center: [116.41,39.92132],
name: 2
}, {
center: [116.40,39.91122],
name: 3
}];
var facilities = [];
for (var i = 0; i < capitals.length; i++) {
console.log(capitals[i].center[0])
var marker = new AMap.Marker({
position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
offset: new AMap.Pixel(-10, -10),
icon: startIcon,
title: capitals[i].name
});
facilities.push(marker);
}
map.add(facilities);
</script>
</body>
</html>
效果圖：
