微信小程序如何在地图上面操作样式

最新推荐文章于 2022-09-19 16:49:51 发布
VIP文章 最新推荐文章于 2022-09-19 16:49:51 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： 微信小程序 javascript 文章标签： canvas 地图 小程序 覆盖物 map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38608490/article/details/77053547
版权

最近在做的一个小程序项目，基于小程序原生地图组件开发。当点击markers的时候，会在地图上方出现一些样式。遇到的问题大概是 map 组件是由客户端创建的原生组件，它的层级是最高的。

想绕过是不可能的了，因为有的项目已经实现，大概是这个效果（红色圈着的部分）

这里写图片描述

尝试了各种不可能之后，只能选择跟map同样为层级最高的canvas实现，先上实现后的效果

这里写图片描述

嗯，差不多是自己想要的效果了，现在来给大家分享一下实现方式。

这里写图片描述这里写图片描述这里写图片描述

分为3步，描绘上下两个样式，上面为浅灰，下面是白色，带有阴影效果

WXML代码

<map id="map" longitude="113.324520" latitude="23.099994" scale="20" controls="
最低0.47元/天 解锁文章
秋水浮萍任飘渺
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序：自定义地图markers
Crazy_GirlLL的博客
02-02 4206
index.wxml代码： <map id="myMap" layer-style="1" subkey="{{subkey}}" bindregionchange="mapScale" bindlabeltap="navigatePage" bindmarkertap="navigatePage" bindcallouttap="navigatePage" bindtap="routeTap" style="width: 100%; height:{{mapHeight}}px" lat..
微信小程序地图导航
黎成诃月的博客
11-30 5659
map id="map" longitude="116.48834" latitude="39.91692" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline
原生小程序 之 实现 地图打（图标事件，获取用户位置）
weixin_47409897的博客
05-25 199
目录原生小程序 之 实现 地图打（图标事件，获取用户位置）配置 获取 用户地理位置 app.json实现地图 map全局数据 app.js 原生小程序 之 实现 地图打（图标事件，获取用户位置） 官网 获取用户位置 地图 配置 获取 用户地理位置 app.json "window": { "navigationBarTextStyle": "black" }, "permission": { "scope.userLocation": { "desc": "
微信小程序设置个性化地图样式
qq_37604998的博客
05-22 2553
在开发地图时，我们想要改变地图的样式进行自定义，那么我们就需要使用腾讯地图提供的个性化地图，在其官网上提供了一些可以直接使用的模板，下面我们大概说下引用的流程： 1、进入腾讯地图开发者中心控制台，然后点击 我的样式，选择对应模板进行直接使用，然后选择想要引用的小程序 2、如下我们进入样式应用列表中，能够看到样式已经和当前小程序的秘钥key绑定在一起了，这里我们要记住秘钥key值和样式的编号，Style1 澹月 的编号为1 3、下面使我们小程序引用地图组件，然后我们将上面的值设置下下面两个.
微信小程序不规则图形渐变填充
qq_41619567的博客
11-12 1671
// Create linear gradient动态渐变 const grd = ctx.createLinearGradient(0, 0, 200, 0) //这个得写 固定的 grd.addColorStop(0, 'red')//开始渐变的颜色 grd.addColorStop(1, 'white')//另一个颜色 ctx.setFillStyle(g...
微信小程序坐标点聚合demo
02-04
微信小程序地图聚合示例代码，运用分格子算法，可聚合2w+的坐标点，具体说明请移步至我的博客https://blog.csdn.net/zw21544182/article/details/106048945
微信小程序获取位置展示地图并标注信息的实例代码
01-03
1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式 2.获取位置要在app.json中标明权限 3.先使用wx.getLocation获取自己的位置，然后再回调中使用setData方法，赋予数据给前台页面展示标注点 index.js //...
微信小程序 wxapp地图 map详解
01-03
微信小程序 wxapp地图 map： map 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 ...
微信小程序-微信小程序地图定位选点存储
08-06
微信小程序地图选点收藏Demo 本程序是用于测试微信小程序地图功能及与LeanCloud数据存储管理功能的Demo。 本程序目前未添加AppID无法进行真机调试，欢迎已经申请到资格的朋友测试反馈。 本程序数据管理功能基于...
微信小程序 地图map详解及简单实例
11-28
微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   ...
微信小程序基于canvas的自定义地图控件，实现瓦片地图等SimpleMap-wx-master.zip
09-25
微信小程序基于canvas的自定义地图控件，实现瓦片地图等SimpleMap-wx-master.zip
微信小程序中悬浮窗功能的实现代码
10-16
悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。本文给大家分享一个比较常见的常见，通过实例代码给大家介绍微信小程序中悬浮窗功能的实现，一起看看吧
微信小程序-地图导览，校园地图小程序school-map-master.zip
09-25
微信小程序-地图导览，校园地图小程序school-map-master.zip
uniapp 微信小程序地图map组件样式自定义，layer-style的使用
MaoLS的博客
06-08 4171
1.第一步， 进入 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 进入腾讯位置服务页面，直接进入 申请秘钥（key），申请的key会在map组件用到 2. 进入应用管理 》 我的应用 》 右上角 创建应用 3.创建完应用，进入下面的个性化地图 》 样式选择 (如图) 4.现在获取到key 和 自定义的样式 ...
微信小程序，如何在地图map上面显示自己写的样式呢？
theVirtual的博客
09-06 6061
必须使用标签，覆盖原生组件。如下所示：
微信小程序：使用个性化地图
Crazy_GirlLL的博客
12-24 1921
先去腾讯位置服务，根据他下面的流程一个个来 我这是个人注册 第一步：申请密钥：按照和要求填，不报错就行，然后提交 下面的如果是个人用户，按照下面勾选就行，企业用户勾选别的可能会上传资质之类的，然后点击保存，稍等一会 然后到了开发者验证的页面 填写姓名，手机号，邮箱，填完之后，会给你邮箱发验证信息，点进去微信一扫，就可以了，后续如果想改信息，可以在下图所示位置修改即可 至于第一张图片中的第三步：下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1
uni-app 微信小程序中关于 map 地图使用案例分享
跟着飞哥学编程（全栈联盟）
09-19 6705
这篇文章，我将带领大家使用微信内置地图详细讲解关于如何配置地图、打开地图和使用地图。
微信小程序之地图功能
热门推荐
crazy_jack
02-12 15万+
转载请注明出处：http://blog.csdn.net/crazy1235/article/details/55004841本篇blog主要介绍微信小程序中的地图模块相关功能。基本使用地图组件使用起来也很简单。.wxml<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{con
微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果）
liNewman的博客
12-20 1179
微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果） DEMO下载 实现的效果 实现的原理 通过对scroll的监听获取滚动条的scrollTop值; 在导航的class判断scrollTop; 切换position:fixed与p...
uniapp微信小程序模拟地图样式
最新发布
05-11
如果您想在uniapp微信小程序中模拟地图样式，可以通过以下步骤实现： 1. 引入腾讯地图SDK。 在项目的 `pages.json` 文件中，将 `"usingComponents"` 中的 `"map"` 组件改为 `"taro-map"` 组件，并在 `app.js` 中引入腾讯地图SDK。 ``` // app.js import QQMapWX from './libs/qqmap-wx-jssdk' Vue.prototype.qqmapsdk = new QQMapWX({ key: 'yourKey' }) ``` 2. 设置地图样式。 在 `map` 组件中添加 `setting` 属性，设置地图样式。您可以通过腾讯地图提供的地图样式工具，自定义地图样式。 ``` <map :setting="{ style: 'styleJson', skew: 0, rotate: 0, showLocation: true, showScale: true, showCompass: true, enable3D: false, enableOverlooking: false, enableZoom: true, enableScroll: true, enableRotate: false, enableSatellite: false, enableTraffic: false, enablePoi: true }" :styleJson="styleJson" ></map> ``` 3. 定义地图样式。 在 `data` 中定义 `styleJson` 对象，设置地图样式。 ``` data() { return { styleJson: [ { 'featureType': 'land', 'elementType': 'geometry', 'stylers': { 'color': '#f5f5f5' } }, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': { 'color': '#c9c9c9' } }, { 'featureType': 'road', 'elementType': 'geometry', 'stylers': { 'color': '#ffffff' } }, { 'featureType': 'road', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#9ca5b3' } }, { 'featureType': 'administrative.locality', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#bdbdbd' } }, { 'featureType': 'poi', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#757575' } }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': { 'color': '#c9c9c9' } }, { 'featureType': 'poi.park', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#9e9e9e' } } ] } } ``` 通过以上步骤，您可以在uniapp微信小程序中模拟自定义地图样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值