高德地图API以案例学习2——点标记Marker

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

chenjing928

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

阅读量3k

点赞数

分类专栏：地图API

本文链接：https://blog.csdn.net/chenjing928/article/details/80272690

版权

地图API 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

上一篇介绍完了高德地图的基本显示，这篇主要介绍点标记

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 src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				center : [116.397428, 39.90923],
			})
			
			var marker = new AMap.Marker({
				map:map,   // 显示在地图上
				position:[116.397428, 39.90923], //  设置点的位置,如果缺失此属性，将以地图中心点作为标记点
//				offset : new AMap.Pixel(-12,-12),  // 偏移值 如果不设置默认偏移值为 -10,-34 ，如果为0,0则是为左上角对准所设置的点
//				topWhenClick : true, // 鼠标点击将置顶 （如被其他覆盖物遮挡时，可以设置此属性点击置顶该标记）
//				topWhenMouseOver:true,//鼠标经过置顶
//				icon : 'http://vdata.amap.com/icons/b18/1/2.png', //点标记显示内容（以什么图片替代标记），也可以是本地图片
//				content:"aa", //点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖
				draggable : true, //标记可拖动
//				raiseOnDrag:true, //设置拖拽点标记时是否开启点标记离开地图的效果(就是当拖拽时，标记会悬浮起来，以免遮挡住你要放的位置)
//				cursor : "cur",  //鼠标悬停在标记上 变个样式，
//				visible:false, //点标记是否可见，设置为false隐藏
//				zIndex:99,  //设置标记的叠加顺序，值越高的越在上面，默认为100，当然这个设置只是初始设置，如果也设置了topWhenClick，点击的时候还是会跑到顶上的，并不影响
//				title : "鼠标悬停时显示", // 鼠标悬停在标记上显示内容
//				bubble :true, //设置为true，事件可以穿透到地图，简单示例：双击标记后地图放大

			});
			//如果你想再来一个标记，则再创建一个即可
			/*var marker2 = new AMap.Marker({
				map:map,   // 显示在地图上
				position:[116.368528, 39.90923], //  设置点的位置,如果缺失此属性，将以地图中心点作为标记点
//				offset : new AMap.Pixel(-12,-12)  // 偏移值 如果不设置默认偏移值为 -10,-34 ，如果为0,0则是为左上角对准所设置的点
			});*/
			
		</script>
	</body>
</html>

2.轨迹回放简单版

<!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 src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    
</head>
<body>
<div id="container"></div>
	<script type="text/javascript">
		var map = new AMap.Map("container",{
			resizeEnable:true,
			center: [116.397428, 39.90923],
			zoom:17
		});
		
		var marker = new AMap.Marker({
			map:map,
			position:[116.397428, 39.90923],
			autoRotation:true,//设置为true，在标记进行轨迹回放动画时，如果改变了方向，那么标记将自动调整角度
			offset: new AMap.Pixel(-26, -13),//偏移
			icon: "http://webapi.amap.com/images/car.png"//把标注点换成一辆小汽车
		});
		//设置轨迹
		var rotationLine = [];
		rotationLine.push([116.397428, 39.90923]);
		rotationLine.push([116.697428, 39.93923]);
		rotationLine.push([116.777428, 39.98923]);
	// 绘制轨迹    Polyline是绘制线   
    var polyline = new AMap.Polyline({
        map: map,
        path: rotationLine,  //设置线的经纬点集合,会以数组中的从第0个到最后个 经纬点连起来
        strokeColor: "#00A",  //线颜色
        strokeWeight: 3,      //线宽
    });

		//设置地图自适应可见范围
    	map.setFitView();
    	//轨迹回放 动画播放
        marker.moveAlong(rotationLine, 5000);
	</script>
	</body>
</html>

chenjing928

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
高德地图API以案例学习2——点标记Marker

上一篇介绍完了高德地图的基本显示，这篇主要介绍点标记1.点标记(属性)&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &a
复制链接

扫一扫