概述:
参考高德API:点标记
1、分析高德例子
<!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="http://cache.amap.com/lbs/static/main1119.css">
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var infoWindow;
var map = new AMap.Map("container", {
resizeEnable:true,
center:[116.473188,39.993253],
zoom:13
});
//添加点标记,并使用自己的icon
new AMap.Marker({
map: map,
position: map.getCenter(),
icon: new AMap.Icon({
size: new AMap.Size(40, 50), //图标大小
image: "http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
imageOffset: new AMap.Pixel(0, -60)
})
});
</script>
</body>
</html>
效果
主要分为三个部分,1.引入css,js, 2.html标签,3,js代码,1和2部分这里忽略可以参考:点击打开链接
现在把 http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png 下载下来
为了验证判断是否正确可以设置 imageOffset: new AMap.Pixel(0, -120),看是否显示下面有个圈圈
先到boostrap截取图片保存为png格式
修改部分
效果:
可以自己尝试一下