开搞：第四个微信小程序：图上县志

原因：我换了一个微信号来搞，因为用同一个用户，备案只能一个个的来。这样不行。所以我换了一个。原来注册过小程序。现在修改即可。注意做好计划后，速度备案和审核，不然你时间浪费不起。30元花起。

结构：

  +---------------------+
  | 前端（腾讯地图+UI）   |
  +----------+----------+
             | 用户点击/交互
  +----------v----------+
  | 后端（Node.js/Python）|
  +----------+----------+
             | 调用API聚合数据
  +----------v----------+     +-----------------+
  | 腾讯地图行政区划API    <-----> 获取边界坐标    |
  +----------+----------+     +-----------------+
             |
  +----------v----------+     +-----------------+
  | 百度百科/政府数据API  <-----> 历史简介与名人   |
  +----------+----------+     +-----------------+
             |
  +----------v----------+     +-----------------+
  | 天行数据/新闻API     <-----> 热点新闻资讯     |
  +---------------------+     +-----------------+

一、开发工具准备

小程序开发平台的工具

切换用户，使用新的账号。我扫。扫完等着就行了。

vscode+taro

代码管理 git,最好收工时，再进行吧。

我的主要目的是为了用o3

vscode+taro

打开code

1.找个地方先。我这记忆很差，每次都要查找。我用的是pnpm

(突然想起昨天的两个点，记忆一下：一个是跨页面信息同步（类似于购物车事件），一个是事件冒泡 阻止（页面上边有一层挡着的。）。)

安装及使用 | Taro 文档

Microsoft Windows [版本 10.0.26100.4061]
(c) Microsoft Corporation。保留所有权利。

D:\gitee>pnpm install -g @tarojs/cli
 WARN  9 deprecated subdependencies found: @babel/[email protected], @humanwhocodes/[email protected], @humanwhocodes/[email protected], @swc/[email protected], @types/[email protected], [email protected], [email protected], [email protected], [email protected]
Already up to date
Progress: resolved 654, reused 576, downloaded 0, added 0, done
Done in 10.6s using pnpm v10.11.0

D:\gitee>npm info @tarojs/cli

@tarojs/[email protected] | MIT | deps: 16 | versions: 1016
cli tool for taro
https://github.com/NervJS/taro#readme

keywords: taro, weapp

bin: taro

dist
.tarball: https://registry.npmjs.org/@tarojs/cli/-/cli-4.1.1.tgz
.shasum: 0b031be17d74dde85cd663fcd015d85c9a7585fa
.integrity: sha512-qZhmTglEzU8Vq16qfe7DI0HBrjeiU/iLKyLJuL2j28URks82QwSGCQZaAO4a7cBkF1OchwIPgVBCL9dei0Nhbw==
.unpackedSize: 443.4 kB

dependencies:
@tarojs/binding: 4.1.1            axios: ^1.6.8                     minimist: ^1.2.8
@tarojs/helper: 4.1.1             cli-highlight: ^2.1.11            ora: ^5.4.1
@tarojs/plugin-doctor: ^0.0.13    download-git-repo: ^3.0.2         semver: ^7.6.0
@tarojs/service: 4.1.1            envinfo: ^7.12.0                  validate-npm-package-name: ^5.0.0
@tarojs/shared: 4.1.1             inquirer: ^8.2.6
adm-zip: ^0.5.12                  latest-version: ^5.1.0

maintainers:
- yuche <[email protected]>
- xuanzebin <[email protected]>
- defaultlee <[email protected]>
- drchan <[email protected]>
- kyjo <[email protected]>
- qq592743779 <[email protected]>
- advancedcat <[email protected]>
- baosiqing <[email protected]>
- zakary <[email protected]>
- liuzejia <[email protected]>
- vasily.cjj <[email protected]>

dist-tags:
1.x: 1.3.46                         canary: 4.0.7-canary.6              test: 4.0.9-alpha.8
2.x: 2.2.22                         experimental: 0.0.0-experimental.2  theta: 3.6.15-theta.0
3.0: 3.0.29                         latest: 4.1.1                       v3-latest: 3.6.37
alpha: 4.1.1-alpha.2                next: 4.0.2
beta: 4.0.10-beta.4                 nightly: 3.6.24-nightly.10

published 4 days ago by defaultlee <[email protected]>

D:\gitee>taro init mapKnowledge
👽 Taro v3.6.37

‼ 获取 taro 全局配置文件失败，不存在全局配置文件：C:\Users\Administrator\.taro-global-config\index.json


Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍
D:\gitee>pnpm @tarojs/cli init mapKnowledge
 ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND  No package.json (or package.yaml, or package.json5) was found in "D:\gitee".

D:\gitee>taro -v
👽 Taro v3.6.37

3.6.37

意外不？安装的4.1，使用的3.6？反正是新学习，无所谓了。用最新 的。

ok了，继续

D:\gitee>taro init mapKnowledge
👽 Taro v4.1.1



Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍 点击地图，就可以得到该区域的相关知识。
? 请选择框架 React
? 是否需要使用 TypeScript ？ Yes
? 是否需要编译为 ES5 ？ No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
? 请选择包管理工具 pnpm
? 请选择编译工具 Webpack5
? 请选择模板源 Gitee（最快）
√ 拉取远程模板仓库成功！
? 请选择模板 默认模板

好了，用codea打开这个文件夹，进入下一步的操作。

注意使用一个有额度的账号。

进入，开始初始化吧。pnpm install

上图中的命令是最常用的。要记住。开发过程中用第一个命令，动态编译。结束时用第二个命令加上 -production。。上面有说明。

pnpm install

速度感人，下午接着。好吧，到下午了。

接着。

pnpm dev dev:weapp

(base) PS D:\gitee\mapKnowledge> pnpm dev:weapp

> [email protected] dev:weapp D:\gitee\mapKnowledge

> npm run build:weapp -- --watch

> [email protected] build:weapp

> taro build --type weapp --watch

👽 Taro v4.1.1

Tips:

1. 预览模式生成的文件较大，设置 NODE_ENV 为 production 可以开启压缩。

Example:

$ set NODE_ENV=production && taro build --type weapp --watch

2. 建议开启持久化缓存功能，能有效提升二次编译速度，详情请参考: https://docs.taro.zone/docs/config-detail#cache。

提示 appid touristappid

生成 工具配置 D:\gitee\mapKnowledge\dist/project.config.json

启动 开发者工具-项目目录 D:\gitee\mapKnowledge\dist

再接着，打开微信开发者工具，找到对应的文件夹下的dist文件夹。

修改一上，看结果：

OK了

下边正式开工：

二、腾讯地图相关

1.注册一个账号，最好用一个个体户的信息来提升下额度，否则，只能测试

腾讯位置服务 - 立足生态，连接未来

2.创建一个新的应用

在这时，我就不创建了，共用原来的。

服务提示：

WebService API | 腾讯位置服务

设置白名单：

发现了几个有意思的调用 。

天气WebService API | 腾讯位置服务

POiWebService API | 腾讯位置服务

我的是高亮需求，看我找到了什么》

好吧，最好的高德。我就用一下吧，反正这是一个知识应用。

打开高德地图开放平台，注册登录，支付宝认证OK。

高德地图的免费用量高德控制台

1.1配置文件：存放高德的key

1.2组件文件：

import React, { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import { WebView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AMapKey } from '../config/amapConfig';

const AMapComponent: React.FC = () => {
  const [location, setLocation] = useState({
    latitude: 35.04,
    longitude: 118.65
  });
  const [address, setAddress] = useState('定位中...');
  
  // 生成高德地图HTML
  const generateMapHTML = () => {
    return `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>高德地图</title>
          <style>
            html, body, #container { 
              width: 100%; 
              height: 90vh; 
              margin: 0;
              padding: 0;
            }
          </style>
          <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=${AMapKey}"></script>
        </head>
        <body>
          <div id="container"></div>
          <script>
            var map = new AMap.Map('container', {
              zoom: 14,
              center: [${location.longitude}, ${location.latitude}]
            });
            
            // 添加定位控件
            map.plugin('AMap.Geolocation', function() {
              var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,
                timeout: 10000,
                buttonOffset: new AMap.Pixel(10, 20),
                zoomToAccuracy: true,
                showButton: true
              });
              map.addControl(geolocation);
              geolocation.getCurrentPosition();
            });
          </script>
        </body>
      </html>
    `;
  };

  useEffect(() => {
    // 获取位置信息
    Taro.getLocation({
      type: 'gcj02',
      success: async function (res) {
        setLocation({
          latitude: res.latitude,
          longitude: res.longitude
        });
        
        // 通过高德地图API获取地址信息
        try {
          const response = await Taro.request({
            url: `https://restapi.amap.com/v3/geocode/regeo`,
            data: {
              key: AMapKey,
              location: `${res.longitude},${res.latitude}`,
              extensions: 'base'
            }
          });
          
          if (response.data.status === '1' && response.data.regeocode) {
            const { province, city, district } = response.data.regeocode.addressComponent;
            setAddress(`${province} ${city} ${district}`);
          }
        } catch (error) {
          console.error('获取地址失败:', error);
          setAddress('获取地址失败');
        }
      },
      fail: function() {
        Taro.showToast({
          title: '定位失败',
          icon: 'none'
        });
      }
    });
  }, []);

  return (
    <View>
      <WebView src={`data:text/html,${encodeURIComponent(generateMapHTML())}`} />
      <View style='height: 10vh; display: flex; align-items: center; justify-content: center; background: #fff;'>
        {address}
      </View>
    </View>
  );
};

export default AMapComponent;

新建一个key,将key和密钥放在配置上。

1. 高德开放平台配置

   • 确保您的 Key 是 Web 服务 (JS API) 的 Key
   • 需要配置安全密钥 (jscode)
   • 需要添加域名白名单

今天 就到这时。下班了，明天接着高。

不知什么位置出错了。高德地图可以得到经纬，但地图不显示。

又换回腾讯地图了，啥都不如原生的。

import React, { useState, useEffect } from 'react';
import { View, Map } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { WeChatKey } from '../config/amapConfig';

const AMapComponent: React.FC = () => {
  const defaultLocation = {
    latitude: 35.04,
    longitude: 118.65,
    address: '山东省临沂市临沭县'
  };

  const [location, setLocation] = useState({
    latitude: defaultLocation.latitude,
    longitude: defaultLocation.longitude
  });
  const [address, setAddress] = useState('定位中...');

  // 使用腾讯地图API解析地址
  const getAddressFromLocation = async (latitude: number, longitude: number) => {
    try {
      const response = await Taro.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          key: WeChatKey,
          location: `${latitude},${longitude}`,
          get_poi: 0
        }
      });

      if (response.data.status === 0) {
        const { province, city, district } = response.data.result.address_component;
        return `${province} ${city} ${district}`;
      }
      throw new Error('解析地址失败');
    } catch (error) {
      console.error('获取地址信息失败:', error);
      return defaultLocation.address;
    }
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (address === '定位中...') {
        setLocation({
          latitude: defaultLocation.latitude,
          longitude: defaultLocation.longitude
        });
        setAddress(defaultLocation.address);
        Taro.showToast({
          title: '定位超时，显示默认位置',
          icon: 'none'
        });
      }
    }, 10000);

    // 使用小程序原生定位API
    Taro.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,
      success: async (res) => {
        clearTimeout(timeoutId);
        const { latitude, longitude } = res;
        setLocation({ latitude, longitude });
        
        // 使用腾讯地图API解析地址
        const addressInfo = await getAddressFromLocation(latitude, longitude);
        setAddress(addressInfo);
      },
      fail: () => {
        clearTimeout(timeoutId);
        setLocation({
          latitude: defaultLocation.latitude,
          longitude: defaultLocation.longitude
        });
        setAddress(defaultLocation.address);
        Taro.showToast({
          title: '定位失败，显示默认位置',
          icon: 'none'
        });
      }
    });

    return () => clearTimeout(timeoutId);
  }, []);

  // 地图点击事件处理
  const handleMapTap = async (e) => {
    const { latitude, longitude } = e.detail;
    setLocation({ latitude, longitude });
    const addressInfo = await getAddressFromLocation(latitude, longitude);
    setAddress(addressInfo);
  };

  return (
    <View className='map-container'>
      <Map
        className='map'
        style={{ width: '100%', height: '90vh' }}
        latitude={location.latitude}
        longitude={location.longitude}
        scale={14}
        showLocation
        enableOverlooking
        enableZoom
        enableScroll
        onTap={handleMapTap}
      />
      <View className='address-bar'>
        {address}
      </View>
    </View>
  );
};

export default AMapComponent;

修改进行扩展吧。

import Taro from '@tarojs/taro';
import { WeChatKey } from '../config/amapConfig';
import { Location, AddressInfo } from '../types/map';

export class LocationService {
  static async getAddress(location: Location): Promise<AddressInfo> {
    try {
      const response = await Taro.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          key: WeChatKey,
          location: `${location.latitude},${location.longitude}`,
          get_poi: 0
        }
      });

      if (response.data.status === 0) {
        const { address_component, formatted_addresses } = response.data.result;
        return {
          province: address_component.province,
          city: address_component.city,
          district: address_component.district,
          formatted: formatted_addresses.standard_address
        };
      }
      throw new Error('解析地址失败');
    } catch (error) {
      console.error('获取地址信息失败:', error);
      throw error;
    }
  }

  static async getDistrictBoundary(districtName: string): Promise<DistrictBoundary> {
    try {
      const response = await Taro.request({
        url: 'https://apis.map.qq.com/ws/district/v1/search',
        data: {
          key: WeChatKey,
          keyword: districtName
        }
      });

      if (response.data.status === 0 && response.data.result.length > 0) {
        return {
          points: response.data.result[0].location,
          name: districtName
        };
      }
      throw new Error('获取区域边界失败');
    } catch (error) {
      console.error('获取区域边界失败:', error);
      throw error;
    }
  }
}

对于获取区域边界，我们需要使用腾讯位置服务的"行政区划"接口。

请按以下步骤操作：

1. 登录腾讯位置服务平台 (https://lbs.qq.com/)
2. 进入"控制台" -> "应用管理" -> 选择您的应用
3. 在"密钥管理"中确认您的 key 已启用
4. 在"设置" -> "WebServiceAPI" 中开通以下接口：

   • 行政区划

   • 地址解析

   • 逆地址解析

   • 同时，您可能还需要开通以下接口权限：

   • 行政区划相关接口：

     • /ws/district/v1/list
     • /ws/district/v1/getchildren
     • /ws/district/v1/search

喵了喵。您看绘制的这破图。

唉，不行，需要其他方法 。得了天地图 服务中心，下载了

然后用这个数据吧。9.5M。喵了个喵。测试用，后期得改成库。

上传到阿里oss

看到了，数据结构都不一样。好不好，搞了一个下午。可以绘制边线。

可以弹窗显示。

加上天气。但 我不知下一步，如何走。休息一会。