微信小程序学习-组件Map-地图初始定位

最新推荐文章于 2024-08-12 10:46:36 发布

金三亲

最新推荐文章于 2024-08-12 10:46:36 发布

阅读量1.4k

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_43419705/article/details/102940642

版权

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

3 篇文章

订阅专栏

本文介绍在小程序中使用地图组件的方法，包括添加地图、调整显示范围及自动定位至用户位置。通过修改样式和js代码实现地图全屏显示及自动获取用户坐标。

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

学习了如何添加地图组件，如何自动获取地图的初始位置，初步理解小程序的生命周期与传值。

一添加Map
1 新添加一个页面，取名为map
在这里插入图片描述
2 打开map.wxml添加map标签，添加类格式

<map class="map_set"/>

3 打开map.wxss，编写类格式

.map_set{
  width: 100%;
}

编译后可以看到一部分的小地图，地点北京朝阳区
在这里插入图片描述

二放大地图
修改map.wxss

/* 先让page铺满界面 */
page{
  height: 100%;
}
.map_set{
  width: 100%;
/* 然后让map铺满界面 */
  height: 100%;
}

编译可以看到地图已经铺满整个小程序界面，地点北京朝阳
在这里插入图片描述
三修改定位
1 打开map.js

Page({
  /*页面的初始数据*/
  data: {
  /*添加两个全局变量*/
    init_latitude: 0,
    init_longitude: 0
  },

  /*生命周期函数--监听页面加载*/
  onLoad: function (options) {
  /*捕获当前page*/
    var that=this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        that.setData({
        /*赋值*/
          init_latitude: res.latitude,
          init_longitude: res.longitude
        })
      }
    })
  },
})

2 修改map.wxml

<map 
class="map_set" 
show-location="true" /*显示当前位置*/
latitude="{{latitude}}" /*传值*/
longitude="{{longitude}}"/>

编译后画面跳转到当前地区
在这里插入图片描述