微信小程序中map地图中取消地点图标文字（干净地图）

已于 2022-10-06 11:11:58 修改
阅读量3.4k 收藏 3
点赞数 1
文章标签： 微信小程序 小程序
于 2022-10-02 20:43:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55109830/article/details/127145883
版权

利用的是腾讯地图的个性化地图替换掉原来默认的地图

一、注册一个腾讯地图账号

二、申请一个key：

网址：我的应用 (qq.com)

添加key然后点上webserviceApi sdk 和微信小程序

微信小程序需要绑定自己小程序的appid

三、个性化地图

点个性化样式的我的样式，然后创建新样式 

然后喜欢哪个模板选哪个

然后进入是这样的：

左上角可以改个名字

四、修改POI

点开POI有很多类别，每个类别点开来有文字和图标，把这两个去掉就行，把你想要去掉的类别关闭文字和图标。我是直接全关了

五、发布

 六、把个性化地图绑定到key上

点击设置绑定样式

点击添加样式

这个样式可以添加多个 并且小程序也可以切换的

七、小程序map设置

地图标签：<map  subkey="" >

把获取到的key添加到subkey中

如果有多个图层的话用layer-style=""来指定第几个样式

Joke#
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序 地图map详解及简单实例
11-28
微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 标记点 标记点用于在地图上显示标记的位置，不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数，范围 -90 ~ 90 longitude 经度 Number 是 浮点数，范围 -180 ~ 180 nam
微信小程序—map地图实现标记多个位置（导入即可用）
05-26
微信小程序—map地图实现标记多个位置（导入即可用） 可参考博文：https://blog.csdn.net/weixin_43042683/article/details/103555505
vue引入腾讯地图,去除水印
Jeremz的博客
08-28 717
.mapfont div:nth-child(2) a:nth-child(1) { display: none !important; } .mapfont div:nth-child(3) div:nth-child(2) span:nth-child(1) { display: none !important; }
腾讯地图去掉文字
qq_34631220的博客
03-23 1900
var center = new TMap.LatLng(23.594503248, 109.663271); // 设置中心点坐标 // var center = new TMap.LatLng(22.965150809, 113.238420405); var map = new TMap.Map(document.getElementById('container'), { center: center,//设置地图中心点坐标 ...
腾讯地图 logo去除
lucky_girl_girl的博客
07-23 2183
logo与container的关系 $(function(){ $("#container").bind(“DOMNodeInserted”,function(e){ var tempCount = 0; $("#concontainer>div").children().each(function(){ tempCount++; if(tempCount2||tempCount3){ $(this).remove(); } }); }); });
去除腾讯地图logo方法
angel_791的博客
04-03 3635
如图所示，uniapp引入map地图后总会有个腾讯的logo，经过一番摸索后，给它去掉了。
腾讯地图去除水印
萌宅鹿的技术小屋
07-07 1975
腾讯地图去除水印问题描述解决思路 问题描述 目前能去掉的是这个水印： 界面上漂浮着的这个水印暂时还不知道怎么去。。。。 解决思路 用开发者工具，发现这个水印是可以被选中的，因此它其实是个元素： 那么思路就很简单了，通过 JavaScript 获取到该元素后设置样式为 display: none; 即可。 代码： // 腾讯地图去除水印（logo 和 logo文字） var logo = document.querySelector('#container > div > div:nth-c
MapBox地图怎么去掉地名显示
sunming的博客
04-25 7417
MapBox地图怎么去掉地名显示，这个需求我之前也没遇到过，于是今天就尝试了一番，总结一下。 一. 首先尝试查找com.mapbox.mapboxsdk.maps.UiSettings源码 查看后发现根本没有地图文学显示相关设置，全部都是地图的操作设置，例如旋转手势等。 第一步失败！ 二. 分析地图是如果显示地名的。 Mapbox现在都是用Layer添加覆盖物，所以判断地名也是通过L...
微信小程序 开发MAP（地图）实例详解
12-10
微信小程序 开发MAP（地图）实例详解 在创建MAP（地图）前，请各位小伙伴们认真的去了解微信小程序开发的说明。 https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP（地图）里的属性之后...
微信小程序 wxapp地图 map详解
01-03
微信小程序 wxapp地图 map： map 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 ...
微信小程序 地图（map）实例详解
11-28
微信小程序 地图（map）实例  这里是小编对微信小程序 地图（map API ）做的资料整理，获取当前的地址，应该如何实现的实例，大家可以看下。 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试...
uniapp小程序地图添加删除标记点
weixin_64132598的博客
05-16 1011
uniapp小程序地图上添加删除标记点
mapbox删除标注小练习
热爱WebGIS的博客
03-03 1209
本案例我们使用Mapbox GL JS库进行删除标注小练习。
微信小程序map腾讯地图功能整理
寻宋的博客
07-05 5965
wxml:&lt;map class="map" longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' polyline='{{polyline}}' bindmarkertap='bindmarkertap' bindregionchange='bindregioncha...
微信小程序map组件展示当前位置&&修改标记点图标
weixin_40030173的博客
08-04 4601
方法一、 <view> <map id="myMap" show-location class="container" style="width: 100%; height: 800rpx;" /> </view> onShow: function() { this.mapCtx = wx.createMapContext('myMap') this.mapCtx.moveToLocation() } 方法二、 <map id="map" longitu
微信小程序地图控件Map的使用
ajdhakj6的博客
12-28 1083
微信小程序地图控件Map的使用
微信小程序设置个性化地图样式
qq_37604998的博客
05-22 2629
在开发地图时，我们想要改变地图的样式进行自定义，那么我们就需要使用腾讯地图提供的个性化地图，在其官网上提供了一些可以直接使用的模板，下面我们大概说下引用的流程： 1、进入腾讯地图开发者中心控制台，然后点击 我的样式，选择对应模板进行直接使用，然后选择想要引用的小程序 2、如下我们进入样式应用列表中，能够看到样式已经和当前小程序的秘钥key绑定在一起了，这里我们要记住秘钥key值和样式的编号，Style1 澹月 的编号为1 3、下面使我们小程序引用地图组件，然后我们将上面的值设置下下面两个.
微信小程序的常用事件的用法
最新发布
ike_kenny的博客
06-21 466
bindtap 或 catchtap：点击事件，当用户点击某个元素时触发。bindinput 或 catchinput：输入事件，当用户在输入框中输入内容时触发。bindchange 或 catchchange：选择改变事件，当用户选择不同的选项或者切换开关状态时触发。bindsubmit 或 catchsubmit：表单提交事件，当用户提交表单时触发。bindscroll 或 catchscroll：滚动事件，当页面滚动时触发。
微信小程序开发怎么修改map中的标记点图标
03-22
您可以使用 setMarkers 方法来修改地图中标记点的图标。具体步骤如下： 1. 获取地图实例： var map = new BMap.Map("mapContainer"); 2. 创建标记点： var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); 3. 设置标记点的图标： var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - 10 * 25) }); marker.setIcon(icon); 4. 将标记点添加到地图中： map.addOverlay(marker); 通过以上步骤，您就可以成功修改地图中标记点的图标了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值