【愚公系列】《微信小程序与云开发从入门到实践》021-map(地图)组件及应用

愚公搬代码

已于 2024-11-17 00:22:45 修改

阅读量5.3w

点赞数 25

分类专栏：愚公系列-书籍专栏文章标签：小程序微信小程序

于 2024-09-08 18:50:42 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/142031093

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
🚀一、map(地图)组件及应用
- 🔎1.`map` 组件及应用
- - 🦋1.1 示例：基础地图展示
  - 🦋1.2 示例：添加标记点

🚀前言

在现代应用开发中，地图功能的实现已成为提升用户体验的重要一环。作为一款流行的应用框架，微信小程序提供了强大的地图组件（map），使开发者能够轻松地集成地图功能，展示地理位置信息，并实现丰富的交互体验。无论是定位用户位置、搜索附近商家，还是规划行程路线，地图组件都能为用户提供更直观的服务。

本篇文章将深入解析微信小程序的地图组件，包括其基本用法、配置项、以及如何在实际项目中灵活应用。我们将通过实例演示，帮助你理解地图组件的各种功能，如标记点、绘制路线、获取用户当前位置等，确保你能够掌握地图组件的使用技巧。

无论你是刚接触小程序开发的新手，还是希望提升项目功能的资深开发者，这篇文章都将为你提供实用的见解和代码示例。让我们一起探索微信小程序的地图组件，发掘其无限可能，打造出更具吸引力和实用性的应用吧！

🚀一、map(地图)组件及应用

🔎1.`map` 组件及应用

map 组件提供了强大的地图功能，除了基础的地图展示外，还支持添加导航路径、标记点等覆盖物。可以通过 markers 属性向地图中添加标记点。

🦋1.1 示例：基础地图展示

在示例工程的 pages 文件夹下，新建一组命名为 mapDemo 的页面文件，编写如下代码：

<!-- pages/mapDemo/mapDemo.wxml -->
<map style="width: 100%; height: 400px;"
     longitude="121.5" latitude="31.2" scale="10"></map>

longitude：设置地图中心位置的经度。
latitude：设置地图中心位置的纬度。
scale：设置地图缩放级别。

运行代码后，效果是地图的中心点会显示在经纬度（121.5, 31.2）的位置，初始缩放级别为 10。
在这里插入图片描述

🦋1.2 示例：添加标记点

通过 map 组件的 markers 属性，可以向地图中添加标记点。在 mapDemo.wxml 文件中添加以下代码：

<!-- pages/mapDemo/mapDemo.wxml -->
<map style="width: 100%; height: 400px;"
     longitude="121.5" latitude="31.2" scale="10"
     markers="{
    {markers}}"></map>

在 mapDemo.js 文件中，添加如下测试数据：

// pages/mapDemo/mapDemo.js
Page({
   
  data: {
   
    markers:

最低0.47元/天解锁文章