微信小程序云开发实时地图显示

最新推荐文章于 2025-02-16 20:44:42 发布

原创最新推荐文章于 2025-02-16 20:44:42 发布 · 1.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#定位 #小程序

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

8 篇文章

订阅专栏

本文介绍了如何使用微信开发者工具开发小程序，实现获取用户地理位置并显示在地图上，通过调整scale控制精度。关键代码和权限设置详述其中。

编写一个微信小程序帮助显示当前实时地理位置。

开发平台：微信开发者工具

获取经纬度的代码字段:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9xKm2ko-1611989214467)(https://cdn.acwing.com/media/article/image/2021/01/30/39383_5e5ce80962-getl.png)]

在app.json页面添加permission字段
创建location页面

真机调试效果（scale为20）：

可见此时精度已经到了可以显示街边店铺。

可以通过修改scale的大小来改变显示的精度

####完整代码：

app.json

{
  "pages": [
    "pages/location/location"   //根据自己的需求添加其他页面
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "实时地图显示",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {               //根据个人需求添加其他的tabBar
    "selectedColor": "#d81e06",
    "backgroungColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/location/location",
        "iconPath": "images/tab/locate.png",
        "selectedIconPath": "images/tab/locateHL.png",
        "text": "定位"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "sitemapLocation": "sitemap33.json"
}

location.js

var app = getApp()
Page({
  onLoad: function () {
    console.log('地图定位！')
    var that = this
    wx.getLocation({
        type: 'gcj02', //返回可以用于wx.openLocation的经纬度
        success: function (res) {
            var latitude = res.latitude; 
            var longitude = res.longitude; 
            wx.openLocation({
              latitude:latitude,
              longitude:longitude,
              scale:20
            })
        }
    });
  }
})

location.json

{
    "navigationBarTitleText": "当前地图位置"
}

location.wxml

#map {
  padding: 40rpx;
}