今天做项目的时候需要涉及到高德标志点的自定义
// 创建 AMap.Icon 实例:
var icon = new AMap.Icon({
size: new AMap.Size(40, 50), // 图标尺寸
image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png', // Icon的图像
imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
var marker = new AMap.Marker({
position: new AMap.LngLat(116.405467, 39.907761),
offset: new AMap.Pixel(-10, -10),
icon: icon, // 添加 Icon 实例
title: '北京',
zoom: 13
});
map.add(marker);
踩坑的地方
我将上面的代码cv进项目后发现图片根本没有显示出来,出现了 这种破图的样式。
解决方案
image: require("图片地址")
使用require去引入本地的图片。
踩坑二的地方
明明有将图片引入也将marker加到地图上了,却还是不能在地图上看到自定义的点
解决方案
imageSize:
size:
imageOffset:
这里的高德提供的icon创建属性,需要与自身实际情况修改。直接从高德哪里搬过来,它的偏移量是超过了我自身图片的,所以出现了图片看不见的情况。我就是这里出错了。