美文网首页
高德地图定位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