taro实战-微信小程序:地图Map

微信地图官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

此次项目中功能点：
1.接口返回的当前位置
2.根据选择的时间段，绘制历史轨迹
3.清除历史轨迹

用到map中的知识点：
[图片上传中...(图片.png-4fc9c4-1563177278005-0)

 render() {
    let mapKey = "a382ef6a3c4a492b56f4844fe45249ff";

    let {
      longitude,
      latitude,
      showModal,
      dataChoice,
      checkRadio,
      beginTime,
      endTime,
      historyData,
      endX,
      endY,
      startX,
      startY,
      historyNote,
      address
    } = this.state;
    let { personname, cellphone, fixedtelephone } = StateStorage.userInfo;
    if (!address) {
      address = "无位置信息";
    } else {
      let curStr = address.slice(0, 9);
      let lastStr = address.slice(9);
      curStr += "\n";
      address = curStr.concat(lastStr);
    }
    let markers = [
      {
        iconPath: now,
        id: 1,
        anchor: { x: 0.5, y: 0.8 },
        latitude: latitude,
        longitude: longitude,
        width: 40,
        height: 40,
        callout: {
          alpha: 0.1,
          content:
            "姓名:" +
              personname +
              "\n" +
              "手环号:" +
              cellphone +
              " \n" +
              "联系电话:" +
              fixedtelephone +
              "\n" +
              "当前地点:" +
              address || "无位置信息",

          color: "#000000 ",
          fontSize: 18,
          bgColor: "#FFFFFF",
          display: "BYCLICK",
          padding: 10,
          textAlign: "left",
          boxShadow: "2px 2px 10px #aaa"
        }
      },
      {
        iconPath: start,
        id: 2,
        latitude: startY,
        longitude: startX,
        width: 30,
        height: 30
      },
      {
        iconPath: end,
        id: 3,
        latitude: endY,
        longitude: endX,
        width: 30,
        height: 30
      }
    ];
    let circles = [
      {
        latitude: latitude,
        longitude: longitude,
        radius: 60,
        fillColor: "#7cb5ec88",
        color: "#ffffff"
      }
    ];

    let polyline = [
      {
        points: historyData,
        width: 5,
        color: "#4CBBCE",
        dottedLine: false
      }
    ];
    if (historyNote == true) {
      markers = markers.splice(1, 2);
      circles = [];
    }

    return (
      <View className='container'>
        <View className='map-con'>
          <View className='map'>
            {showModal ? (
              <Map
                className='curMap'
                id='location'
                subkey={mapKey}
                longitude={markers[0].longitude}
                latitude={markers[0].latitude}
                scale='16'
                markers={markers}
                circles={circles}
                polyline={polyline}
                show-compass='true'
              >
                <CoverView class='controls'>
                  <CoverImage
                    class='img'
                    src={mapCheck}
                    onClick={this.noteCheck}
                  />
                </CoverView>
              </Map>
            ) : (
              undefined
            )}
          </View>
        </View>

        {showModal ? (
          undefined
        ) : (
          <View className='modal-main'>
            <View className='modal-bg' onClick={this.hideChoice} />
            <View className='map-note'>
              <View className='pay-back' onClick={this.noteCheck.bind(this, 0)}>
                <Image src={payBack} />
                <Text>轨迹回放</Text>
              </View>
              <View className='clear' onClick={this.noteCheck.bind(this, 1)}>
                <Image src={clear} />
                <Text>清除轨迹</Text>
              </View>
              <View className='location' onClick={this.noteCheck.bind(this, 2)}>
                <Image src={location} />
                <Text>当前位置</Text>
              </View>
            </View>
          </View>
        )}
        {dataChoice ? (
          undefined
        ) : (
          <View className='modal-date'>
            <View className='modal-bg' onClick={this.hideChoice} />
            <View className='date-con'>
              <View className='title'>轨迹回放</View>
              <RadioGroup onChange={this.radioChange}>
                <View className='date'>
                  <Text>今天</Text>
                  <Radio value='今天' checked={checkRadio} />
                </View>
                <View className='date'>
                  <Text>昨天</Text>
                  <Radio value='昨天' checked={!checkRadio} />
                </View>
              </RadioGroup>
              <Picker mode='date' onChange={this.onDateChange}>
                <View className='date'>
                  <Text>开始时间</Text>
                  <Text>{beginTime}</Text>
                </View>
                <View className='date'>
                  <Text>结束时间</Text>
                  <Text>{endTime}</Text>
                </View>
              </Picker>

              <Text className='submit-date' onClick={this.handlePayBack}>
                确认
              </Text>
            </View>
          </View>
        )}
      </View>
    );
  }