微信小程序笔记 组件 map chooseLocation

news/2024/5/19 13:55:09

wxml:

<map longitude="{{marks[0].longitude}}" latitude="{{marks[0].latitude}}" scale="16" markers="{{marks}}" ></map>

<button type="primary" bindtap="chooseLocation">选择位置</button>

wxss:

map{
  width: 100%;
  height: 450rpx;
}

button{
  margin: 50rpx;
}

js:

Page({

  data: {
    marks:[
      {
        latitude:39.9087,
        longitude:116.3975,
        title:"",
        iconPath:"../../images/position1.png",
        width:30,
        height:30
      }
    ]
  },

  chooseLocation: function(){
    var that = this
    wx.chooseLocation({
      success: function(res){
        console.log(res)
        that.setData({
          marks:[
            {
              latitude:res.latitude,
              longitude:res.longitude,
              title:"我的位置",
              iconPath:"../../images/position1.png",
              width:30,
              height:30
            },
          ]
        })
      },
    })
  },

  onLoad: function (options) {

  }
})

前端效果图:
选择位置前:
在这里插入图片描述
选择位置时:
在这里插入图片描述
选择位置后:
在这里插入图片描述
后端运行结果:
在这里插入图片描述


http://www.niftyadmin.cn/n/3060255.html

相关文章

硬盘显示使用驱动器中的光盘之前需要格式化的文件恢复方法

F盘打不开使用驱动器中的光盘之前需要格式化&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;星空数据恢复软件 步骤1&#…

专访俞岳:华为如何构建新一代 PaaS 平台

——SDCC大会上CSDN独家专访 华为 PaaS 首席系统工程师俞岳在发表完《新一代华为 PaaS 平台助力企业 IT 全云化转型》之后&#xff0c;在 SDCC 专访间接受了 CSDN 记者的独家专访&#xff0c;他对目前企业 IT 面临的挑战以及华为新一代 PaaS 平台的进展做了详细的介绍。 华为…

微信小程序笔记 全局配置 pages、window、tabBar

关于全局配置可以在微信官方文档查到&#xff1a; 全局配置在app.json中设置。 一、pages 略。 二、window window的部分属性如下&#xff1a; 一般enablePullDownRefresh&#xff08;是否开启全局的下拉刷新&#xff09;不会在app.json中设置&#xff0c;除非所有的页面都…

HDG深圳站:不仅是一场沙龙,更是一段情怀

——一位HDG深圳站现场小编 一场沙龙&#xff0c;一次邂逅&#xff0c;一段情怀 12月24日&#xff0c;华为HDG开发者汇迎来了2016年的最后一站&#xff0c;这一站我们来到了青春洋溢的时尚之都——深圳。而在这个洒满青春的城市&#xff0c;平安夜氛围并未阻止开发者的脚步&…

MySQL 笔记 - 索引优化

写在前面 这篇文章是《高性能 MySQL》第五章的读书笔记以及总结~旨在帮助我自己梳理并总结书中的知识点和内容~同时也为一些懒得看书的小伙伴提供一个提取好的知识点~觉得水的朋友烦请关闭哟 巧妙的使用 Explain 看一条 SQL 语句的性能&#xff0c;可以使用 explain 关键字查看…

微信小程序笔记 前端 display的三种值:inline、block、inline-block

display有三种值&#xff1a;inline、block、inline-block 有篇文章是这么说的&#xff1a; 简单来说&#xff0c;就是&#xff1a; inline&#xff1a;宽度、高度、边距不可控制&#xff08;宽度、高度就是文本的宽度、高度&#xff09;&#xff1b;不独占一行 block&#xf…

算法Day60 | 84.柱状图中最大的矩形,刷题总结

Day60 84.柱状图中最大的矩形刷题总结 84.柱状图中最大的矩形 题目链接&#xff1a;84.柱状图中最大的矩形 遍历每个元素&#xff0c;找到左右元素小于当前元素的&#xff0c;以左右元素间的区间&#xff08;左开右开区间&#xff09;所围成的面积中的最大值。 数组尾部加一个…

微信小程序笔记 前端 view的一些属性

可以查看微信官方文档&#xff1a; 简单示例&#xff1a; wxml&#xff1a; <view class"box" hover-class"boxHover" hover-start-time"100" hover-stay-time"200">test</view>wxss&#xff1a; .box{width: 100rpx;h…