微信小程序地图步骤

简介: 微信小程序地图步骤

微信小程序中的地图Marker可以用来标记地图上的位置,并可以设置图标、标签等信息

因为微信小程序自带的map组件 不用太麻烦 只需要获取自己想要的数据填到对应的位置即可

1.在wxml文件中添加地图组件和Marker标签:

<view class="map-container">
  <map id="map" longitude="116.397390" latitude="39.908860" 
    scale="14" markers="{{ markers }}" show-location>
  </map>
</view>

2.在js文件中定义Marker:

Page({
  data: {
    markers: [{
      iconPath: "/images/marker.png",
      id: 0,
      latitude: 39.908860,
      longitude: 116.397390,
      width: 30,
      height: 30,
      label: {
        content: "这里是标签",
        color: "#ffffff",
        fontSize: 12,
        borderRadius: 5,
        bgColor: "#000000",
        padding: 5
      }
    }]
  }
})

markers数组中定义了一个Marker,包含了图标iconPath、位置坐标latitude和longitude、宽度width和高度height、以及标签label信息  可以根据自己想要的样式进行调整 希望可以帮助到大家!

相关文章
|
2月前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
1225 58
|
2月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
80 0
|
5月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
103 1
|
5月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
188 4
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
337 0
|
4月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
77 0
|
6月前
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
295 0
|
25天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
381 7
|
25天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
447 1
下一篇
无影云桌面