当前位置: 首页 > 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)}})}}})

相关文章:

  • 案例055:基于微信小程序的四六级词汇
  • 服务器被DDOS攻击如何用高防ip去防护?
  • 小程序开发实战案例四 | 小程序标题栏如何设置
  • 微信小程序:布局样式
  • Python实现多种图像锐化方法:拉普拉斯算子和Sobel算子
  • WPF-一个简单登录界面
  • 跨境电商如何利用跨境客服软件提升销售额
  • 使用FiscoBcos的Go-SDK【1:配置go环境】
  • hive数据仓库工具
  • 华为数通---配置基本QinQ示例
  • 物联网在能源管理中的应用——青创智通工业物联网解决方案
  • js 原型 和 原型链
  • 【ProcessOn】流程图咏道图Axure自定义元件使用----含流程图案例
  • 【delphi11】delphi基础探索【二、 Delphi 的基本语法:变量声明、数据类型、控制语句】
  • 深入解析Freemarker模板引擎及其在Spring Boot中的高级整合
  • Angular数据绑定机制
  • Github访问慢解决办法
  • JavaScript的使用你知道几种?(上)
  • Redis 懒删除(lazy free)简史
  • WordPress 获取当前文章下的所有附件/获取指定ID文章的附件(图片、文件、视频)...
  • 阿里云应用高可用服务公测发布
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 高程读书笔记 第六章 面向对象程序设计
  • 诡异!React stopPropagation失灵
  • 技术胖1-4季视频复习— (看视频笔记)
  • 你真的知道 == 和 equals 的区别吗?
  • 爬虫模拟登陆 SegmentFault
  • 区块链将重新定义世界
  • 让你的分享飞起来——极光推出社会化分享组件
  • 新版博客前端前瞻
  • 用mpvue开发微信小程序
  • 在Unity中实现一个简单的消息管理器
  • # 学号 2017-2018-20172309 《程序设计与数据结构》实验三报告
  • #include
  • (07)Hive——窗口函数详解
  • (4)logging(日志模块)
  • (html5)在移动端input输入搜索项后 输入法下面为什么不想百度那样出现前往? 而我的出现的是换行...
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (翻译)terry crowley: 写给程序员
  • (附源码)php新闻发布平台 毕业设计 141646
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (一)appium-desktop定位元素原理
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (转)mysql使用Navicat 导出和导入数据库
  • (转载)从 Java 代码到 Java 堆
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .NET Framework杂记
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .NetCore项目nginx发布
  • .NET建议使用的大小写命名原则
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)