主要介绍如何引用映射，如何找到数据等。

1。制备阶段

绘制博客的微信微型程序地图插件系列（1）：微信Mini 使用 Map（不时更新）

注册为开发人员，并在 OPEN平台上申请Mini程序的开发人员密钥

由于我申请了，我将屏幕截图显示它。以下是我的应用程序成功之后的页面。

在项目的“”文件中下载 Map SDK并解开“ Amap-WX.130.js”文件

2。引用地图

创建一个地图文件夹，创建页面页面，然后在MAP.JS文件夹中导入 Map SDK

var amapFile=require('../../components/map-wx/amap-wx.130.js'); Page({ /** * 先初始化一些markers数据用来显示 */ data: { longitude:121.517439, latitude: 31.34541, markers: [{ id: 0, latitude: 31.34541, longitude:121.517439, width: 23, height: 33 },{ id: 1, latitude: 31.281641, longitude: 121.558293, width: 24, height: 34 }] },

onLoad(options) { var that=this; var myamap=new amapFile.AMapWX({key:'331959b642d93aa8d4cdcd0e4a7c0d25'}); //这里存放的是申请的密钥key },

map.wxml文件

<view class="map_box"> <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" ></map> </view>

map.wxss文件

.map_box{ position:absolute; top: 55px; bottom: 0px; left: 0px; right: 0px; } #navi_map{ width: 100%; height: 100%; }

此页面将添加到app.json文件中

"pages": [ "pages/index/index", "pages/map/map" ],

页面显示

3。错误

问题“：失败需要在API中”

问题的原因：该API未在代码中声明

解决方案：在app.json中声明此API如下所示

"requiredPrivateInfos": ["getLocation"], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } },

目前，仍然报告了错误。百度发现，有必要在迷你计划管理背景中找到开发发展管理界面设置，并打开权限如下。

使用真实机器调试时使用以下错误

message：Error: components/map-wx/__MACOSX/._amap-wx.130.js: components/map-wx/__MACOSX/._amap-wx.130.js file is not in UTF-8 encoding appid: wx810e1b49b5dee03a openid: o6zAJs47dGpcijUEebWKvVtGUfjE ideVersion: 1.06.2307260 osType: win32-x64 time: 2023-09-04 15:08:32

问题的原因：将 SDK复制到文件夹时，也会复制“”文件。里面有一个“ .wx.130.js”文件。这是一个隐藏的文件，以“。”开头，只需删除它即可。

3。问题：“不在以下法律域名列表中”

解决方案：

第一种类型：在迷你程序管理背景中，找到开发开发管理开发设置，并添加服务器域名

第二种类型：开发工具中的详细信息 - 本地设置，检查“请勿验证法定域名，...”。