微信小程序-地图组件(map)的使用

最新推荐文章于 2025-07-22 16:29:04 发布

周先森爱吃素

最新推荐文章于 2025-07-22 16:29:04 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序地图使用

本文链接：https://blog.youkuaiyun.com/zhouchen1998/article/details/82080368

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍微信小程序地图的使用。微信小程序地图使用高德地图api，可在高德官方坐标拾取器获取示例坐标。在组件中放map组件，要注意原生组件使用限制，组件经纬度是火星坐标系。还介绍了wxml和js文件中相关属性设置，更多属性可参考官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信开发文档给出的信息来看，它使用的是高德地图的api。
我们来到高德地图的官方坐标拾取器界面，得到示例坐标。

我们在组件中放上map组件，这里提及一下，两个官方要求的注意点：

请注意原生组件使用限制。
tip: map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02。

wxml文件

<view class="container">
  <map id="map" longitude="120.640509" latitude="31.304899" scale="14" markers="{{markers}}" style="width:100%;height:300px;"></map>
</view>

longitude：中心点经度，Number类型

latitude：中心点纬度，Number类型

scale：缩放级别，取值范围5-18

markers：标记点，js文件定义，包含经纬度等属性

style：组件样式

js文件

Page({
  data: {
    markers: [{
      iconPath: "http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png",
      id: 0,
      longitude: 120.640509,
      latitude: 31.304899,
      width: 19,
      height: 33
    }]
  }
})

iconPath：标记图标路径

id：标记点id，建议每个标记点一个

longitude：经度

latitude：纬度

width：宽度

height：高度

还可以设置其他属性，见官方参考文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

效果图：