上一章讲述了AMap.Marker,这一章使用第二种方式Loca来绘制带图片的点。
经过测试 ,该api 在点击事件上有些问题。如果你的点会有重叠的可能,请谨慎使用该api。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>IconLayer 天气预报</title>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
</script>
<script
language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"
></script>
<!-- 一定要引入 -->
<script
language="javascript"
src="https://webapi.amap.com/loca?v=1.3.2&key=cccc"
></script>
<script>
//设置点的数据 通常都是通过http请求获取,数据的key是任意的,也可以携带其他任意数据,每一个元素就是一个点,
//通过点击事件,可以获取点对应的数组元素对象。借此可以实现点携带额外数据的功能
var districts = [
{
name: "北京市",
center: "116.407394,39.904211",
icon: "https://a.amap.com/Loca/static/manual/weathers/cloudy.png",
},
{
name: "天津市",
center: "116.407394,40",
icon: "https://a.amap.com/Loca/static/manual/weathers/blizard.png",
},
];
// 创建地图实例
var map = new AMap.Map("container", {
showIndoorMap: false,
viewMode: "3D",
center:[116.407394,39.904211],
resizeEnable: true,
showLabel:false
});
//创建layer
var layer = new Loca.IconLayer({
//挂载到地图
map: map,
//开启事件支持,需要点击事件,必须设置为true
eventSupport: true
});
//给layer设置数据
// 第一个参数是点位的对象数组,第二个参数指定第一个参数中的对象中哪个key是坐标数据
layer.setData(districts, {
//设置key 这样就会把districts中的每个元素的center作为点坐标数据
lnglat: "center",
});
//设置点的样式
layer.setOptions({
//用于指定图片的路径、base64URI 或者 Image DOM 对象
source: function (res) {
//res 是 遍历 districts 中的当前元素
var i = res.index;
// return 当前遍历到的点的图片 districts中的icon是图片的url ,当然你可以使用其他方式,总之返回什么 点就显示什么
return res.value.icon;
},
// 设置点的样式
style: {
size: 28,
//透明度
opacity: 0.9,
},
});
layer.on("click", function (ev) {
console.log("点位", ev);
});
// 渲染
layer.render();
</script>
</html>
每一个layer中都可以存放多个点,通过layer可以控制点的显隐 点击事件等。
但是有个bug,layer是通过遍历的方式将点渲染到地图上,也就是说如果点坐标相同,后渲染的点会盖住先渲染的点,但是点击事件的触发,他是通过地图的点击事件获取点击的坐标,通过这个坐标遍历点数组判断是否点击到了layer中的点,但它并不是从数组的尾向头遍历,这就导致触发了先渲染的点的点击事件。从视觉上看点击的是最上面的点,触发的却是最下面的点的点击事件