前一周完成了一個項目，體測成績轉換的工具，沒做記錄，。這次計劃開發一個地圖應用小程序，記錄一下。方便給使用的人。

一、申請微信小程序，填寫相應的信息，取得開發者ID。這個要給騰訊地圖使用的。

二、申請騰訊地圖API，創建應用，個人版，6500次調用 。并發5.也還行吧。

好了，我們開始。

三、新建一個文件夾，我的是win系統。

放在如下位置。D:\gitee\wechat-map

在目錄處：cmd

四、創建環境相關。

我使用的是react+taro等，因為工程量小，不再搞復雜了。

參考 ：安裝及使用 | Taro 文檔

看操作記錄：

npm install -g @tarojs/cli

taro init wechat-map

cd wechat-map

pnpm install?

五、 打開vscode,編譯一下。

退出當前用戶，重新登錄一個用戶。你懂的。

打開terminal，pnpm dev:weapp

我用的是taro 3.6.37，可能有點低，再說吧。

六，打開微信開發者工具。

直接導入項目即可，找到目錄。其他自動生成。

注意清緩存，編譯。

?

?七、正式開始吧，來個首頁

/** @Author: DuYicheng* @Date: 2025-05-13 08:49:34* @LastEditors: DuYicheng* @LastEditTime: 2025-05-13 09:57:00* @Description: * @FilePath: \wechat-map\src\pages\index\index.tsx*/
import { View, Text, Image } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'export default function Index() {useLoad(() => {console.log('Page loaded.')})return (<View className='index'><View className='logo-container'><ImageclassName='medical-logo'src='../../assets/images/medical-logo.png'mode='aspectFit'/><Text className='title'>醫療服務</Text></View><View className='button-container'><View className='find-button clinic'>找診所</View><View className='find-button pharmacy'>找藥店</View></View></View>)
}

.index {display: flex;flex-direction: column;align-items: center;padding: 40px 20px;
}.logo-container {display: flex;flex-direction: column;align-items: center;margin-bottom: 60px;.medical-logo {width: 120px;height: 120px;margin-bottom: 20px;}.title {font-size: 24px;color: #333;}
}.button-container {width: 100%;display: flex;flex-direction: column;gap: 20px;padding: 0 40px; // 添加內邊距使按鈕更窄
}.find-button {width: 100%;height: 80px; // 增加按鈕高度display: flex;align-items: center;justify-content: center;border-radius: 8px;font-size: 18px;color: #fff;&.clinic {background-color: #2D7DD2;}&.pharmacy {background-color: #45B649;}
}

八、小程序sdk配置。

九、實現按鈕的跳轉。

?先實現診所功能。

1.結構圖

src/├── assets/├── pages/│   ├── index/│   └── clinic-map/│       ├── index.tsx│       ├── index.scss│       └── index.config.ts└── utils/└── qqmap-wx-jssdk.js

2.主頁面調整代碼如：

import { View, Text, Image } from '@tarojs/components'
import { useLoad, navigateTo } from '@tarojs/taro'
import './index.scss'export default function Index() {useLoad(() => {console.log('Page loaded.')})const handleFindClinic = () => {navigateTo({url: '/pages/clinic-map/index'})}return (<View className='index'><View className='logo-container'><ImageclassName='medical-logo'src='../../assets/medical-logo.png'mode='aspectFit'/><Text className='title'>醫療服務</Text></View><View className='button-container'><View className='find-button clinic' onClick={handleFindClinic}>找診所</View><View className='find-button pharmacy'>找藥店</View></View></View>)
}

3.診所地圖

import { View, Map } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
let qqmapsdkexport default function ClinicMap() {const [latitude, setLatitude] = useState(0)const [longitude, setLongitude] = useState(0)const [clinics, setClinics] = useState([])useLoad(() => {// 初始化地圖SDKqqmapsdk = new QQMapWX({key: 'YOUR_KEY_HERE' // 替換成你的騰訊地圖key})// 獲取當前位置權限Taro.getLocation({type: 'gcj02',success: function(res) {setLatitude(res.latitude)setLongitude(res.longitude)searchNearbyClinic(res.latitude, res.longitude)},fail: function() {Taro.showToast({title: '需要授權位置信息',icon: 'none'})}})})const searchNearbyClinic = (lat, lng) => {qqmapsdk.search({keyword: '診所',location: `${lat},${lng}`,success: function(res) {console.log(res)setClinics(res.data)},fail: function(res) {console.error(res)Taro.showToast({title: '搜索診所失敗',icon: 'none'})}})}return (<View className='clinic-map'><MapclassName='map'latitude={latitude}longitude={longitude}markers={clinics.map((clinic, index) => ({id: index,latitude: clinic.location.lat,longitude: clinic.location.lng,title: clinic.title}))}show-location/><View className='clinic-list'>{clinics.map((clinic, index) => (<View key={index} className='clinic-item'><View className='clinic-name'>{clinic.title}</View><View className='clinic-address'>{clinic.address}</View><View className='clinic-distance'>{clinic._distance}米</View></View>))}</View></View>)
}

4.地圖樣式

.clinic-map {height: 100vh;display: flex;flex-direction: column;.map {width: 100%;height: 50vh;}.clinic-list {flex: 1;overflow-y: auto;padding: 10px;background: #f5f5f5;.clinic-item {background: #fff;margin-bottom: 10px;padding: 15px;border-radius: 8px;.clinic-name {font-size: 16px;font-weight: bold;color: #333;margin-bottom: 5px;}.clinic-address {font-size: 14px;color: #666;margin-bottom: 5px;}.clinic-distance {font-size: 12px;color: #999;}}}
}

5.創建頁面配置

export default {navigationBarTitleText: '找診所',navigationBarBackgroundColor: '#ffffff',navigationBarTextStyle: 'black'
}

6.修改：app.config.ts

export default defineAppConfig({pages: ['pages/index/index','pages/clinic-map/index'],window: {backgroundTextStyle: 'light',navigationBarBackgroundColor: '#fff',navigationBarTitleText: 'WeChat',navigationBarTextStyle: 'black'},permission: {'scope.userLocation': {desc: '你的位置信息將用于小程序位置接口的效果展示'}}
})

7.修改project.config.json

{// ...existing code..."permission": {"scope.userLocation": {"desc": "你的位置信息將用于小程序位置接口的效果展示"}}// ...existing code...
}

其他建議：

建議在開發者工具的詳情設置中，確保以下設置：

1. 勾選"使用增強編譯"
2. 勾選"不校驗合法域名"（開發階段）
3. 確保在"API 權限設置"中已經開啟了位置相關接口權限

?

測試成功，但過了一會，說用量多了。vscode，重新編譯。

?

?基本可以了，下一步就可以上傳代碼等待審核了。以上是一個簡單的教程，你可以根據實際修改。