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

标题

详情

作者简介

愚公搬代码

头衔

华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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 的页面文件，编写如下代码：

longitude="121.5" latitude="31.2" scale="10">

longitude：设置地图中心位置的经度。

latitude：设置地图中心位置的纬度。

scale：设置地图缩放级别。

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

🦋1.2 示例：添加标记点

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

longitude="121.5" latitude="31.2" scale="10"

markers="{

{markers}}">

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

// pages/mapDemo/mapDemo.js

Page({

data: {

markers: [{

id: 1, // 标记点 id

latitude: 31.2, // 纬度

longitude: 121.5, // 经度

ti