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 (
      
        
          
            {showModal ? (
              
                
                  
                
              
            ) : (
              undefined
            )}
          
        

        {showModal ? (
          undefined
        ) : (
          
            
            
              
                
                轨迹回放
              
              
                
                清除轨迹
              
              
                
                当前位置
              
            
          
        )}
        {dataChoice ? (
          undefined
        ) : (
          
            
            
              轨迹回放
              
                
                  今天
                  
                
                
                  昨天
                  
                
              
              
                
                  开始时间
                  {beginTime}
                
                
                  结束时间
                  {endTime}
                
              

              
                确认
              
            
          
        )}
      
    );
  }

你可能感兴趣的:(taro实战-微信小程序:地图Map)