mini-check/dist/h5/components/Map/H5MapContent/index.js

import Nerv from "nervjs";
import Taro, { showToast as _showToast, showLoading as _showLoading, request as _request, hideLoading as _hideLoading } from "@tarojs/taro-h5";
import { View } from '@tarojs/components';
import './index.scss';
export default class Index extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      map: null,
      markersArray: [],
      addressRes: {
        location: [],
        address: ''
      }
    };
  }
  componentWillMount() {}
  componentDidMount() {
    const { value } = this.props;
    if (value && value.location.length) {
      this.setState({
        addressRes: value
      });
      this.buildMap(value.location[1], value.location[0]);
    } else {
      this.getLocation().then(res => {
        if (res) {
          this.buildMap(res[0], res[1]);
        } else {
          this.buildMap();
        }
      });
    }
  }
  render() {
    const { addressRes } = this.state;
    return <View className="h5-map-container">
        <View className="h5-map-view-container">
          <View className="back-wrap" onClick={this.onCancelHandler}>
            <button className="back">返回</button>
          </View>
          <View className="button-wrap" onClick={this.handleClick}>
            <button className="button">确定</button>
          </View>
        </View>
        {addressRes.address && <View className="h5-address">
          {addressRes.address}
        </View>}
        <View className="h5-map" id="container">
        </View>
      </View>;
  }
  getLocation = () => {
    return new Promise((resolve, reject) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
          const { latitude, longitude } = position.coords;
          console.log('position', position);
          resolve([latitude, longitude]);
        }, error => {
          _showToast({
            title: '获取位置出错，请检查定位权限设置',
            icon: 'none'
          });
          switch (error.code) {
            case error.PERMISSION_DENIED:
              console.log('定位失败,用户拒绝请求地理定位');
              break;
            case error.POSITION_UNAVAILABLE:
              console.log('定位失败,位置信息是不可用');
              break;
            case error.TIMEOUT:
              console.log('定位失败,请求获取用户位置超时');
              break;
            case error.UNKNOWN_ERROR:
              console.log('定位失败,定位系统失效');
              break;
          }
          reject();
        });
      } else {
        _showToast({
          title: '获取位置出错，请检查定位权限设置',
          icon: 'none'
        });
        reject();
      }
    });
  };
  buildMap = (latitude = 39.916527, longitude = 116.397128) => {
    const { qq } = window;
    const center = new qq.maps.LatLng(latitude, longitude);
    const map = new qq.maps.Map(document.getElementById('container'), {
      center,
      zoom: 13
    });
    //添加dom监听事件
    qq.maps.event.addDomListener(map, 'click', event => {
      this.addMarker(event.latLng);
    });
    this.setState({
      map
    });
    const marker = new qq.maps.Marker({
      map,
      position: center
    });
    this.setState({
      markersArray: [marker]
    });
  };
  addMarker = location => {
    const { map, markersArray } = this.state;
    const { qq } = window;
    const marker = new qq.maps.Marker({
      position: location,
      map
    });
    const { lat, lng } = location;
    const newMarkerArray = markersArray.concat(marker);
    if (markersArray.length) {
      for (let i in markersArray) {
        markersArray[i].setMap(null);
      }
    }
    this.setState({
      markersArray: newMarkerArray
    });
    this.getAddress(lat, lng);
  };
  getAddress = (lat, lng) => {
    _showLoading({
      title: '加载中...'
    });
    const _this = this;
    _request({
      url: `/tx/api/ws/geocoder/v1/?location=${lat},${lng}&key=RDEBZ-F5O3I-AD5GA-5675L-ATUCQ-4VBC6`,
      success: res => {
        // Taro.showToast({
        //   title: JSON.stringify(res)
        // })
      },
      fail: err => {
        _showToast({
          title: '获取详细位置信息失败',
          icon: 'none'
        });
      },
      complete: res => {
        _hideLoading();
        if (res.data.status === 0) {
          const { lat, lng } = res.data.result.location;
          if (!res.data.result.address_reference) {
            _showToast({
              title: '地址选择错误，请重试',
              icon: 'none'
            });
            return;
          }
          const { address, address_reference: { landmark_l2 } } = res.data.result;
          const addressInfo = landmark_l2 ? landmark_l2.title : '';
          const newAddress = `${address}${addressInfo}`;
          _this.setState({
            addressRes: {
              location: [lng, lat],
              address: newAddress
            }
          });
        } else {
          _showToast({
            title: '获取位置失败',
            icon: 'none'
          });
        }
      }
    });
  };
  onCancelHandler = () => {
    const { onCancel } = this.props;
    onCancel();
  };
  handleClick = () => {
    const { addressRes } = this.state;
    const { onChange, onCancel } = this.props;
    onChange(addressRes);
    onCancel();
  };
}