微信小程序开发MAP（地图）

微信小程序开发MAP（地图）教程

最新推荐文章于 2025-10-28 11:44:26 发布

原创

最新推荐文章于 2025-10-28 11:44:26 发布 · 1.7w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序开发MAP

本文介绍了如何在微信小程序中创建并配置MAP（地图）控件。首先，建议读者了解微信小程序开发的官方文档。接着，通过三步实现地图功能：创建项目、编写WXML文件代码展示地图及定位图标，并在JS文件中处理地图的宽高和定位。最后展示了实际运行效果，并提示了图标路径的使用方式。

在创建MAP（地图）前，请各位小伙伴们认真的去了解微信小程序开发的说明。https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map

了解完MAP（地图）里的属性之后，接下来我们就来创建一个简单的MAP（地图）控件。

第一步：肯定是创建项目、起项目名、项目地址

PS:我这里以index的文件为名

第二步：我们来写 index.wxml 文件的代码

WXML文件代码：

WXML文件的代码写好之后，就要来进行第三步了。

第三步：写 index.js 文件的代码

var app = getApp()

Page({
data: {
map_width: 380
, map_height: 380
}
//show current position
, onLoad: function (options) {
console.log(options.schedule_id);
var that = this;
// 获取定位，并把位置标示出来
that.setData({
longitude: 113.3245