最近在做一个需求,当用户放大地图到某个级别时,自动显示marker的callout标签,当小于这个缩放级别时,则隐藏callout.然而在我实现的过程中,却发现一个严重的问题:当我操作marker数据时,会导致地图的缩放级别发生变化(用户没有缩放的操作).这TM是什么鬼??接下来就开始爬坑. 官方的避坑指南 在mpvue的文档中,官方是给出一些避坑指南的: 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@,同时这个事件也非常特殊,它的

原文地址:https://blog.csdn.net/stacy06/article/details/82626363 最近项目部署到了https环境下,使用的UEditor富文本编辑器中的map组件出现了问题,控制台报了一堆错误,主要是mixed content.. ,就连百度的官网上也同样是有这些问题,汗.. 没有办法,只能四处搜索解决问题的答案... 第一点收获: https是安全传输协议,在这个协议下传输的网页不允许包含http协议这类不安全的内容. HTTPS页面里动态的引入HTTP资

map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些组件上的,用于设置在map上或者设置在视频播放上等等,上面提到map标签要用标签对就是应对这种情况.将cover-view组件嵌套在map组件内就可以了.cover-image组件可以嵌套在cover-view内. <map id="myMap" show-location=&quo

刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应的APP 思路一:用map组件来实现 坑:布局都搞好之后,在微信开发者工具一切正常,结果真机测试的时候只有地图,所有东西都被覆盖住了 效果: 原因:原生Map组件层级是最高的,并且不能使用z-index来修改层级 如果要在地图上面加一些组件呢 解决: 方案一:控件设置,控件就是controls属性,

效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="map_container"> <view class="map-tab-bar"> <view class="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="

说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,看起来没有一点问题,如下图: 但是在手机上真机模拟的时候就比较尴尬了,地图挡住了我底部的按钮,这个要怎么办呢?先是在百度上百度了好久,别人家写的博客都说,小程序的map组件是层级最高的,这个没办法处理; 然后就觉得凉凉了,不知道要怎么办了,难道要自己重新写个地图吗?感觉又不太现实,于是就问了最近在

因项目需要,以map为背景,上面悬浮有其他组件.微信开发者工具测试时一切正常,但是真机测试时地图组件却把所有的组件覆盖,检查z-index设置,一切正常,地图组件层级也在这些组件的下面,为什么会被覆盖呢? 查小程序官方文档,官方文档表示,map组件层级最高无法用z-index控制.这就很难受了. 那我一定要在地图上放东西怎么办,官方给出解决办法是 1. controls,但是controls的本质就是一张图片,无法满足多样化的需求(controls即将废弃,请使用 cover-view) 2.c

使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canvas.camera等组件都是原生组件,层级是最高的,并不能像原生开发那样使用z-index来控制层级. 从1.4.0基础库中增加了一个组件cover-view,用于在map.video.canvas.camera等原生组件上显示基础原生视图. 但是用了cover-view这个组件之后 我又发现了一个问

<template> <div > <canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchend='end' @error="error" disable-scroll='true'> </canvas> <div class="operate-btn"> <div class=&qu

分享一个比较好用的基于百度地图的vue组件.也有react版本的,可以自行选择. 分享链接:点击

给客户开发一个百度小程序,有个地图定位显示.百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示! 经纬度,通过百度坐标拾取器拾取到! .swan文件 <map id="myMap" style="width:100%;height:50vh;" longitude="{{longitude}}" latitude="{{latitude}}" scale=&

bindregionchange确实是会触发两次,第一次是视野变化开始,第二次是视野变化结束. 你可以尝试把e.type给打印出来,值为begin表示开始,值为end表示结束. wxml: js:

marker是Array类型,赋值的时候只能对整个数组进行更改赋值,不能只改变内部的对象,亲测Vue.$set()也不行 this.marker = [ { latitude: 39.90, longitude: 116.39, iconPath: '../../../static/location.png' } ]

Map组件 是原生组件,使用时请注意相关限制.个性化地图能力可在小程序后台"设置-开发者工具-腾讯位置服务"申请开通. 设置subkey后,小程序内的地图组件均会使用该底图效果,底图场景的切换会在后续版本提供. 详见<小程序个性地图使用指南> 官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/map.html 本文主要展示地图组件的几个能力: 经纬度转预览图 经纬度转大图 地理位置转经纬度 预

请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框架 mpvue官方文档 小程序·云开发 小程序·云开发文档 注意:使用mpvue前,首先你得先熟悉vue框架的基本使用 项目结构介绍 注意:接下来展示的代码,有几个对比,分别是本人优化前和优化后的代码对比,感兴趣的可以着重看一下优化后的成熟写法. ​ common目录: 放一些公共资源,如js,cs

请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框架 mpvue官方文档 小程序·云开发 小程序·云开发文档 注意:使用mpvue前,首先你得先熟悉vue框架的基本使用 项目结构介绍 注意:接下来展示的代码,有几个对比,分别是本人优化前和优化后的代码对比,感兴趣的可以着重看一下优化后的成熟写法. ​ common目录: 放一些公共资源,如js,cs

下周公司要搞黑客马拉松了,组里可能会做个小程序.然后看到了mpvue感觉还不错,于是就打算试试水.用vue写小程序听上去美滋滋.那么先开始吧! 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project 安装依赖 $ cd my-project$ npm install 启动构建 $ npm run dev 这样子就O

1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主尝试过把JS文件clone到本地,然后在main.js中引入 但是失败了 3. 在 webpack.base.conf.js 中 设置 externals,  忘记设置的报错好像是    amap is not defined 4. 根据业务需求, 封装自己的 map组件 博主封装的组件: 指定线路

<!-- 小程序的爬坑记录 --> 1 微信小程序之动态获取元素宽高 var obj=wx.createSelectorQuery(); 2 微信小程序图片自适应 <image class="themeImg" :src="themeImg" mode="widthFix" /> mode设置为widthFix 宽度100% 3.小程序上拉加载 下拉刷新 4.通过 this.$root.$mp.query 进行获取小程序在

一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模块化的思想是通用的,在这不做过多解释了.直接上代码,然后解释代码: // wxml <view class="c-menu"> <view wx:for="{{menuList}}" wx:key="{{item}}" class=