Taro and Map-蒲公英云

Taro and Map

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

我太累了，懒得加注释了

页面上一共三个按钮，实现了三个功能：
【1.打开微信手机地图选位置】
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70_pic_left
【2.展示一个点】

【3.展示很多点Markers】
在这里插入图片描述

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>
  );
}