当前位置: 首页 > news >正文

微信小程序map视野发生改变时切换定位点

<!--地图-->
<view><map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}"scale="{{scale}}" markers="{{markers}}" controls="{{controls}}" bindmarkertap="markertap" show-location="{{true}}" bindregionchange="regionchange"></map>
</view>
<view class="xzwzxx"><view class="zcwzbt">您选中的位置:</view><view class="xzwz">{{address}}</view>
</view>
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" class="dwlist"><view class="mapList"><block wx:for="{{markersList}}"><view class="{{index== iconSY ? 'dianweiList xzico' :'dianweiList'}}" bindtap='XZlist' data-rem="{{item}}"data-sy="{{index}}"><view class="mark_img"><image src="../../images/blue_location.png" class="DWimg"></image></view><view class="dwxq"><view>{{item.name}}</view><view>{{item.address}}</view></view></view></block></view>
</scroll-view>
<view class="qrxd"><button class="qdbutton" bindtap="rqxd">确认选点</button>
</view>

css

.map_container{width:100%;overflow:hidden;height: 50vh; width: 100%;}
.map{width:100%;height:100%}
.mapList{background:#fff;padding:2.5%;}
.dianweiList{ min-height: 80rpx; display: flex; align-items: center; margin-bottom: 15rpx;}
.mark_img{ width: 60rpx; text-align: center;}
.DWimg{ width:32rpx; height: 42rpx;}
.dwxq{ border-bottom: 1px #f0f1f3 solid; min-height: 80rpx; width: 100%; padding-bottom: 10rpx;}
.xzico{ color: #3370ff;}
.xzwzxx{padding-bottom: 20rpx; width: 95%; margin: 0 auto;}
.zcwzbt{ color: #333; font-weight: 600; line-height: 60rpx;}
.xzwz{ color: #666;}
.dwlist{ height: 30vh;}
.qrxd{ position: fixed; bottom: 0px;height:80rpx; background: #fff; z-index: 100; width: 100%;}
.qdbutton{border:0px;height: 70rpx; line-height:70rpx;border-radius: 70rpx;  background: #4c8cee;width:500rpx;color: #fff; font-size: 24rpx;}
.qdbutton::after{border: 0px !important;}

js

 var amapFile = require('../../utils/amap-wx.130');var key = "4f56f0e40338315d0f383f17637f5896";var markersData = [];var myAmapFun = new amapFile.AMapWX({key: key});Page({data: {latitude: 38.02604953342014, // 初始纬度longitude: 114.39047607421875, // 初始经度scale: 16, // 初始缩放级别markers: [{id: 0,latitude: 38.02604953342014,longitude: 114.39047607421875,width: 20,height: 30}], // 标记点controls: [], // 地图控件},onLoad: function (options) {var that = this;//获取当前位置  this.setData({//  latitude: options.lat,//  longitude: options.lon,latitude: 38.02604953342014,longitude: 114.39047607421875,});that.showMap(that.data.longitude, that.data.latitude);},//显示地图showMap: function (longitude, latitude) {var that = this;let markers = [{id: 0,latitude: latitude,longitude: longitude,width: 20,height: 30}]this.setData({markers: markers,});var location = `${longitude},${latitude}`   myAmapFun.getRegeo({//如果经纬度有问题会导致不进入回调方法,从而报错location: location,success: function (e) {let csdz = e[0].regeocodeData.addressComponentlet shencz = csdz.province + csdz.city + csdz.district//成功回调that.setData({address: e[0].name, //详细地址,markersList: e[0].regeocodeData.pois,shenName: shencz});},fail: function (info) {//失败回调console.log(info)}})},markertap: function (e) {// 标记点被点击时触发的事件console.log(e.markerId);},regionchange: function (e) {let that = thisconsole.log(e)if (e.causedBy == 'drag') {let nmarkers = [{id: 1001,latitude: e.detail.centerLocation.latitude,longitude: e.detail.centerLocation.longitude,width: 20,height: 30}]that.setData({latitude: e.detail.centerLocation.latitude,longitude: e.detail.centerLocation.longitude,markers: nmarkers,})//解析经纬度that.location = `${e.detail.centerLocation.longitude},${e.detail.centerLocation.latitude}`myAmapFun.getRegeo({//如果经纬度有问题会导致不进入回调方法,从而报错location: that.location,success: function (e) {console.log(e[0])that.setData({address: e[0].regeocodeData.formatted_address, //详细地址,           iconSY: null,markersList: e[0].regeocodeData.pois});},fail: function (info) {//失败回调console.log(info)}})}}})

相关文章:

微信小程序map视野发生改变时切换定位点

<!--地图--> <view><map id"myMap" style"width: 100%; height: 300px;" latitude"{{latitude}}" longitude"{{longitude}}"scale"{{scale}}" markers"{{markers}}" controls"{{controls}}&q…...

javaweb搭配ajax和json

ajax一般用来前端界面与后端界面交互使用。数据格式一般使用json&#xff0c;优点是便于对象与字符串的转化。 1.不适用json对象封装。 jsp: <script>$.ajax({url: "/LoginServlet",data: {"name":name, "pwd":password},dataType: &qu…...

VS2022 将项目打包,导出为exe运行

我有一个在 VS2022 上开发的程序&#xff0c;基于.net 6框架, 想打包成 .exe程序&#xff0c;以在另一个没有安装VS的机器上运行&#xff0c;另一个机器是Win7系统&#xff0c;上面安装了.net 6框架。 虽然网上很多教程&#xff0c;需要安装Project Installer&#xff0c;配置A…...

【Py/Java/C++三种语言OD2023C卷真题】20天拿下华为OD笔试【DP】2023C-分班【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出 示例二输入输出 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 幼儿园两个班的小朋友在排队时混在了一起&#xff0c;每位小朋友都知道自己是否与前…...

pr模板哪个网站好?免费Pr模板视频素材下载网站 Prmuban.com

pr模板哪个网站好&#xff1f;哪里可以下载免费的pr模板视频素材&#xff0c;PR模板网&#xff08;Prmuban.com&#xff09;影视后期制作模板视频剪辑素材资源网站。 包含PR模板、PR插件、PR预设、MOGRT、LUT、转场特效、音乐素材、音效素材等&#xff0c;更好的剪辑师必备资源…...

【论文阅读】LoRA: Low-Rank Adaptation of Large Language Models

code&#xff1a;GitHub - microsoft/LoRA: Code for loralib, an implementation of "LoRA: Low-Rank Adaptation of Large Language Models" 做法&#xff1a; 把预训练LLMs里面的参数权重给冻结&#xff1b;向transformer架构中的每一层&#xff0c;注入可训练的…...

MybatisPlus的分页插件

PaginationInnerInterceptor 此插件是核心插件,目前代理了 Executor#query 和 Executor#update 和 StatementHandler#prepare 方法。 在SpringBoot环境中配置方式如下&#xff1a; /*** author giserDev* description 配置分页插件、方言、mapper包扫描等* date 2023-12-13 …...

保障网络安全:了解威胁检测和风险评分的重要性

在当今数字时代&#xff0c;网络安全问题变得愈发突出&#xff0c;而及时发现和迅速应对潜在威胁成为保障组织信息安全的首要任务。令人震惊的是&#xff0c;根据2023年的数据&#xff0c;平均而言&#xff0c;检测到一次网络入侵的时间竟然长达207天。这引起了对安全策略和技术…...

3D摄影棚布光:Set A Light 3D Studio

Set A Light 3D Studio是一款专业的灯光模拟软件&#xff0c;旨在帮助摄影师和电影制片人在电脑上进行虚拟灯光布置和场景模拟&#xff0c;以实现更加精准和高质量的拍摄效果。该软件提供了丰富的灯光和场景模型&#xff0c;支持灵活调整光源位置、强度、颜色和效果等参数&…...

#HarmonyOS:应用的包名配置--应用图标和标签配置--配置链接

配置相关 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-component-configuration-stage-0000001478340869-V2 应用的包名配置 应用需要在工程的AppScope目录下的app.json5配置文件中配置bundleName标签&#xff0c;该标签用于标识应用的唯…...

docker小白第三天

docker小白第三天 docker为什么会比虚拟机快 1、docker有着比虚拟机更少的抽象层。不需要Hypervisor实现硬件资源虚拟化&#xff0c;运行在docker容器上的程序直接使用的都是实际物理机的硬件资源&#xff0c;因此在CPU、内存利用率上docker将会在效率上有明显优势。 2、dock…...

FFmpegd的AVBSF

本章主要介绍AVBSF 文章目录 结构体定义对外函数常见的过滤器 从名字我们可以知道这是个码流过滤器&#xff0c;我们最常用的是一个叫做h264_mp4toannexb_bsf的东东 这个过滤器的作用是把h264以MP4格式的NALU转换为annexb&#xff08;0x000001&#xff09; const AVBitStreamF…...

深圳三男子写字楼内吸烟被罚,快用富维AI神器,实时监控防火灾

最近&#xff0c;在深圳&#xff0c;一专项控烟督查组在福田区新华保险大厦发现三名男子在写字楼内楼道违法吸烟&#xff0c;并对其进行了现场处罚。根据《控烟条例》&#xff0c;这类室内区域严禁吸烟&#xff0c;但人们往往忽视这一规定&#xff0c;从而引发潜在的安全风险。…...

有哪些已经上线的vue商城项目?

前言 下面是一些商城的项目&#xff0c;需要练手的同学可以挑选一些来练&#xff0c;废话少说&#xff0c;让我们直接开始正题~~ 1、newbee-mall-vue3-app 是一个基于 Vue 3 和 TypeScript 的电商前端项目&#xff0c;它是 newbee-mall 项目的升级版。该项目包含了商品列表、…...

Nginx服务器配置SSL证书

本文将全面介绍如何在Nginx或Tengine服务器配置SSL证书&#xff0c;具体包括下载和上传证书文件&#xff0c;在Nginx上配置证书文件、证书链和证书密钥等参数&#xff0c;以及安装证书后结果的验证。成功配置SSL证书后&#xff0c;您将能够通过HTTPS加密通道安全访问Nginx服务器…...

【JVM从入门到实战】(六)类加载器的双亲委派机制

一、双亲委派机制 在Java中如何使用代码的方式去主动加载一个类呢&#xff1f; 方式1&#xff1a;使用Class.forName方法&#xff0c;使用当前类的类加载器去加载指定的类。 方式2&#xff1a;获取到类加载器&#xff0c;通过类加载器的loadClass方法指定某个类加载器加载。 …...

SpringCloud面试题及答案(最新50道大厂版,持续更新)

在Java开发中&#xff0c;Spring Cloud作为微服务架构的关键组成部分&#xff0c;为了帮助广大Java技术爱好者和专业开发人员深入理解Spring Cloud&#xff0c;本文《SpringCloud面试题及答案&#xff08;最新50道大厂版&#xff0c;持续更新&#xff09;》提供了最前沿、最实用…...

Next.js 的设计理念

Next.js 的设计理念&#xff1a;简洁、强大与高效 Next.js 是一个流行的 React 框架&#xff0c;由 Vercel 公司开发。它的设计理念是简洁、强大和高效&#xff0c;这种理念贯穿于 Next.js 的所有功能中。下面我们将深入探讨这三个设计理念。 简洁 Next.js 的一个核心设计理…...

26、文件包含

文章目录 一、文件包含1.1 概念1.2 PHP文件包含原理1.3 文件包含重要函数1.4 文件包含利用条件 二、文件包含漏洞利用2.1 文件包含分类2.2 常见敏感文件2.3 包含Apache日志文件2.4 常见中间件的日志路径2.5 包含其他日志文件2.5.1 SSH日志文件2.5.2 Session文件 三、PHP封装伪协…...

飞天使-linux操作的一些技巧与知识点4-ansible常用的技巧,配置等

文章目录 ansible配置文件的优先级尝试开始进行操作ansible常用模块ansible 的playbook示例安装phpplaybook中变量的引用 ansible yum install -y ansible 测试是否可用 ansible localhost -m ping /etc/ansible/ansible.cfg &#xff1a;主配置文件&#xff0c;配置 ansible…...

从零构建可定制对话系统:模块化架构与RAG实战指南

1. 项目概述&#xff1a;从零构建一个可定制的对话系统最近在折腾一个挺有意思的东西&#xff0c;我把它叫做“定制化聊天系统”。起因很简单&#xff0c;市面上现成的聊天机器人&#xff0c;无论是开源的还是商业的&#xff0c;总感觉差了那么点意思。要么是功能太臃肿&#x…...

如何免费高效优化电脑性能:UXTU终极调优指南

如何免费高效优化电脑性能&#xff1a;UXTU终极调优指南 【免费下载链接】Universal-x86-Tuning-Utility Unlock the full potential of your Intel/AMD based device. 项目地址: https://gitcode.com/gh_mirrors/un/Universal-x86-Tuning-Utility Universal x86 Tuning…...

Qdrant客户端库实战:从向量数据库连接到生产级应用开发

1. 项目概述&#xff1a;从向量数据库到应用落地的桥梁如果你最近在折腾大模型应用&#xff0c;或者想给自己的产品加上一个“智能大脑”&#xff0c;那你大概率绕不开一个词&#xff1a;向量数据库。简单来说&#xff0c;它就像一个能理解“意思”的超级搜索引擎&#xff0c;不…...

Apex Legends进阶指南:结构化训练框架与技能模块化拆解

1. 项目概述&#xff1a;一个面向Apex Legends玩家的成长型技能库如果你是一位《Apex Legends》的玩家&#xff0c;并且对提升自己的游戏水平有持续的热情&#xff0c;那么你很可能和我一样&#xff0c;经历过一个漫长的摸索期。从最初落地成盒&#xff0c;到逐渐熟悉地图、枪械…...

ARM Neoverse-V3架构解析与性能优化实战

1. ARM Neoverse-V3架构概览作为Arm公司面向基础设施领域的最新处理器IP&#xff0c;Neoverse-V3代表了当前服务器级处理器的顶尖设计水平。我在实际芯片开发中多次接触该架构&#xff0c;其设计哲学可概括为&#xff1a;通过精细化微架构控制实现性能与能效的完美平衡。1.1 指…...

如何3分钟快速上手企业级后台管理系统:终极配置秘籍

如何3分钟快速上手企业级后台管理系统&#xff1a;终极配置秘籍 【免费下载链接】ant-design-vue3-admin 一个基于 Vite2 Vue3 Typescript tsx Ant Design Vue 的后台管理系统模板&#xff0c;支持响应式布局&#xff0c;在 PC、平板和手机上均可使用 项目地址: https://…...

OpenClawTuto:从零构建高可靠GUI自动化脚本的工程实践指南

1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“OpenClawTuto”。光看名字&#xff0c;你可能会有点懵&#xff0c;这“OpenClaw”是啥&#xff1f;是开源爪子&#xff1f;还是某种工具&#xff1f;其实&#xff0c;这是一个围绕“OpenClaw”这个…...

MCP-Commander:让AI助手操作本地文件与命令行的智能接口

1. 项目概述&#xff1a;一个连接思维与执行的智能接口最近在折腾AI工作流的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫nmindz/mcp-commander。乍一看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但如果你正在尝试让大型语言模型&#xff08;LLM&#xf…...

保姆级教程:用STM8S207R6和FD6288T自制BLDC驱动板,从原理图到代码框架搭建

从零构建BLDC驱动板&#xff1a;STM8S207R6与FD6288T实战指南 在创客和嵌入式开发领域&#xff0c;无刷直流电机(BLDC)控制一直是兼具挑战性和实用性的热门方向。与有刷电机相比&#xff0c;BLDC电机具有高效率、长寿命和低噪音等优势&#xff0c;但驱动电路和控制系统也更为复…...

用Git和Markdown构建个人知识库:Wandercode项目实践指南

1. 项目概述&#xff1a;从“漫游代码”到个人知识管理系统的蜕变最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Wandercode”&#xff0c;直译过来就是“漫游代码”。乍一看这个标题&#xff0c;可能会让人联想到某种代码生成器或者自动化脚本工具。但当我深入探究其仓…...