实现高德地图实时显示多marker多轨迹功能(APP H5 Web)

fwf_haohaoxuexi

已于 2024-04-17 11:46:55 修改

阅读量2.6k

点赞数 34

分类专栏：实际工作需求处理记录文章标签： ios uni-app 前端安卓 html5

于 2024-04-17 11:12:52 首次发布

本文链接：https://blog.csdn.net/weixin_52048170/article/details/137864220

版权

最近在实际业务中需要实现雷达探测飞行器的功能：在地图上可能会实时出现多个目标物在移动，需求是要实现多个目标物的实时轨迹和目标marker的实现，话不多说直接开始！

1.步骤一：：加载高德地图Key 申请地址：我的应用 | 高德控制台

2.步骤二：初始化地图

//初始化地图

    initAmap() {
      this.map = new AMap.Map("container", {
          resizeEnable: true,

          center: [114.4293, 30.5162],

          zoom: 12

      });

    //覆盖物的圈圈

        var circle = new AMap.Circle({
          map: this.map,

          center: new AMap.LngLat("114.42935", "30.5162"), //圆心位置

          radius: 4500, //半径 单位:米

          strokeColor: "#1a61d3", //线颜色

          strokeOpacity: 1, //线透明度

          strokeWeight: 3, //线粗细度

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