美文网首页
高德地图定位vue应用

高德地图定位vue应用

作者: Rascar | 来源:发表于2020-05-05 16:01 被阅读0次
  <div ref="mapList" style="display:none"></div>
 mounted() {
    this.lonchange(); //获取当前位置
  },
    lonchange() {
      this.mapName = new AMap.Map(this.$refs.mapList, {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
      });
      AMap.plugin("AMap.Geolocation", () => {
        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.mapName.addControl(geolocation);
        geolocation.getCurrentPosition((status, result) => {
          console.log("111s");
          if (status == "complete") {
            //拿去位置
            this.onComplete(result);
            // this.londch(result)
          } else {
            this.onError(result);
          }
        });
      });
    },
    onComplete(data) {
      console.log(data.position);
      let { addressComponent } = data;
      this.weather_get(addressComponent.city); //获取天气情况
      console.log(
        addressComponent.city +
          "," +
          addressComponent.street +
          "," +
          addressComponent.district
      );
      this.position = addressComponent.city + "," +addressComponent.district;
    },
    onError(data) {
      console.log(data);
      this.$message.error("定位失败");
      // document.getElementById('status').innerHTML='定位失败'
      // document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
    },

相关文章

网友评论

      本文标题:高德地图定位vue应用

      本文链接:https://www.haomeiwen.com/subject/rhwmghtx.html