Taro and Map

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