【微信小程序开发实战项目】——查找附近美食餐厅的项目完整代码和详细步骤

本文链接：https://blog.csdn.net/2301_77628600/article/details/139717932

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由曼亿点原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

— 请添加图片描述

文章目录

⭐前言⭐

1 . 申请腾讯地图账号：
在开始之前，您需要拥有一个腾讯地图开发者账号。这个账号将为您提供访问腾讯地图API的权限，并允许您管理您的应用程序和服务。您可以访问腾讯地图开放平台的官方网站（https://lbs.qq.com/）进行注册和申请账号。

2 . 配置request路径：
一旦您拥有了腾讯地图开发者账号，接下来需要配置request路径。这通常涉及生成API密钥（Key），用于身份验证和授权您的应用程序访问腾讯地图API。您需要在腾讯地图开放平台上设置您的应用程序信息，并获取相应的API密钥。

3 . 添加地图插件到微信公众平台：
在微信公众平台上添加地图插件可以让您的用户在微信内部直接使用地图功能，而不必离开微信。您可以通过微信公众平台的开发者工具或后台管理界面来完成此操作。

🎶 一、如何去申请腾讯地图账号

1.访问腾讯地图开放平台网站：
打开浏览器，访问腾讯地图开放平台官方网站：https://lbs.qq.com/。
2.注册账号：
如果您还没有腾讯地图开发者账号，首先需要注册。在网站上找到注册入口，通常在页面右上角或底部。
3.登录账号：
如果您已经有了腾讯地图开发者账号，可以直接登录。登录入口通常在网站右上角或顶部导航栏。
4.申请API权限：
登录后，找到“我的应用”或类似的管理页面，在这里您可以申请新的API权限或查看现有的应用程序列表。
5.创建应用程序：
如果是首次使用，您需要创建一个新的应用程序来获取API密钥。填写应用程序的名称、描述和相关信息。
6.获取API密钥（Key）：
完成应用程序创建后，系统会为您生成一个唯一的API密钥。这个密钥用于标识您的应用程序并进行访问控制。
7.管理和配置：
在腾讯地图开放平台上，您可以管理您的应用程序，包括查看使用情况、调整配额、查看文档和示例等。
8.费用和付款设置：
如果您的应用程序需要付费服务或超出免费配额，您可能需要设置支付方式和付款方式。
9.查看文档和示例：
在腾讯地图开放平台网站上，有详细的文档和示例代码，帮助您快速集成和使用腾讯地图API。
10技术支持和社区：
如果遇到问题或需要帮助，可以查阅技术支持文档或参与开发者社区讨论。
以上是申请腾讯地图账号的典型步骤和目录，每个步骤可能在具体的平台设计上略有不同，但基本流程是类似的。

首先第一步我们将去腾讯地图去申请账号以下时腾出地图的地址：

去网站上去粘贴此地址：https://lbs.qq.com/

1.我们应当采用最常规的申请账号登录

当完成第一步后：

2.新建应用，步骤如下图所示：

在这里插入图片描述

3.点击添加key app id：wxfbe9458300a0b223
在这里插入图片描述

my app F2WBZ-ESYKV-HP5PR-5BVZF-K3VIQ-4SFHR

🎶 二、如何在微信公众平台，配置request路径和添加地图插件

1 . 配置请求路径（Request Path）
在微信公众平台开发中，配置请求路径通常指的是设置服务器接收微信服务器推送的事件消息或用户的请求消息的路径。这是实现自定义菜单、自动回复、模板消息等功能的基础。

步骤概述：
注册开发者账号：首先需要注册成为微信公众平台的开发者，并创建自己的公众号。
配置服务器地址：在公众号的开发者中心或开发设置中，配置服务器地址（即 request path），用于接收微信服务器推送的事件和消息。
验证服务器有效性：配置完成后，需要验证服务器的有效性，确保服务器可以正确响应微信服务器的验证请求。
接收和处理消息：一旦服务器地址配置成功并验证通过，就可以编写后端代码来接收和处理微信服务器推送的消息，实现各种定制化的功能。
2. 添加地图插件
微信公众平台支持通过插件的方式集成地图服务，使公众号能够展示地图、定位等功能。通常，这需要在公众号后台的插件管理中进行设置和配置。

步骤概述：
进入公众号后台：登录微信公众平台后台管理界面，选择对应的公众号。
进入插件管理：在公众号管理界面中，找到“插件管理”或类似的菜单项。
搜索地图插件：在插件市场中搜索需要的地图插件，通常腾讯地图和百度地图都有提供。
申请和配置插件：选择合适的地图插件，申请并按照指引完成配置。配置可能涉及到获取地图插件的API密钥或相关设置。
在自定义菜单或界面中使用：配置完成后，可以在公众号的自定义菜单、图文消息或其他功能界面中使用地图插件，实现位置展示、周边搜索等功能。

(1)添加request路径：https://apis.map.qq.com
如下图所示:
在这里插入图片描述

(2)微信小程序—》设置—》第三方设置-----》插件管理----》添加插件
在这里插入图片描述

点击此链接进入添加界面:https://fuwu.weixin.qq.com/profile/sq_ocVuQ4joORnwn_bzpxTd8Mq8wZ3g/plugin

腾讯地图介绍博客文章：https://blog.csdn.net/sinat_17775997/article/details/54981952

🎶 三、在项目中载入地图

选择地图服务提供商：

1.微信小程序本身并不直接提供地图组件，因此你需要选择一个第三方地图服务提供商，比如腾讯地图或百度地图。
根据你的需求和地图服务提供商的条件选择合适的服务。
2.获取地图 API 密钥：
在选择地图服务提供商后，通常需要注册并获取相应的 API 密钥（App Key）。
这个 API 密钥是访问地图服务的凭证，确保你能够在小程序中正确加载和使用地图功能。
3.引入地图组件或 SDK：
根据地图服务提供商的文档和指南，引入对应的地图组件或 SDK 到你的微信小程序项目中。
通常，这些 SDK 或组件会提供详细的使用说明和示例代码，帮助你快速集成地图功能。
4.配置地图显示及功能：
根据你的需求，配置地图的显示样式、缩放级别、标记点、交互功能等。
地图服务提供商的文档会详细说明如何在小程序中实现这些功能，例如添加标记、监听事件等。
5.测试和调试：
在集成地图功能后，务必进行测试和调试，确保地图在不同设备和屏幕尺寸下正常显示和交互。
特别注意处理异步加载和地图事件的情况，保证用户体验的稳定性和流畅性。
6.注意事项：
地图服务的费用：一些地图服务在使用超过免费额度后可能会收取费用，确保了解费用结构并根据需求选择合适的服务套餐。
小程序安全性：在使用地图服务时，要注意小程序的安全性和隐私保护，避免泄露用户的位置信息等敏感数据。
小程序官方要求：遵循微信小程序官方的开发规范和要求，确保你的小程序在功能集成和使用上符合微信的规定。

1.要引入qqmapwx的js

其下载js的地址：

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

在这里插入图片描述
将其放在pages下的blis里面：

以下为效果图，使用的是腾讯地图位置服务微信小程序JavaScript SDK，首先要申请腾讯地图位置服务的开发密钥，然后进行开发。
wxml：
在这里插入图片描述

需要使用的index.wxml的代码：

<view  class="content">
  <map id="1" longitude='{{poi.longitude}}' latitude='{{poi.latitude}}' scale='16' markers='{{markers}}' style='width:100%;height:{{height}}px;' show-location bindmarkertap='gotoHere'></map>
  <view class='nav'>
    <view bindtap='search' data-type='酒店' class='nav-but'>酒店</view>
    <view bindtap='search' data-type='美食' class='nav-but'>美食</view>
    <view bindtap='search' data-type='书店' class='nav-but'>书店</view>
    <view bindtap='search' data-type='商城' class='nav-but'>商城</view>
  </view>
</view>
<view class='info'>
  <navigator wx:for="{{perimeter}}" url="../routes/routes?latitude={{startlat}}&&longitude={{startlng}}&&latitude2={{item.location.lat}}&&longitude2={{item.location.lng}}"  class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" wx:key="navigate">
      <view class="result">
        <view class="result-title">{{item.title}}</view>
          <view class="resul-desc">位置：{{item.address}} </view> 
      </view>
  </navigator>
</view>

需要使用的index.js的代码：

var QQMapWX = require('../blis/qqmap-wx-jssdk');
var qqmapsdk;
var startlat;
var startlng;
 
Page({
  data: {
    height:"400",
    perimeter:[]
  },
  onLoad: function (options) {
    wx.getLocation({
      type: 'wgs84',
      success(res){
        console.log(res)
      }
    })
    var address = '常德市鼎城区';
    console.log("options="+options)
    console.log(options)
    console.log(address)
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'F2WBZ-ESYKV-HP5PR-5BVZF-K3VIQ-4SFHR'
    });
    this.addressGeocoder(address);
  },
  search:function(e){
    var _this = this;
    var a = e.target.dataset.type;
    //console.log("a="+a);
    _this.nearby_search(a);
  },
  //根据地址转为经纬度
  addressGeocoder:function(address){
    var _this = this;
    console.log("执行到这里来了！")
    qqmapsdk.geocoder({
      address:address,
      success:function(res){
        console.log("res="+res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        _this.setData({
          markers:[{
            id:1,
            title:res.title,
            latitude:latitude,
            longitude:longitude,
            iconPath:'/images/navi.png',
            width:20,
            height:20
          }],
          poi:{
            latitude:latitude,
            longitude:longitude
          },
          startlat:latitude,
          startlng:longitude
        });
      },
       fail:function(error){
        console.error("error="+error);
         console.log(error)
      },
      complete:function(res){
        console.log("complete="+res);
      }
    })
  },
  //周边地点搜索
  nearby_search:function(keyword){
    var _this = this;
    qqmapsdk.search({
      keyword:keyword,
      location:_this.data.poi,
      success:function(res){
        var obj = JSON.stringify(res);
        console.log("obj="+obj);
        var mks = [];
        for(var i = 0; i <res.data.length; i++){
          mks.push({
            title:res.data[i].location.lat,
            id:i,
            //id:res.data[i].id,
            latitude:res.data[i].location.lat,
            longitude:res.data[i].location.lng,
            iconPath:"/images/navi.png",
            width:20,
            height:20,
            callout:{
              content: res.data[i].title,
              color:'#000',
              display:'ALWAYS'
            }
          })
        }
        _this.setData({
          //markers:mks
          markers:mks,
          perimeter:res.data
        })
      },
      fail:function(res){
        console.log("fail="+res);
      },
      complete:function(res){
        console.log("complete="+res);
      }
 
    });
  },
  gotoHere:function(res){
    var obj = JSON.stringify(res);
    console.log("gotoHere="+obj);
  },
  onShow: function () {
 
  }
})