前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高德地图画线、清除线与改变颜色

高德地图画线、清除线与改变颜色

作者头像
tianyawhl
发布2020-10-28 14:34:26
5.6K0
发布2020-10-28 14:34:26
举报
文章被收录于专栏:前端之攻略前端之攻略

画线-------是通过创建 new AMap.Polyline实例 并添加到地图上 polyline.setMap(this.GDMap);

清除线----画线的同时把画线创建的实例存储起来通过remove方法移除线

改变线的颜色---通过 setOptions重新设置配置项

完整的代码

代码语言:javascript
复制
<el-button @click="drawLine">画折线</el-button>
<el-button @click="changeLineColor">改变颜色</el-button>
<el-button @click="clearAllLine">清除线</el-button>
代码语言:javascript
复制
  data() {
    return {
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
      ],
      v: "1.4.4",
      GDMap: null,
      line:[]
    };
  },
代码语言:javascript
复制
  mounted() {
    loadMap(this.key, this.plugins, this.v)
      .then((AMap) => {
        this.GDMap = new AMap.Map("GDMap", {
          zoom: 10,
          center: [119.947, 31.7728],
        });
        this.GDMap.on("complete", () => {
          // var geolocation = new AMap.Geolocation({
          //   enableHighAccuracy: true, //是否使用高精度定位,默认:true
          //   timeout: 10000, //超过10秒后停止定位,默认:5s
          //   buttonPosition: "RB", //定位按钮的停靠位置
          //   buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
          //   zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
          // });
          // this.GDMap.addControl(geolocation);
          // geolocation.getCurrentPosition(function(status, result) {
          //   if (status == "complete") {
          //     onComplete(result);
          //   } else {
          //     onError(result);
          //   }
          // });

          // //解析定位结果
          // function onComplete(data) {
          //   console.log(data.position);
          // }
        });
      })
      .catch(() => {
        console.log("地图加载失败!");
      });
  },
代码语言:javascript
复制
    clearAllLine(){
      //移除line
      this.GDMap.remove(this.line);
    },
    changeLineColor(){
      this.line[0].setOptions({strokeColor:"#ff8033"})
      // this.GDMap.setFitView();
    },
    drawLine() {
      this.line = [];
      //     var path = [
      //     [116.362209, 39.887487],
      //     [116.422897, 39.878002],
      //     [116.372105, 39.90651],
      //     [116.428945, 39.89663]
      // ];
      var path = [
        [
          [116.362209, 39.887487],
          [116.422897, 39.878002],
        ],
        [
          [116.372105, 39.90651],
          [116.428945, 39.89663],
        ],
      ];
      for (let i = 0; i < path.length; i++) {
        var polyline = new AMap.Polyline({
          path: path[i],
          isOutline: true,
          outlineColor: "#ffeeff",
          borderWeight: 3,
          strokeColor: "#3366FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });

        polyline.setMap(this.GDMap);
        // 缩放地图到合适的视野级别
        this.GDMap.setFitView();
        this.line.push(polyline)
      }

      // var mouseTool = new AMap.MouseTool(this.GDMap);
      // //监听draw事件可获取画好的覆盖物
      // var overlays = [];
      // // map.remove(polyline);
      // // 右键结束画线的时候调用
      // mouseTool.on("draw", function (e) {
      //   overlays.push(e.obj);
      //   console.log(e.obj.getPath())
      // });
      // mouseTool.polyline({
      //   strokeColor: "#80d8ff",
      //   //同Polyline的Option设置
      // });
    },
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档