Taro and Map

怼烎@ 2022-12-19 06:03 406阅读 0赞

### 我太累了，懒得加注释了 ###

页面上一共三个按钮，实现了三个功能：  
【1.打开微信手机地图选位置】  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70_pic_left][]  
【2.展示一个点】  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_16_color_FFFFFF_t_70_pic_left][]  
【3.展示很多点Markers】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70_pic_left 1]

import React, {  useState, useEffect } from "react";
    import {  View, Button, Text, Map } from "@tarojs/components";
    import {  AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
    import Taro from "@tarojs/taro";
    import QQMapWX from "../utils/mapsdk/qqmap-wx-jssdk";
    
    export default function({  isOpened, changeOpen }) { 
      const [adressInfo, setArdessInfo] = useState({ });
      const [markers, setMarkers] = useState([]);
      function showMap() { 
        Taro.chooseLocation({ 
          latitude: adressInfo["latitude"] || undefined,
          longitude: adressInfo["longitude"] || undefined,
          success(res) { 
            setArdessInfo(res);
          }
        });
      }
    
      function showMap2() { 
        if (adressInfo["latitude"] && adressInfo["longitude"]) { 
          Taro.openLocation({ 
            latitude: adressInfo["latitude"] || undefined,
            longitude: adressInfo["longitude"] || undefined,
            address: adressInfo["address"] || "",
            name: adressInfo["name"] || "",
            scale: 18 //缩放比例，范围5~18
            // complete 接口调用结束的回调函数（调用成功、失败都会执行）
            // fail 接口调用失败的回调函数
            // success 接口调用成功的回调函数
          });
        }
      }
    
      function showMap3() { 
        new QQMapWX({ 
          key: "AXNBZ-HDOLW-4ZCRO-OHASD-SKPVV-DYBO4"
        }).search({ 
          keyword: "酒店",
          success: function(res) { 
            let mks = res.data.map(element => { 
              return { 
                title: element.title,
                id: element.id,
                latitude: element.location.lat,
                longitude: element.location.lng,
                iconPath: "https://csdnimg.cn/medal/qixiebiaobing4@240.png", //图片路径
                width: 20,
                height: 20
              };
            });
            setMarkers(mks);
          }
        });
      }
    
      function onTap(e) { 
        console.log("点击地图时触发", e);
      }
      function onMarkerTap(e) { 
        console.log(
          "点击标记点时触发",
          e,
          "可以拿到坐标，然后问他到这里去，再掉，打开的接口，完美"
        );
      }
      function onLabelTap() { 
        console.log("点击label时触发");
      }
      function onControlTap() { 
        console.log("点击控件时触发");
      }
      function onCalloutTap() { 
        console.log("点击标记点对应的气泡时触发");
      }
      function onUpdated() { 
        console.log("在地图渲染更新完成时触发");
      }
      function onRegionChange() { 
        console.log("视野发生变化时触发");
      }
      function onPoiTap() { 
        console.log("点击地图poi点时触发");
      }
      return (
        <View>
          <AtModal
            isOpened={ isOpened}
            onClose={ () => { 
              changeOpen();
            }}
          >
            <AtModalHeader>地图</AtModalHeader>
            <AtModalContent>
              拿到地图信息了吗：
              <View>名称：{ adressInfo["name"]}</View>
              <View>地址：{ adressInfo["address"]}</View>
              <View>
                经纬度：{ adressInfo["latitude"]}、{ adressInfo["longitude"]}
              </View>
              <Button onClick={ () => showMap()}>选择位置</Button>
              <Button onClick={ () => showMap2()}>打开地图</Button>
              <Button onClick={ () => showMap3()}>展开好多点</Button>
              <Map
                subkey="AXNBZ-HDOLW-4ZCRO-OHASD-SKPVV-DYBO4"
                latitude={ 31.222349}
                longitude={ 121.457743}
                include-points={ markers}
                markers={ markers}
                scale={ 18}
                show-location
                onTap={ onTap}
                onMarkerTap={ onMarkerTap}
                onLabelTap={ onLabelTap}
                onControlTap={ onControlTap}
                onCalloutTap={ onCalloutTap}
                onUpdated={ onUpdated}
                onRegionChange={ onRegionChange}
                onPoiTap={ onPoiTap}
              />
              { /* 基础展示 ↓ */}
              { /* <Map subkey="AXNBZ-HDOLW-4ZCRO-OHASD-SKPVV-DYBO4" latitude={31.222349} longitude={121.457743} include-points={markers} markers={markers} scale={18} show-location /> */}
            </AtModalContent>
            <AtModalAction>
              { /* <Button>取消</Button> <Button>确定</Button> */}
            </AtModalAction>
          </AtModal>
        </View>
      );
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70_pic_left]: /images/20221120/4a10ba7ef0d94863abd96f4d3ba7778b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_16_color_FFFFFF_t_70_pic_left]: https://img-blog.csdnimg.cn/20201105155417858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70_pic_left 1]: https://img-blog.csdnimg.cn/20201105155813223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy,size_1,color_FFFFFF,t_70#pic_left