高德地图开发-- 自定义图标

最新推荐文章于 2024-05-29 16:53:04 发布

往前的

最新推荐文章于 2024-05-29 16:53:04 发布

阅读量9.1k

点赞数 4

分类专栏：高德地区API学习文章标签：高德地图 api marker 自定义图标 icon

本文链接：https://blog.csdn.net/m0_37355951/article/details/77532884

版权

高德地区API学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

概述：

参考高德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格式

修改部分

效果：

可以自己尝试一下

往前的

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
高德地图开发-- 自定义图标

概述：参考高德API：点标记1、分析高德例子自定义图标 var infoWindow; var map = new AMap.Map("container", { resizeEnable:true, center:[116.473188,39.993253], zoom:13 })
复制链接

扫一扫

专栏目录