微信小程序引入地图

微信小程序引入地图

复制代码
<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(经度)两个属性,可以根据需要进行进一步的处理。

相关推荐
八了个戒11 分钟前
「数据可视化 D3系列」入门第七章:坐标轴的使用
前端·javascript·数据可视化·canvas·d3
NON-JUDGMENTAL14 分钟前
HTML:网页的骨架 — 入门详解教程
前端·html
muyouking1115 分钟前
0.深入探秘 Rust Web 框架 Axum
开发语言·前端·rust
八了个戒18 分钟前
「数据可视化 D3系列」入门第二章:选择器与数据绑定
前端·javascript·数据可视化·canvas·d3
muyouking1119 分钟前
3.Rust + Axum 提取器模式深度剖析
前端·rust·github
若简31 分钟前
cooke知识整理
前端
暖阳_xm31 分钟前
使用css实现动态loading
前端·css
onejason32 分钟前
利用 PHP 爬虫按关键字搜索淘宝商品
前端·php
markzzw33 分钟前
浏览器插件钱包(三) - 创建钱包
前端·web3·区块链
curdcv_po34 分钟前
好厉害🙇‍♂️怎么现在ai一个字一个字蹦出来,好像人打字喔
前端·chatgpt·ai编程