微信小程序地图案例

微信小程序作为一种轻量级应用开发平台,广泛应用于各类服务场景中。今天我们将通过一个实际案例,演示如何在微信小程序中实现"查看附近美食餐厅"的功能。

项目概述
我们将开发一个微信小程序,用户可以通过该程序查看自己当前位置附近的美食餐厅,并在地图上显示这些餐厅的位置。点击地图上的标记,可以查看餐厅的详细信息。

功能需求 获取用户当前位置 显示带有当前定位的地图 查询并显示附近的美食餐厅 点击餐厅标记查看餐厅详情 开发步骤

  1. 初始化项目 首先,在微信开发者工具中创建一个新的小程序项目,并配置好基本文件结构:
  • pages/
    • index/
      • index.wxml
      • index.js
      • index.wxss
      • index.json
    • restaurant/
      • restaurant.wxml
      • restaurant.js
      • restaurant.wxss
      • restaurant.json
  • cloudfunctions/
    • getNearbyRestaurants/
      • index.js
      • package.json
  • app.json
  • app.js
  • app.wxss
  1. 配置路由 (app.json)
    在 app.json 中添加页面路径配置:

json

java 复制代码
{
  "pages": [
    "pages/index/index",
    "pages/restaurant/restaurant"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "附近美食",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}
  1. 创建主页界面 (index.wxml)
    在 pages/index/index.wxml 中,我们将使用地图组件来展示地图,并添加一个按钮用于获取附近餐厅:

xml

html 复制代码
<view class="container">
  <map id="map" 
       longitude="{{longitude}}" 
       latitude="{{latitude}}" 
       show-location 
       markers="{{markers}}" 
       bindmarkertap="onMarkerTap"
       style="width: 100%; height: 500px;">
  </map>
  <button bindtap="getNearbyRestaurants">查看附近美食</button>
</view>
  1. 实现主页逻辑 (index.js)
    在 pages/index/index.js 中,我们需要实现获取当前位置和查询附近餐厅的功能:

javascript

javascript 复制代码
Page({
  data: {
    latitude: 0,
    longitude: 0,
    markers: []
  },
  
  onLoad: function() {
    this.getLocation();
  },
  
  getLocation: function() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        });
        this.getNearbyRestaurants(); // 自动加载附近餐厅
      },
      fail: () => {
        wx.showToast({
          title: '无法获取地理位置',
          icon: 'none'
        });
      }
    });
  },
  
  getNearbyRestaurants: function() {
    wx.cloud.callFunction({
      name: 'getNearbyRestaurants',
      data: {
        latitude: this.data.latitude,
        longitude: this.data.longitude
      },
      success: (res) => {
        const restaurants = res.result.data;
        const markers = restaurants.map((restaurant, index) => ({
          id: index,
          latitude: restaurant.location.latitude,
          longitude: restaurant.location.longitude,
          title: restaurant.name
        }));
        this.setData({
          markers: markers
        });
      },
      fail: (err) => {
        wx.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
        console.error(err);
      }
    });
  },
  
  onMarkerTap: function(event) {
    const markerId = event.markerId;
    const marker = this.data.markers[markerId];
    wx.navigateTo({
      url: `/pages/restaurant/restaurant?name=${marker.title}`
    });
  }
});
  1. 详情页界面 (restaurant.wxml)
    在 pages/restaurant/restaurant.wxml 中展示餐厅详情:

xml

html 复制代码
<view class="container">
  <text>餐厅名称: {{name}}</text>
</view>
  1. 详情页逻辑 (restaurant.js)
    在 pages/restaurant/restaurant.js 中实现显示餐厅名称:

javascript

javascript 复制代码
Page({
  data: {
    name: ''
  },
  
  onLoad: function(options) {
    if (options.name) {
      this.setData({
        name: options.name
      });
    }
  }
});
  1. 设置样式 (index.wxss 和 restaurant.wxss)
    用简单的CSS样式美化页面:

index.wxss

css 复制代码
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

button {
  margin-top
[好像出错了,请稍后再试。]
相关推荐
九皇叔叔10 小时前
Windows用Notepad++编辑Shell脚本:一招解决Linux执行报错问题
linux·windows·notepad++
郑叔敲代码1 天前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
white-persist6 天前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
xiecoding.cn6 天前
Notepad++下载安装图文教程(附安装包)
notepad++·notepad++下载安装·notepad++下载·notepad++安装教程·notepad++安装包·notepad++下载教程
黑客思维者9 天前
Notepad++中高危DLL劫持漏洞深度剖析
notepad++·漏洞·dll劫持
Nan_Shu_61410 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
知识分享小能手13 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
cpych15 天前
删除Notepad++关于弹窗的反动字样
notepad++
知攻善防实验室15 天前
Notepad++ 本地提权漏洞|复现|分析
测试工具·安全·网络安全·notepad++
杏花春雨江南16 天前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++