微信小程序 map地图(轨迹)

news2024/11/25 4:38:45

allMarkers效果图

 

废话少说直接上马(最后是我遇到的问题)

cover-view是气泡弹窗,可以自定义弹窗,要配合js:customCallout,如果是非自定义的话:callout(可以修改颜色、边框宽度、圆角、边距等)有些属性我没加,还是看官方文档(虽然写的。。)

<!--index.wxml-->
<view class="page-section page-section-gap">
  <map id="myMap" style="width: 100%; height: 450px;" latitude="{{latitude}}" longitude="{{longitude}}" bindmarkertap="markertap" bindcallouttap="callouttap" bindlabeltap="labeltap" markers="{{markers}}" scale="16" polyline="{{polyline}}">
    <cover-view slot="callout">
      <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
        <cover-view class="customCallout" marker-id="{{item}}">
          <!-- <cover-image class="icon" src="../img/point.png"></cover-image> -->
          <cover-view class="content">
            <view style="background-color: #fff;">
              <view>设备名称</view>
              <view>设备名称</view>
              <view>设备名称</view>
            </view>
          </cover-view>
        </cover-view>
      </block>
    </cover-view>
  </map>
  <button bindtap="addMarker" class="page-body-button" type="primary">添加marker</button>
</view>

字段说明:

allMarkers:模拟位置点

markers:地图显示位置点

polyline:地图点连线位置点

mapCtx:初始化地图

 customCallout:气泡自定义使用(建议使用方法)

callout:气泡简易使用

const normalCallout = {
  id: 1,
  latitude: 23.098994,
  longitude: 113.322520,
  iconPath: '../img/point.png',
  callout: {
    content: '文本内容',
    color: '#ff0000',
    fontSize: 14,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: '#000000',
    bgColor: '#fff',
    padding: 5,
    display: 'ALWAYS',
    textAlign: 'center'
  },
}

const customCallout1 = {
  id: 2,
  latitude: 23.097994,
  longitude: 113.323520,
  iconPath: '../img/point.png',
  callout: {
    content: '文本内容',
    color: '#ff0000',
    fontSize: 14,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: '#000000',
    bgColor: '#fff',
    padding: 5,
    display: 'ALWAYS',
    textAlign: 'center'
  },
}

const customCallout2 = {
  id: 3,
  latitude: 23.096994,
  longitude: 113.324520,
  iconPath: '../img/point.png',
  customCallout: {
    anchorY: 10,
    anchorX: 0,
    display: 'ALWAYS',
  },
}

const customCallout3 = {
  id: 4,
  latitude: 23.095994,
  longitude: 113.325520,
  iconPath: '../img/point.png',
  customCallout: {
    anchorY: 0,
    anchorX: 20,
    display: 'ALWAYS',
  },
}

const allMarkers = [normalCallout, customCallout1, customCallout2, customCallout3]

Component({
  data: {
    mapCtx: '',
    latitude: 23.098994,
    longitude: 113.322520,
    customCalloutMarkerIds: '',
    markers: [],
    polyline: []
  },
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')

  },
  methods: {
    addMarker() {
      var list = []
      var that = this
      for (const i in allMarkers) {
        var point = {
          latitude: allMarkers[i].latitude,
          longitude: allMarkers[i].longitude
        }
        list.push(point)
      }
      console.log(this.data.polyline.points)
      this.setData({
        polyline:[{
          points: list,
          color: '#58c16c',
          width: 6,
          borderColor: '#2f693c',
          borderWidth: 1,
          arrowLine: true
        }],
        markers: allMarkers,
        customCalloutMarkerIds: [2, 3, 4],
      })
    },

  },
})

xml和js直接复制就可以运行了没有其他配置

所遇到问题:

1.初始化时我在data直接给markers和polyline赋值了,导致不能显示气泡,解决是加了一个按钮等map初始化结束在添加点就正常了

2.marker-id必须是number

3.我没写,但是我感觉自定义气泡是可以加点击事件的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/855919.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Zookeeper》源码分析(五)之 ServerCnxnFactory的工作原理(上)

目录 AcceptThread数据结构构造函数run() SelectorThread数据结构processAcceptedConnections()select()processInterestOpsUpdateRequests() 本文开始分析 ServerCnxnFactory的工作原理&#xff0c;按照顺序我们这样分析&#xff1a; 建立连接监听读写事件处理读写就绪的事件…

【图像去噪的滤波器】非局部均值滤波器的实现,用于鲁棒的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Selenium 自动化测试实战笔记1

1. 安装 selenium pip install selenium 3.11.0 # 安装指定版本 pip install selenium -U # 安装最新版本 pip show selenium # 查看当前版本 pip uninstall selenium # 卸载 报错解决1&#xff1a; 带上代理 pip install selenium -i http://mirrors.aliyun.com/…

C++项目:在线五子棋对战(网页版)

项目介绍 本项⽬主要实现⼀个⽹⻚版的五⼦棋对战游戏&#xff0c;其主要⽀持以下核⼼功能&#xff1a; • 用户管理:实现用户注册&#xff0c;用户登录、获取用户信息、用户天梯分数记录、用户比赛场次记录等。 • 匹配对战:实现两个玩家在网页端根据天梯分数匹配游戏对⼿&…

图的遍历之 深度优先搜索和广度优先搜索

深度优先搜索的图文介绍 1. 深度优先搜索介绍 图的深度优先搜索(Depth First Search)&#xff0c;和树的先序遍历比较类似。 它的思想&#xff1a;假设初始状态是图中所有顶点均未被访问&#xff0c;则从某个顶点v出发&#xff0c;首先访问该顶点&#xff0c;然后依次从它的各…

亚马逊 EC2服务器下部署java环境

1. jdk 1.8 安装 1.1 下载jdk包 官网 Java Downloads | Oracle tar.gz 包 下载下来 1.2 本地连接 服务器 我用的是亚马逊的ec2 系统是 ubuntu 的 ssh工具是 Mobaxterm , 公有dns 创建实例时的秘钥 链接 Mobaxterm 因为使用的 ubuntu 所以登录的 名称 就是 ubuntu 然后 …

Leetcode每日一题:2681. 英雄的力量(2023.8.1 C++)

目录 2681. 英雄的力量 题目描述&#xff1a; 实现代码与解析&#xff1a; 数学规律 原理思路&#xff1a; 2681. 英雄的力量 题目描述&#xff1a; 给你一个下标从 0 开始的整数数组 nums &#xff0c;它表示英雄的能力值。如果我们选出一部分英雄&#xff0c;这组英雄的…

【kubeadm的配置安装】

目录 一、环境准备二、所有节点安装docker三、部署K8S集群1、查看镜像2、初始化kubeadm方法一&#xff1a;1、修改配置文件2、在线拉取镜像3、初始化 master 方法二、 3、设定kubectl4、所有节点部署网络插件flannel 四、部署 Dashboard1、在 master01 节点上操作 master&#…

分布式事务面试题

一、事务简介 事务(Transaction)是操作数据库中某个数据项的一个程序执行单元(unit)。 事务应该具有4个属性&#xff1a;原子性、一致性、隔离性、持久性。这四个属性通常称为ACID特性。 1.1、名词解释 事务&#xff1a;事务是由一组操作构成的可靠的独立的工作单元&#x…

【前端】Vue生命周期函数(详细讲解+中文图解)

目录 一、何为生命周期1、含义2、理解 二、生命周期定义&#xff08;官网&#xff09;1、vue22、vue3 三、生命周期图解1、vue2生命周期图解2、vue3生命周期图解 四、Vue的生命周期五、Vue2生命周期和Vue3生命周期的区别六、Vue生命周期的主要阶段以及8个周期函数1、options AP…

BM5 合并k个已排序的链表 javascript

描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a; 示例1 输入&#xff1a; [{1,2,3},{4,5,6,7}] 返回值&#xff1a; {1,2,3,4,5,6,7}示例2 输入&#xff1a; [{1,2},{1,4,5},{6}] 返回值&#xff1a; {1,1,2,4,5,6}解题思路 利用两个…

Python numpy中的correlate相关性详解

看代码看见这个方法&#xff0c;记录一下&#xff0c;这个是人家官网的链接np.correlate 云里雾里的&#xff0c;其实就是两个数组点乘&#xff0c;不同模式就是错位点乘&#xff0c;直接看代码 a是原本的数组&#xff0c;v就是滤波器&#xff0c;对应相乘 import numpy as …

分布式 - 消息队列Kafka:Kafka生产者发送消息的3种方式

文章目录 1. Kafka 生产者2. kafaka 命令行操作3. Kafka 生产者发送消息流程4. Kafka 生产者发送消息的3种方式1. 发送即忘记2. 同步发送3. 异步发送 5. Kafka 消息对象 ProducerRecord 1. Kafka 生产者 Kafka 生产者是指使用 Apache Kafka 消息系统的应用程序&#xff0c;它们…

什么是React?React与VU的优缺点有哪些?

什么是React&#xff1f;什么是VUE&#xff1f; 维基百科上的概念解释&#xff0c;Vue.js是一个用于创建用户界面的开源MVVM前端JavaScript框架&#xff0c;也是一个创建单页应用的Web应用框架。Vue.js由尤雨溪&#xff08;Evan You&#xff09;创建&#xff0c;由他和其他活跃…

【Go语言】Golang保姆级入门教程 Go初学者chapter3

Go语言 第三章 运算符 下划线“_”本身在Go中一个特殊的标识符&#xff0c;成为空标识符。可以代表任何其他的标识符&#xff0c;但是他对应的值就会被忽略 仅仅被作为站维度使用&#xff0c; 不能作为标识符使用 因为Go语言中没有private public 所以标记变量首字母大写代表其…

Pytorch量化之Post Train Static Quantization(训练后静态量化)

使用Pytorch训练出的模型权重为fp32&#xff0c;部署时&#xff0c;为了加快速度&#xff0c;一般会将模型量化至int8。与fp32相比&#xff0c;int8模型的大小为原来的1/4, 速度为2~4倍。 Pytorch支持三种量化方式&#xff1a; 动态量化&#xff08;Dynamic Quantization&…

最大异或对

如果你觉得这篇题解对你有用&#xff0c;可以点个赞或关注再走呗&#xff0c;谢谢你的关注~ 分析 最大异或对 (1)最大异或对是运用trie树存储十进制数对应的二进制数的每一位。 (2)再根据trie树的每一位进行搜索查找&#xff0c;严格满足不同的数异或为1&#xff0c;相同的异…

【业余小练习】交互式网格自定义增删改(进行中)

学习SQL和PLISQL数据类型的区别和应用场景 Oracle plsql 基础篇1 数据类型以及流程控制_bb_tarek的博客-CSDN博客https://blog.csdn.net/bb_tarek/article/details/17555713?ops_request_misc&request_id&biz_id102&utm_termplsql%E5%9F%BA%E6%9C%AC%E6%95%B0%E6…

Unlikely argument type for equals(): String seems to be unrelated to T

Unlikely argument type for equals(): String seems to be unrelated to Integer Unlikely argument type for equals(): String seems to be unrelated to Date 多余代码

java代码审计9之XXE

文章目录 1、简介2、 java XXE审计函数3、漏洞3.1、正常的业务3.2、有回显的情况3.3、无回显的情况3.4、修复 之前的文章&#xff0c; php代码审计9之XXE 1、简介 XXE&#xff08;XML外部实体注⼊&#xff0c;XML External Entity) &#xff0c;在应⽤程序解析XML输⼊时&…