`

【map】使用高德地图显示地图轨迹

javascript 
阅读更多 
<!DOCTYPE HTML>
<html >
<head>
##全屏显示
<style type="text/css">  
html { height: 100%}  
body {height:100%;margin:0px;padding:0px}  
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轨迹回放</title>
<link rel="stylesheet" type="text/css" src="./map.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script language="javascript">
var mapObj;
//初始化地图对象，加载地图
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
		zooms:[7,17],
        //二维地图显示视口
        view: new AMap.View2D({
            center:new AMap.LngLat(116.397428,39.90923),//地图中心点
			
            zoom:13 //地图显示的缩放级别
			
        }),
        continuousZoomEnable:false
    });
    AMap.event.addListener(mapObj,"complete",completeEventHandler);    
}
 
//地图图块加载完毕后执行函数
function completeEventHandler(){ 
    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.397428,39.90923),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
     
	 
	 
	     marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.427907,39.909270),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
	
	    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.432303,39.909320),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
	
	    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.424767,39.961329),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
		    marker = new AMap.Marker({
        map:mapObj,
        //draggable:true, //是否可拖动
        position:new AMap.LngLat(116.444317,39.960287),//基点位置
        
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置
        autoRotation:true
    });
	
	
    var lngX = 116.397428;
    var latY = 39.90923;       
    lineArr = new Array();
    lineArr.push(new AMap.LngLat(lngX,latY));

        lineArr.push(new AMap.LngLat(116.427907,39.909270));
		lineArr.push(new AMap.LngLat(116.432303,39.909320));
		lineArr.push(new AMap.LngLat(116.424767,39.961329));
		lineArr.push(new AMap.LngLat(116.444317,39.960287));

      //绘制轨迹
    var polyline = new AMap.Polyline({
        map:mapObj,
        path:lineArr,
  strokeColor:"#00A",//线颜色
        strokeOpacity:1,//线透明度
        strokeWeight:3,//线宽
        strokeStyle:"solid"//线样式
    });
    mapObj.setFitView();
  }

</script>
<style>
#iCenter{}
</style>
</head>
<body onLoad="mapInit()" width:100%;height:100%;>
    <div class="iCenter" id="iCenter" ></div>
 
</body>
</html>
  • 大小: 30.7 KB
  • 大小: 92.3 KB
  • 大小: 94.5 KB
分享到：
| 【lincese】lincese设计方案
评论
3 楼 aaddsfdsfsdfs 2016-11-04  
var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1,       //线透明度
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
        strokeDasharray: [10, 5] //补充线样式
    });
    polyline.setMap(map);

http://lbs.amap.com/api/javascript-api/example/overlayers/polyline-circle-polygon/
这边有详细的说明(web端的)
2 楼 di1984HIT 2015-12-25  
不好用啊？？？
1 楼 di1984HIT 2015-12-25  
学习了～～～～
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    高德地图轨迹回放+进度条，倍速调整

    在实际应用中，`amap-wx.130.js` 这个文件很可能是高德地图针对微信小程序的特定版本库，包含了地图、轨迹回放等相关功能的封装。开发者需要理解这个库提供的API，例如初始化地图、加载轨迹数据、播放和暂停回放、...

    高德地图轨迹平滑移动改进demo

    高德地图作为中国领先的数字地图提供商，提供了丰富的API和SDK供开发者使用。本项目聚焦于高德地图API的一个特定功能——轨迹平滑移动的改进，旨在帮助开发者更好地理解和实现这一效果。 轨迹平滑移动是指在地图上...

    高德地图-实时导航，路径轨迹显示

    选择起点和终点后点击直接路径导航就会将导航路径及语音播报在地图上显示，由于是实时导航，过在未移动的情况下，移动车辆标记的为显示；代码中对网络及GPS是否连接都做了判断，起点是定位点的位置，终点则自己点击...

    高德地图历史轨迹回放

    3. **轨迹绘制**：使用高德地图的`Polyline`类绘制轨迹线。将轨迹数据的坐标点转化为`PolylineOptions`对象，设置颜色、宽度等样式属性，然后添加到地图上。 4. **时间轴控制**：为了实现回放，需要一个时间轴控件...

    android之基于高德地图的移动轨迹的可视化

    在Android开发中，基于高德地图实现移动轨迹的可视化是一项常用且重要的技术。高德地图API为开发者提供了丰富的功能，包括地图展示、定位、路径规划、轨迹追踪等，使得我们能够在移动应用中轻松地实现地理位置相关...

    高德地图marker沿轨迹移动效果，适用步行、行车、运动等APP

    本示例探讨的是如何利用高德地图API实现Marker在轨迹上的平滑移动效果，这能显著提升用户体验，使应用更加专业和引人入胜。我们将深入讲解这个技术细节，以及如何在Android平台上实现这一效果。 首先，高德地图API...

    高德地图自定义运动轨迹

    总结来说，"高德地图自定义运动轨迹"涉及地图API的使用、轨迹数据处理、地图对象绘制、动画效果以及交互设计等多个方面。开发者需要掌握高德地图提供的工具，同时理解地理定位和GIS的基本概念，才能成功实现这一功能...

    gmap中添加高德地图(标准，卫星，和混合路网地图)

    然后使用高德地图API的`AMap.Map`构造函数创建地图实例，指定div元素ID和地图中心点坐标。 - **加载地图控件**：为了方便用户切换地图类型，可以加载地图控件，如缩放控件、类型选择控件等。使用`AMap.Control`中的...

    前端项目vue3结合高德地图实战，可直接运行

    这个项目不仅展示了如何在Vue3环境中引入和使用高德地图，还涵盖了地图的基本操作，如显示地图、添加和删除标记点。下面我们将详细探讨其中涉及的关键知识点。 1. **Vue3框架**： Vue3是Vue.js的最新版本，提供了...

    winform加载高德地图

    在本文中，我们将深入探讨如何在C# WinForm应用程序中集成和使用高德地图API，以便为初学者提供一个清晰的指南。首先，确保你已安装Visual Studio 2010，因为这是开发环境的基础。 **一、创建WinForm项目** 1. ...

    高德地图将marker用连线连起来

    在高德地图API中，我们可以使用`AMap.Marker`类创建marker，并通过设置`icon`属性来自定义marker的图标。 接下来，我们要探讨如何将这些marker连接起来形成折线。这可以通过创建`AMap.Polyline`对象来实现。`...

    基于高德地图实现可拖拽路径规划

    在高德地图API中，你可以使用`AMap.Marker`创建标记，并通过`icon`属性设置自定义图标。你需要将`poi.png`图片放到合适的位置，并替换`#{您的图片路径}`为实际的图片URL。 此外，项目的压缩包文件`AMap-Plugin`可能...

    高德地图导航源代码

    在这个源代码中，开发者可能使用了高德地图SDK来实现地图的显示、定位用户位置、绘制路线以及导航指引。值得注意的是，Android应用通常需要申请API密钥才能使用高德地图服务，这涉及到安全性和权限管理。 步行、...

    高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以

    高德地图作为一款广泛使用的地图服务，提供了丰富的功能，包括在地图上进行线路绘制。本示例将详细介绍如何利用高德地图API实现单条或多条带有方向指示的线路绘制。 首先，我们需要了解高德地图API的基本概念。高德...

    高德地图amap开发源代码

    在IT行业中，高德地图（Amap）是一个广泛使用的在线地图服务平台，提供了丰富的地图API和SDK，便于开发者集成到自己的应用程序中，实现各种地图相关的功能。这个“高德地图amap开发源代码”是一个用于学习和实践高德...

    高德历史轨迹回放

    高德地图API是一个广泛使用的工具，它为开发者提供了丰富的地图服务，包括位置定位、路线规划、地图展示以及我们今天要讨论的重点——历史轨迹回放。这个功能允许用户查看过去一段时间内他们的移动路径，这对于监控...

    高德地图 添加路线 删除路线 demo

    在IT行业中，地图应用开发是不可或缺的一部分，而高德地图作为国内知名的地图服务提供商，其API和SDK为开发者提供了丰富的功能。在这个“高德地图添加路线 删除路线 demo”项目中，我们将聚焦于如何利用高德地图API...

    高德地图Marker平滑移动

    1. **初始化地图**：首先，你需要在XML布局文件中添加MapView，并在对应的Activity或Fragment中初始化高德地图API，获取Map对象。 2. **创建Marker**：根据需求，你可以创建一个或多个Marker，设置它们的初始位置。...

    百度地图和高德地图Demo

    `AMapApiV2Demo`则是高德地图API V2版本的示例程序，它展示了高德地图API的各种功能，如搜索、地图显示、定位等。高德地图API提供了丰富的地理数据和强大的搜索能力，开发者可以利用它实现地点搜索、反向地理编码...

    高德地图点聚合效果

    本文将详细讲解如何利用高德地图实现点聚合效果，以解决在地图上显示大量数据点时的视觉拥挤问题。 点聚合，也被称为热力图或密度图，是一种将地理位置上的大量点数据进行聚合，用以展示高密度区域的方法。这种技术...

Magicbox
Global site tag (gtag.js) - Google Analytics