账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    高德地图轨迹回放的时候 如何显示坐标点对应的信息的窗体？
    75
    0

    <!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=9de92313cbe74b698ad9f8e784cad910"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    </head>
    <body>
    <div id="container"></div>
    <div class="button-group">

    <input type="button" class="button" value="开始动画" id="start"/>
 <input type="button" class="button" value="暂停动画" id="pause"/>
  <input type="button" class="button" value="继续动画" id="resume"/>
<input type="button" class="button" value="停止动画" id="stop"/>

    </div>
    <script>

    var marker, lineArr = [];

var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 17
});
marker = new AMap.Marker({
    map: map,
    position: [116.397428, 39.90923],
    icon: "http://webapi.amap.com/images/car.png",
    offset: new AMap.Pixel(-26, -13),
    autoRotation: true,
});



marker.on("click",function (e){
    console.log(e)
    infoWindow.open( map, marker.getPosition() );   
})

    var infoArr=['1','2','3','4'];

    var infoWindow;
    
    

    infoWindow = new AMap.InfoWindow({
        content: infoArr[0]//使用默认信息窗体框样式，显示信息内容
    });
    


var lngX = 116.397428, latY = 39.90923;        
lineArr.push(new AMap.LngLat(lngX, latY));
for (var i = 1; i < 4; i++) {
    lngX = lngX + Math.random() * 0.05;
    if (i % 2) {
        latY = latY + Math.random() * 0.0001;
    } else {
        latY = latY + Math.random() * 0.06;
    }
    lineArr.push(new AMap.LngLat(lngX, latY));
}




// 绘制轨迹
var polyline = new AMap.Polyline({
    map: map,
    path: lineArr,
    strokeColor: "#00A",  //线颜色
    strokeWeight: 3,      //线宽
});
var passedPolyline = new AMap.Polyline({
    map: map,
    strokeColor: "#F00",  //线颜色
    strokeWeight: 3,      //线宽
});


marker.on('moving',function(e){
    passedPolyline.setPath(e.passedPath);
    infoWindow.open(map, marker.getPosition() );  
})
marker.on('click',function(e){
    
})


map.setFitView();

AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
    marker.moveAlong(lineArr, 500);
}, false);
 AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
    marker.pauseMove();
   }, false);
  AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
    marker.resumeMove();
}, false);
AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
    marker.stopMove();
}, false);

    </script>
    </body>
    </html>

    假如marker在第一个坐标点的范围里 窗体就显示1 到第二个坐标点范围就显示2 以此类推 不知道如何实现呢 求大神帮忙解答谢谢了

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 一芈孑の孤单 普通会员 1楼

      在高德地图轨迹回放的时候，我们可以通过将坐标点显示在窗口体中来显示这些信息。以下是一个简单的步骤：

      1. 首先，我们需要在地图的轨迹回放中创建一个窗体，以便在其中显示坐标点的信息。

      2. 然后，我们需要为每个坐标点创建一个子窗口，该子窗口将显示坐标点的相关信息。这可能包括坐标点的名称、大小、形状、颜色等。

      3. 在地图的轨迹回放中，我们需要为每个坐标点添加一个图层。图层可以显示地图的其他信息，如交通状况、天气预报等。

      4. 接下来，我们需要在子窗口中为每个坐标点添加一个图层。这可能需要使用一些地理编码和地图数据处理技术。

      5. 最后，我们需要将子窗口和图层添加到地图的轨迹回放中。

      需要注意的是，这个过程可能需要一些地图开发和编程知识。如果你对此不熟悉，你可能需要寻求专业的帮助。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部