精华内容
下载资源
问答
  • 毕业设计相关,使用高德JS API绘制轨迹,但是出现了第一条轨迹和第二条轨迹相连的情况。非常的不解,![图片说明](https://img-ask.csdn.net/upload/201903/23/1553273833_246144.png) 后端使用的是flask,数据...
  • 摘要:覆盖物,是一张地图的灵魂。有覆盖物的地图,才是完整的地图。在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了。覆盖物有多种,包括,标注、折线、...

    摘要:覆盖物,是一张地图的灵魂。有覆盖物的地图,才是完整的地图。在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了。覆盖物有多种,包括,标注、折线、多边形、信息窗口、聚合marker、麻点图和图片覆盖物。本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等。最后会提供示例和源代码下载。

    76292613_1.gif

    -------------------------------------------------------------------------------------------------

    一、标注marker

    最常见的覆盖物就是标注(marker),用它可以标示出店铺的位置,你所在的位置,连锁店的分布图等,可以把标注简单理解为1个点。

    在地图上增加一个标注,又称之为在地图上“打点”。打点工具在上一章《控件》中已经详细讲解,控件:http://www.cnblogs.com/milkmap/p/3707711.html 。

    温馨有爱的小贴士:

    标注marker的图片可以是gif图,让marker“动”起来。

    1、添加标注——“可爱的赵灵儿”

    76292613_2.png

    icon是标注的图片地址,想用什么图片,就把图片地址放在这里。

    position是标注的位置,经纬度。

    76292613_3.gif

    //实例化marker

    functionaddMarker(){

    marker=newAMap.Marker({

    icon:"zhao.gif",

    position:new AMap.LngLat(116.405467,39.907761)

    });

    marker.setMap(mapObj);//在地图上添加点

    }

    76292613_3.gif

    2、修改标注——“一秒钟变拓跋玉儿”

    76292613_4.png

    setContent是用于改变文字说明,支持html5;

    setPosition是用于改变标注的位置。

    marker.setContent(markerContent);//更新点标记内容

    marker.setPosition(new AMap.LngLat(116.391467,39.927761)); //更新点标记位置

    3、清除覆盖物

    对于制定marker,可以单独清除每一个覆盖物:

    marker.setMap(null);

    清除地图上全部覆盖物,用:

    mapObj.clearMap();

    二、聚合marker

    1、增加一个marker

    温馨小贴士:

    不如icon的值为空,就会调用高德默认的marker哟,也蛮漂亮的。

    76292613_5.png

    76292613_3.gif

    functionaddMarker2(){

    marker2= newAMap.Marker({

    position:(new AMap.LngLat(116.384182,39.916451)),

    draggable:true, //点标记可拖拽

    cursor:'move' //鼠标悬停点标记时的鼠标样式

    });

    marker2.setMap(mapObj);

    }

    76292613_3.gif

    2、给marker加上动画

    跳动动画

    functionmarker2Cartoon(){

    marker2.setAnimation('AMAP_ANIMATION_BOUNCE'); //设置点标记的动画效果,此处为弹跳效果

    }

    拖拽动画

    拖拽动画需要在marker里面设置。

    76292613_3.gif

    functionaddMarker2(){

    marker2= newAMap.Marker({

    position:(new AMap.LngLat(116.384182,39.916451)),

    draggable:true, //点标记可拖拽

    cursor:'move',

    raiseOnDrag:true //鼠标拖拽点标记时开启点标记离开地图的效果

    });

    marker2.setMap(mapObj);

    }

    76292613_3.gif

    3、聚合marker

    增加一群marker,就是聚合marker

    温馨小贴士:为什么要使用聚合marker?

    当marker大于500的时候,满屏幕都是密密麻麻的marker了,显得杂乱无章。

    而且由于浏览器性能的关系,特别是IE6浏览器,会造成浏览器卡死的情况。

    这个时候,使用麻点图或者聚合marker就可以轻松解决marker数量太多的问题。

    增加一群marker:

    76292613_6.jpg

    76292613_3.gif

    functioniJuhe(){

    mapObj.clearMap();//随机向地图添加500个标注点

    var mapBounds =mapObj.getBounds();var sw =mapBounds.getSouthWest();var ne =mapBounds.getNorthEast();var lngSpan = Math.abs(sw.lng -ne.lng);var latSpan = Math.abs(ne.lat -sw.lat);for (var i = 0; i < 500; i ++) {var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));var marker = newAMap.Marker({

    map:mapObj,

    position:markerPosition,//基点位置

    icon:"js_marker.png", //marker图标,直接传递地址url

    offset:{x:-8,y:-34} //相对于基点的位置

    });

    markers.push(marker);

    }

    }

    76292613_3.gif

    增加marker聚合的功能:

    76292613_7.png

    76292613_3.gif

    functionaddCluster(tag)

    {if(cluster) {

    cluster.setMap(null);

    }if(tag==1) {var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},

    {url:"js_2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},

    {url:"js_3.png",size:new AMap.Size(48,48),offset:new AMap.Pixel(-24,-45), textColor:'#CC0066'}];

    mapObj.plugin(["AMap.MarkerClusterer"],function(){

    cluster= newAMap.MarkerClusterer(mapObj,markers,{styles:sts});

    });

    }else{

    mapObj.plugin(["AMap.MarkerClusterer"],function(){

    cluster= newAMap.MarkerClusterer(mapObj,markers);

    });

    }

    }

    76292613_3.gif

    缩小地图,marker会变得更加集中。

    增加一个延时延时的功能,先添加500的marker,一秒钟后变成聚合marker。

    76292613_8.png

    setTimeout(function(){

    addCluster(0); e

    },1000);

    三、麻点图

    高德云图是实时渲染的,在后台更改数据后,能在前台直观的看到数据展示。

    免去了切图啊,制作瓦片图,对准经纬度等一系列的麻烦。

    76292613_9.png

    点击创建地图

    76292613_10.png

    2、导入数据

    手工导入数据,可视化一站式操作,适合少量点:

    76292613_11.png

    自动导入数据,适合大批量数据:

    温馨小贴士:

    第一行必须是字段名,只能是字母、数字和下划线,并且不能以数字开头。

    经纬度必须分开成2个字段!

    文件只支持 .csv 格式、UTF-8编码,数据量不超过 10,000 条,文件大小不超过10M、字段总数不超过 40 个。

    字段命名规则:以英文字母开头,仅由英文字母、数字、下划线组成,字段名长度不超过20位。

    76292613_12.png

    创建表格数据,可以打开一个记事本,编码改为UFT-8模式。然后导入数据。

    数据格式举例:

    tag,name,lng,lat,tel,content

    免费停车场,免费停车场001,116.430359,39.958175,010-52294832,停过5次没贴条

    免费停车场,免费停车场002,116.279297,40.00132,010-52294832,停过1次没贴条

    免费停车场,免费停车场003,116.202393,39.825413,010-52294832,停过2次没贴条

    免费停车场,免费停车场004,116.564941,39.835959,010-52294832,停过7次没贴条

    免费停车场,免费停车场005,116.437225,39.806426,010-52294832,停过20次没贴条

    76292613_13.png

    数据导入后,就是这样子的。大家点击预览,就可以获取一个url了。

    然后大家可以直接用iframe的形式,把标注好的地图放到自己的网站上。

    云图实时渲染:

    76292613_14.png

    76292613_15.png

    接下来,大家如果要使用云索引,云检索,使用这个教程:

    四、折线,行车记录仪,轨迹回放

    1、折线

    76292613_3.gif

    functionaddLine(){var lineArr=new Array();//创建线覆盖物节点坐标数组

    lineArr.push(new AMap.LngLat("116.368904","39.913423"));

    lineArr.push(new AMap.LngLat("116.382122","39.901176"));

    lineArr.push(new AMap.LngLat("116.387271","39.912501"));

    lineArr.push(new AMap.LngLat("116.398258","39.904600"));

    polyline=newAMap.Polyline({

    path:lineArr,//设置线覆盖物路径

    strokeColor:"#3366FF", //线颜色

    strokeOpacity:1, //线透明度

    strokeWeight:5, //线宽

    strokeStyle:"solid", //线样式

    strokeDasharray:[10,5] //补充线样式

    });

    polyline.setMap(mapObj);

    }

    76292613_3.gif

    76292613_16.png

    2、让轨迹动起来

    marker3.moveAlong(lineArr,80); //开始轨迹回放

    3、让轨迹暂停

    marker3.stopMove(); //暂停轨迹回放

    76292613_17.png

    五、圆形,多边形

    圆形

    76292613_18.png

    76292613_3.gif

    //添加圆覆盖物

    functionaddCircle() {

    circle= newAMap.Circle({

    center:new AMap.LngLat("116.403322","39.920255"),//圆心位置

    radius:10000, //半径

    strokeColor: "#F33", //线颜色

    strokeOpacity: 1, //线透明度

    strokeWeight: 3, //线粗细度

    fillColor: "#ee2200", //填充颜色

    fillOpacity: 0.35//填充透明度

    });

    circle.setMap(mapObj);

    }

    76292613_3.gif

    多边形

    76292613_19.png

    76292613_3.gif

    //添加多边形覆盖物

    functionaddPolygon(){var polygonArr=new Array();//多边形覆盖物节点坐标数组

    polygonArr.push(new AMap.LngLat("116.319809","39.956596"));

    polygonArr.push(new AMap.LngLat("116.556702","39.983434"));

    polygonArr.push(new AMap.LngLat("116.483917","39.845449"));

    polygonArr.push(new AMap.LngLat("116.244278","39.848612"));

    polygon=newAMap.Polygon({

    path:polygonArr,//设置多边形边界路径

    strokeColor:"#0000ff", //线颜色

    strokeOpacity:0.2, //线透明度

    strokeWeight:3, //线宽

    fillColor: "#f5deb3", //填充色

    fillOpacity: 0.35//填充透明度

    });

    polygon.setMap(mapObj);

    }

    76292613_3.gif

    六、信息窗口

    1、默认信息窗口

    76292613_20.png

    76292613_3.gif

    //在指定位置打开默认信息窗体

    functionopenInfo(){//构建信息窗体中显示的内容

    var info =[];

    info.push("

    %5C%22
    ");

    info.push("

    高德软件");

    info.push("电话 : 010-84107000 邮编 : 100102");

    info.push("地址 : 北京市望京阜通东大街方恒国际中心A座16层

    ");

    inforWindow= newAMap.InfoWindow({

    content:info.join("
    ") //使用默认信息窗体框样式,显示信息内容

    });

    inforWindow.open(mapObj,new AMap.LngLat(116.373881,39.907409));

    }

    76292613_3.gif

    2、自定义信息窗口

    76292613_21.png

    76292613_3.gif

    //实例化信息窗体

    var infoWindow2 = newAMap.InfoWindow({

    isCustom:true, //使用自定义窗体

    content:createInfoWindow('方恒假日酒店  价格:318',"effb24504a43b2690b2a65bc425e4d09.png地址:北京市朝阳区阜通东大街6号院3号楼 东北 8.3 公里
    电话:010 64733333详细信息"),

    size:new AMap.Size(300, 0),

    offset:new AMap.Pixel(0, -50)//-113, -140

    });//关闭信息窗体

    functioncloseInfoWindow(){

    mapObj.clearInfoWindow();

    }//构建自定义信息窗体

    functioncreateInfoWindow(title,content){var info = document.createElement("div");

    info.className= "info";//定义顶部标题

    var top = document.createElement("div");

    top.className= "info-top";var titleD = document.createElement("div");

    titleD.innerHTML=title;var closeX = document.createElement("img");

    closeX.src= "close2.gif";

    closeX.οnclick=closeInfoWindow;

    top.appendChild(titleD);

    top.appendChild(closeX);

    info.appendChild(top);//定义中部内容

    var middle = document.createElement("div");

    middle.className= "info-middle";

    middle.innerHTML=content;

    info.appendChild(middle);//定义底部内容

    var bottom = document.createElement("div");

    bottom.className= "info-bottom";var sharp = document.createElement("img");

    sharp.src= "sharp.png";

    bottom.appendChild(sharp);

    info.appendChild(bottom);returninfo;

    }functionmyWindow(){

    infoWindow2.open(mapObj,new AMap.LngLat(116.373881,39.907409));

    }

    76292613_3.gif

    自定义信息窗口,需要CSS样式支持

    76292613_3.gif

    /*定义自定义信息窗体样式*/div.info{position:relative;z-index:100;border:1px solid #BCBCBC;box-shadow:0 0 10px;#B7B6B6;border-radius:8px;background-color:rgba(255,255,255,0.9);transition-duration:0.25s;}div.info:hover{box-shadow:0px 0px 15px #0CF;}div.info-top{position:relative;background:none repeat scroll 0 0 #F9F9F9;border-bottom:1px solid #CCC;border-radius:5px 5px 0 0;}div.info-top div{display:inline-block;color:#333333;font-size:14px;font-weight:bold;line-height:31px;padding:0 10px;}div.info-top img{position:absolute;top:10px;right:10px;transition-duration:0.25s;}div.info-top img:hover{box-shadow:0px 0px 5px #000;}div.info-middle{font-size:12px;padding:10px;line-height:21px;}div.info-bottom{height:0px;width:100%;clear:both;text-align:center;}div.info-bottom img{position:relative;z-index:104;}

    76292613_3.gif

    七、厦门鼓浪屿地图

    大家可以使用图片覆盖物,实现各种园区图,厂区图,校园图,手绘风格地图等。

    在网上找好手绘地图,我找到的是鼓浪屿手绘地图。把它扣空,做成png-24的透明图片。

    然后确定图片的左下角和右上角。把图片贴上去。效果不错。

    76292613_22.gif

    76292613_3.gif

    functionxmMap(){

    mapObj.setZoom(15);var bounds = new AMap.Bounds(new AMap.LngLat(118.055005,24.435624), new AMap.LngLat(118.078351,24.454299)),

    groundImageOpts={

    opacity:1, //图片透明度

    clickable: true,//图片相应鼠标点击事件,默认:false

    map: mapObj //图片叠加的地图对象

    };//实例化一个图片覆盖物对象

    var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);

    mapObj.setCenter(new AMap.LngLat(118.067665,24.443946));

    }

    76292613_3.gif

    八、源代码与示例

    76292613_3.gif

    地图覆盖物
    展开全文
  • 本文章主要介绍 高德定位锁屏黑屏定位不更新的问题。 实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏 广播每2秒发起一起单次定位唤醒。源码如下: package net.tycmc.zuoyedemo; ...

    本文章主要介绍 高德定位锁屏黑屏定位不更新的问题。

    实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏 广播每2秒发起一起单次定位唤醒。源码如下:

    package net.tycmc.zuoyedemo;


    import com.amap.api.location.AMapLocation;
    import com.amap.api.location.AMapLocationListener;


    import android.app.Activity;
    import android.app.AlarmManager;
    import android.app.PendingIntent;
    import android.content.BroadcastReceiver;
    import android.content.Context;
    import android.content.Intent;
    import android.content.IntentFilter;
    import android.os.Bundle;
    import android.os.PowerManager;
    import android.util.Log;
    import net.tycmc.zuoyedemo.MainActivity.LocationReceiver;
    import net.tycmc.zuoyedemo.MainActivity.Mreceiver;


    public class Demo extends Activity implements AMapLocationListener{


    private AlarmManager am;
     private PendingIntent pi;
     private Mreceiver mreceiver;
     private PowerManager.WakeLock wl=null;
     LocationReceiver locationReceiver;;
     @Override
    protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    PowerManager pm=(PowerManager) this.getSystemService(Context.POWER_SERVICE);
    wl=pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK,"mywakrlock");
             wl.setReferenceCounted(false);
            //注册锁屏广播,主要是解决高德在锁屏黑屏情况下定位不更新的问题
             IntentFilter intentfilter=new IntentFilter();
             intentfilter.addAction(Intent.ACTION_SCREEN_ON);
             intentfilter.addAction(Intent.ACTION_SCREEN_OFF);
             intentfilter.addAction(Intent.ACTION_USER_PRESENT);
             mreceiver=new Mreceiver();
    registerReceiver(mreceiver,intentfilter);

    //注册设置定时唤醒定位

    IntentFilter intentFile = new IntentFilter();
       intentFile.addAction("repeating");
       locationReceiver = new LocationReceiver();
       registerReceiver(locationReceiver, intentFile);
       
       //写一个定时的Pendingintent
       Intent intent = new Intent();  
       intent.setAction("repeating"); 
      
       pi = PendingIntent.getBroadcast(this, 0, intent, 0);
      am = (AlarmManager)getSystemService(ALARM_SERVICE);   
    }
     private void wake() {
    // TODO Auto-generated method stub
         //每2秒激活广播,发起一次定位
        // startLocation(true);
         wl.acquire();
         am.setRepeating(0, System.currentTimeMillis(),2000, pi);
    }
     class LocationReceiver extends BroadcastReceiver {
       @Override
       public void onReceive(Context context, Intent intent) {
        Log.d("sunlei","定位重新获取");
    //在这里重新申请定位
       
        //locationClient.startLocation();
       
       }


       }

       public class Mreceiver extends BroadcastReceiver{
    @Override
    public void onReceive(Context context, Intent intent) {
    // TODO Auto-generated method stub
    String action =intent.getAction();
    //开屏
    if(Intent.ACTION_SCREEN_ON.equals(action)){
    Log.d("sunlei","开屏");
    }//锁屏
    else if(intent.ACTION_SCREEN_OFF.equals(action)){
    Log.d("sunlei","锁屏");
    //如果锁屏关闭当前常规定位方法,调用alarm,每2秒发动一次单次定位
    //locationClient.stopLocation();
    wake();


    }//解锁
    else if(intent.ACTION_USER_PRESENT.equals(action)){
    Log.d("sunlei","解锁");
    //am.cancel(pi);
    }
    }

    }
    @Override
    public void onLocationChanged(AMapLocation arg0) {
    // TODO Auto-generated method stub

    }


    }

    权限为:<uses-permission android:name="android.permission.WAKE_LOCK"/>



    在 http://download.csdn.net/detail/a872822645/9495895 中有关于本程序完整源代码。包含点击打开链接

    解决高德地图锁屏黑屏定位不更新,高德地图绘制定位轨迹,高德定位判断定位停留点,高德地图将所有坐标绘制在可视区域内  。直接运行可用。

    PS : 本人创建了 高德Android 开发 QQ技术讨论群,群号:304478210  欢迎大家进入  。互相咨询技术问题,以及代码共享。


    展开全文
  • 高德地图 动态绘制多个路线轨迹

    万次阅读 2018-02-01 15:51:12
    最近在用高德地图API,顺便记录下。 平时我们只是通过如下代码,给path一串经纬度数组, 静态绘制修改路径,但怎么才能通过接收数据(例如Json数据)来动态绘制 多个路径呢? 这里有两种方法。 //设置数据 ...

    最近在用高德地图的API,顺便记录下。

    平时我们只是通过如下代码,给path一串经纬度数组, 静态绘制修改路径,但怎么才能通过接收数据(例如Json数据)来动态绘制 多个路径呢? 这里有两种方法。

    //设置数据
     pathSimplifierIns.setData([{
         name: '路线0',
         path: [
             [116.405289, 39.904987],
             [113.964458, 40.54664],
             [111.47836, 41.135964]
         ]
     }]);

    方法一:

    该方法是官方文档的Dome,
    思路: 用 $.getJSON(‘url’,function(){})函数,在其url中直接输入.json文件(文件里是 setData()可操作数组结构 的数据) 的路径,通过改变文件内容或 url 来动态绘制路径。

    查看官方Dome:点击这里
    查看数据的网址:点击这里
    效果图如下:
    效果图

    但是平时我们传的Json数据 的数据结构都是 setData()函数不可操作的,而且还夹杂了很多其他的不相关参数,所以方法一并不实用。

    方法二:

    这里我们只是将JSON的数据结构转换 为 setData()可操作的数据结构。
    思路:其中str为一串Json数据(就是字符串),首先将 Json字符串 转换为 Json对象,但由于该Json对象的数据结构 与 setData()可操作 数组的数据结构 不一致,所以要转换一下结构;转换结构后 直接将其传给 setData()即可。
    效果图如下:
    这里写图片描述

    源代码如下

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-data.html -->
        <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>简单数据附加</title>
        <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        </style>
    </head>
    
    <body>
        <div id="container"></div>
        <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.3&key=您申请的key值'></script>
        <!-- UI组件库 1.0 -->
        <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
        <script type="text/javascript">
        //创建地图
            var map = new AMap.Map('container', {
                zoom: 4
            });
    
            AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
    
                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas!');
                    return;
                }
    
                var pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    //autoSetFitView:false,
                    map: map, //所属的地图实例
    
                    getPath: function(pathData, pathIndex) {
    
                        return pathData.path;
                    },
                    getHoverTitle: function(pathData, pathIndex, pointIndex) {
    
                        if (pointIndex >= 0) {
                              //point 
                            return pathData.name + ',点:' + pointIndex + '/' + pathData.path.length;
                        }
    
                        return pathData.name + ',点数量' + pathData.path.length;
                    },
                    renderOptions: {
    
                        renderAllPointsIfNumberBelow: 100 //绘制路线节点,如不需要可设置为-1
                    }
                });
    
                window.pathSimplifierIns = pathSimplifierIns;
                /****************************开始: 用Json数据动态绘制多个路径 ****************************/
                 /*封装:Json字符串 转换为 Json对象*/
                var tranObj = function(str){
                    return JSON.parse(str);
                }
    
                /*封装:构造setData()可用数组*/
                var seltArr = function(obj){
                    var arr = []; 
                    for(var i=0;i<obj.length;i++){
                        arr.push({
                                    name:obj[i].name,
                                    path:[[obj[i].flng,obj[i].flat],[obj[i].tlng,obj[i].tlat]]
                                });
                    }
                    return arr;
                }
    
                /*str为Json数据: 
                    flng(出发地经度)、flat(出发地纬度)
                    tlng(目的地经度)、tlat(目的地纬度)
                    name:路径名称
                    missTimes:为其他数据,忽略*/
    
                var str = '[{ "name": "A->B","missTimes": "1", "flng": 116.856275, "flat": 39.874345, "tlng": 116.856245,"tlat": 39.87207},{ "name": "A->B","missTimes": "1", "flng": 116.857275, "flat": 39.876345, "tlng": 116.856345,"tlat": 39.87107},{"name": "C->D","missTimes": "2", "flng": 116.856575, "flat": 39.874345, "tlng": 116.856245,"tlat": 39.87507}]';
    
                /*Json字符串 转换为 Json对象*/
                var obj = tranObj(str); 
    
                /*构造setData()可用数组*/
                var myArr = seltArr(obj); 
    
                /*将可用数组传给 setData()绘制路线*/
                pathSimplifierIns.setData(myArr);
            /****************************  结束 ****************************/
                pathSimplifierIns.on('pointClick', function(e, info) {
    
                    console.log('Click: ' + info.pathData.points[info.pointIndex].name);
                });
                /*开个巡航器*/
                 var navg1 = pathSimplifierIns.createPathNavigator(0, {
                    loop: true, //循环播放
                    speed: 100 //巡航速度,单位千米/小时
                });
    
                navg1.start();
            });
        </script>
    </body>
    
    </html>

    看不懂上面代码的查看官方文档即可,
    PathSimplifier(轨迹展示):点击这里查看 官方相关文档

    展开全文
  • 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1、在index.html里面引入高德地图js文件 2、引入之后我们就直接可以在vue组件里面使用了 创建initMap方法,在mounted钩子函数中调用 ...

    先看最后实现的效果图

    871647-20190515012834240-1837871099.png

    高德地图api文档

    https://lbs.amap.com/api/javascript-api/summary

    使用

    1、在index.html里面引入高德地图js文件

    2、引入之后我们就直接可以在vue组件里面使用了

    创建initMap方法,在mounted钩子函数中调用

    mounted(){
        this.initMap()
      },
    
    initMap(){
          let that = this
          this.map = new AMap.Map('track-map', {
              zoom:11,//级别
              center: [116.397428, 39.90923],//中心点坐标
              resizeEnable: true,
              zoom: 12,
          });
          // 插件
          AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
            that.map.addControl(new AMap.ToolBar())
            that.map.addControl(new AMap.Scale())
          })
          // marker标记
          this.marker = new AMap.Marker({
             position: null
          })
          this.map.add(this.marker);
          // 绘制折线
          this.path = new AMap.Polyline({
            path: null,
            isOutline: false,     //线条是否带描边,默认false
            outlineColor: '#ffeeff',//线条描边颜色,此项仅在isOutline为true时有效,默认:#000000
            borderWeight: 1,    //描边的宽度,默认为1
            strokeColor: "#3366FF", //线条颜色,使用16进制颜色代码赋值。默认值为#006600
            strokeOpacity: 1,   //线条透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
            strokeWeight: 2,    //线条宽度,单位:像素
            // 折线样式还支持 'dashed'
            strokeStyle: "dashed",  //线样式,实线:solid,虚线:dashed
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],//勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效
            lineJoin: 'round',    //折线拐点的绘制样式,默认值为'miter'尖角,其他可选值:'round'圆角、'bevel'斜角
            lineCap: 'round',   //折线两端线帽的绘制样式,默认值为'butt'无头,其他可选值:'round'圆头、'square'方头
            zIndex: 50,       //折线覆盖物的叠加顺序。默认叠加顺序,先添加的线在底层,后添加的线在上层。通过该属性可调整叠加顺序,使级别较高的折线覆盖物在上层显示默认zIndex:50、
          })
          // 将折线添加至地图实例
          this.map.add(this.path);
        },

    上面需要注意的地方是绘制折线和添加marker标记的时候,可以设置position和path的值为空,这样进来的时候就不会在地图上创建一个标记了

    this.marker = new AMap.Marker({
             position: null
          })

    最后在ajax请求接口获取到数据后动态绘制路线轨迹

    if(res.code==2000){
    // 历史路径经纬度集合
                let trackPath = []
                this.list.forEach((item,index) => {
                  trackPath.push(new AMap.LngLat(item.lng,item.lat))
                });
                this.path.setPath(trackPath)
                this.path.show()
    
                // 将最后一条记录添加marker标记
                let lastTrack = new AMap.LngLat(this.list[0].lng,this.list[0].lat)
                this.map.setCenter(lastTrack)
                this.marker.setPosition(lastTrack)
                this.marker.show()
    }

    转载于:https://www.cnblogs.com/fozero/p/10867171.html

    展开全文
  • 先看最后实现的效果图高德地图api文档使用1、在index.html里面引入高德地图js文件2、引入之后我们就直接可以在vue组件里面使用了创建initMap方法,在mounted钩子函数中调用mounted(){this.initMap()},initMap(){let ...
  • 最近几个月跑了不少步,试用了很多不同的APP,导致轨迹、跑量什么的各自为政,因此萌生了写个程序把所有跑步的轨迹都画在一张地图上的想法。第一步,先把各个地方能导出轨迹的都导出来。看了一下.FIT .TPX .GPX中,...
  • 1、将高德地图引入项目 第一步:在index.html文件中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script> <script src="//webapi.a...
  • 【目的】使用高德地图通过手机记录下的GPS坐标点绘制轨迹,这应该是一个很大的需求吧。 【高德apiDemo地址】https://lbs.amap.com/dev/demo/path-smooth#Android 【啰嗦一下】这是我今天从花都区狮岭的客户处回到...
  • js高德地图绘制路线并轨迹纠偏

    千次阅读 2018-07-24 11:24:50
    引入下面三个js文件 &...http://webapi.amap.com/maps?v=1.4.6&amp;key=你所申请的key值"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="...
  • 高德地图API使用效果图

    千次阅读 2015-07-27 15:30:33
    最近项目用到了高德地图,贴几张效果图,用到的代码都可以在高德地图api上找到,详细的接口和方法也可以在参考手册中找到,就看大家如何应用了。其实百度地图也能开发。 1 多边形的绘制和显示: 2 缩小后隐藏文字:...
  • (如下方视频所示)使用场景:可应用到展示车辆行驶轨迹、用户移动轨迹等场景。版本要求:3D地图V4.5.0及以上。效果示例:如何实现点平滑移动相关头文件相关接口MAAnimatedAnnotation.h:(以下内容仅提供OC形式的代码...
  • (如下方视频所示)使用场景:可应用到展示车辆行驶轨迹、用户移动轨迹等场景。版本要求:3D地图V4.5.0及以上。效果示例:如何实现点平滑移动相关头文件相关接口MAAnimatedAnnotation.h:(以下内容仅提供OC形式的代码...
  • 绘制轨迹使用的是高德地图的 轨迹展示 功能 对应demo地址:https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/simple-demo, api地址:...
  • 绘制轨迹使用的是高德地图的 轨迹展示 功能 对应demo地址:https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/simple-demo, api地址:https://lbs.amap.com/api/javascript-api/reference-am...
  • 【概述】高德地图api中有个绘制线的api,绘制出来是单色的,要实现纹理是怎样的? 【高德api地址】https://lbs.amap.com/api/android-sdk/guide/draw-on-map/draw-polyline 【实现】: ①单色线条: aMap....
  • 高德地图常用API.zip

    2020-07-15 09:39:48
    高德地图API 所含资源有:点聚合,自定义图标修改,自定义修改弹窗,图形工具点,线,矩形绘制,车辆轨迹回放动画路线。
  • 工具: 高德地图API 问题: 移动端设备取点后,需要在浏览器做路径回溯和实时监控,现在遇到一种情况,当用户在移动过程中进入了一段无法接受到gps信号或网络信号断开,导致这一段路程无法取到轨迹点,如果用点表示...
  • 之前自己写了一个基于高德在线地图的动态轨迹绘制程序,绘制轨迹函数使用高德API(polyline 函数),在之后的调试过程中发现:随着轨迹绘制的启动,程序占用的内存,越来越高,呈现“暴增状态”,导致界面卡死。...
  • 最近几个月跑了不少步,试用了很多不同的APP,导致轨迹、跑量什么的各自为政,因此萌生了写个程序把所有跑步的轨迹都画在一张地图上的想法。第一步,先把各个地方能导出轨迹的都导出来。看了一下.FIT .TPX .GPX中,...
  • 关于ArcGis API for JavaScript的研究确实让人头大,本来做的项目项目中用的是高德地图api,后来提需求要让换成arcgis的地图着实让人心烦,只是给了一套地图的数据给我这边,开始真是不知道怎么下手,在这提一句要...
  • 接着上一篇文章继续分享一些地图...高德地图实现: 通过aMap.addMarker(markerOptions);可以添加Marker锚点,markerOptions为com.amap.api.maps2d.model.MarkerOptions对象 markerOptions对象的相关方法: posi...
  • App需要展示行程路线,这里用的是高德地图Api 绘制路线: 首先下载了官方提供的 AMap3DDemo ,运行后找到 case 多彩线绘制,仿照它基本上可以实现路线绘制。 绿色位置请忽略。 蓝色的线是绘制轨迹线。 代码如下:...
  • 应公司业务要求,给轨迹回放加个滚动条,一开始我采用的是高德地图的折线绘制,但是如果要加上进度条并不太不合适,拖动滚动条,点位没有恢复的API,后来决定使用巡航轨迹,巡航轨迹支持更丰富的轨迹API,使用起来也...
  • #Vue中使用高德地图实现单人实时轨迹(方式一) 思路:要想实现人员实时效果那么第一种简单的思路就是,点标记的一闪一闪效果,用轮询或者webscoket不断从后台获取坐标数据,清理点标记,在绘制点标记。 如果你还不...
  • 看遍了不少高德地图api内容以及搜索了不少的网上资源,发现可以通过路径规划来记录车辆的行车点位集合,然后通过点位集合复原成一条自定义的路线。因此这里对该内容做下日常的整理记录。 ...
  • 文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册 到官网注册一下就可以了https://lbs.amap.com/并创建应用拿到key值 项目引入 <script type="text/javascript" src=...
  • 快临近开学了,之前一直就想调用百度地图或者高德地图api,进行机器人的GPS在真实卫星的地图上绘制,方便以后的科研和算法交叉验证。通过查阅知乎和提问朋友,暂得两种方法实现GPS轨迹绘制,也在今天调试了一遍...

空空如也

空空如也

1 2
收藏数 32
精华内容 12
关键字:

高德地图api绘制轨迹