微信小程序引入地图

简介: 微信小程序引入地图

微信小程序引入地图

<map  longitude="{{markers[0].longitude}}" scale="11" latitude="{{markers[0].latitude}}" markers="{{markers}}" style="width: 100%; height:81vh;"></map>

1.可以直接在页面设置map标签显示出地图,然后通过设置其大小控制地图显示面积。

2.可以通过scale改变地图缩放级别和longitude和latitude属性设置地图中心的经纬度。

3.可以通过markers属性设置地图标点

引入的数组必须是一下格式:

markers: [{
      id: 1,
      longitude: 113.324520,
      latitude: 23.10229,
      title: 'Marker 1',
      iconPath: '/images/marker.png',
      width: 30,
      height: 30
    }]

如果是从接口获取的数据需要处理数据格式不正确可以这样设置

const  newArray  =  res.data.tab.map(item  =>  {
return  {
id:item.id,
name:item.name,
longitude:  item.lng,
latitude:  item.lat,
iconPath:  './image/33.png',
width:  30,
height:  30,
};
});

如果微信小程序中要获取当前地理位置,可以使用微信小程序的API接口 wx.getLocation()。以下是获取当前地理位置的代码示例:

// 在Page对象的onLoad方法中添加以下代码
onLoad: function() {
  // 获取当前地理位置
  wx.getLocation({
    type: 'wgs84', // 返回坐标类型,可选值:'wgs84'、'gcj02',默认为'wgs84'
    success: function(res) {
      var latitude = res.latitude; // 纬度
      var longitude = res.longitude; // 经度
      console.log(latitude, longitude); // 打印经纬度信息
      // 在这里可进行后续操作,如发送请求获取附近的地点等
    }
  });
}

上述代码中,通过调用wx.getLocation()方法来获取当前地理位置信息。其中,type参数表示返回的坐标类型,可选值为’wgs84’(GPS坐标)和’gcj02’(国测局坐标),默认为’wgs84’。在success回调函数中,可以获取到latitude(纬度)和longitude(经度)两个属性,可以根据需要进行进一步的处理。

相关文章
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
236 0
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
630 1
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
1243 4
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
3180 1
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
2093 0
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
725 0
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
小程序 JavaScript 定位技术
微信小程序地图控件Map的使用
微信小程序地图控件Map的使用
478 0
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
10月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。

热门文章

最新文章