微信小程序怎么弄店铺位置信息显示

微信小程序如何显示店铺位置信息

随着移动互联网的发展,微信小程序也越来越受到消费者的欢迎,尤其是在商业场景中,微信小程序更是活跃地存在着。那么,如何在微信小程序中显示店铺位置信息呢?下面,就让我们一起来看看吧!

一、准备工作

1、首先,需要准备一个微信小程序,并且需要在微信公众平台上进行注册,获取AppID,以及在腾讯地图开放平台上申请开发者账号,获取key;

2、然后,需要在微信小程序中添加地图控件,这样才能显示店铺位置信息;

3、最后,需要在微信小程序中添加相关的店铺位置信息,这样才能正确显示店铺位置信息。

二、在微信小程序中添加地图控件

1、首先,需要在微信小程序的json文件中添加地图控件,代码如下:

"usingComponents": {
"map": "plugin://myPlugin/map"
}

2、然后,需要在wxml文件中添加地图控件,代码如下:

3、最后,需要在wxml文件中添加地图控件的相关参数,代码如下:

data: {
longitude: 116.397452,
latitude: 39.9085,
markers: [{
id: 0,
longitude: 116.397452,
latitude: 39.9085,
title: '店铺位置',
iconPath: '/images/location.png',
width: 30,
height: 30
}],
showLocation: true
}

三、在微信小程序中添加店铺位置信息

1、首先,需要在js文件中添加店铺位置信息,代码如下:

data: {
shopName: '店铺名称',
shopAddress: '店铺地址',
shopPhone: '店铺电话'
}

2、然后,需要在wxml文件中添加店铺位置信息,代码如下:


{{shopName}}
{{shopAddress}}
{{shopPhone}}

3、最后,需要在wxss文件中添加店铺位置信息的样式,代码如下:

.shop-info {
padding: 10px;
background-color: #fff;
}
.shop-name {
font-size: 16px;
font-weight: bold;
color: #333;
}
.shop-address {
font-size: 14px;
color: #666;
}
.shop-phone {
font-size: 14px;
color: #666;
}

四、实现店铺位置信息的显示

1、首先,需要在js文件中实现店铺位置信息的显示,代码如下:

onLoad: function () {
var that = this;
// 获取店铺位置信息
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
longitude: res.longitude,
latitude: res.latitude
});
}
});
}

2、然后,需要在js文件中实现店铺位置信息的点击事件,代码如下:

bindmarkertap: function (e) {
var that = this;
// 获取店铺位置信息
wx.openLocation({
latitude: that.data.latitude,
longitude: that.data.longitude,
scale: 18
});
}

3、最后,需要在js文件中实现店铺位置信息的控件事件,代码如下:

bindcontroltap: function (e) {
var that = this;
// 获取店铺位置信息
if (e.controlId === 1) {
wx.openLocation({
latitude: that.data.latitude,
longitude: that.data.longitude,
scale: 18
});
}
}

以上就是微信小程序如何显示店铺位置信息的全部内容,通过以上步骤,就可以在微信小程序中正确显示店铺位置信息了。

原创文章,作者:跳跳,如若转载,请注明出处:https://ziliaobaba.com/36138.html

(0)
跳跳跳跳
上一篇 2023年6月23日 22:30
下一篇 2023年6月23日 22:37

相关推荐

  • 正常护肤的顺序是什么?正确的护肤步骤

    今天小编就带大家来看一下正确的护肤步骤,为了好的皮肤一起努力吧! 第一步:洁面 洁面是每天都要进行的第一个步骤,早晨起床,我们的皮肤经过了一夜的新陈代谢排除了很多肌肤垃圾,所以洗干净脸很重要。我们可以使…

    2022年12月6日
  • 创维电视质量怎么样?创维电视 质量

    看看你家电视机上榜了吗,中国有能占几个? NO.1 索尼 所属国家:日本   SONY索尼是横跨电子3C、游戏、金融、娱乐领域的世界巨擘,拥有世界屈指的品牌影响力。索尼是世界视听、电子游戏、通讯产品和信息技术等…

    2022年11月20日
  • 我的世界怪物图鉴?我的世界全部动物

    当我坐在这温暖的书房里,四周堆满我所珍视的书籍,我的思想已经飞到了窗外那广袤的主世界中。 这本书包含了一位忠诚的博物学家和我的世界生物学家的一生的工作。 这位博物学家收集了在我的世界中迄今为止已发现的每…

    2021年11月11日
  • 适合农村的致富项目(适合农村家庭致富项目)

    近年来,很多人选择来到农村创业,如从事规模化种植或大型养殖业,只不过这类产业风险比较大,市场行情好时赚得盆满钵满,但一旦行情差那就要亏损惨重。 其实,下面6个隐藏乡村的新兴致富产业,一般都是按此次,收费…

    2022年10月22日
  • wow工程学怎么冲?魔兽世界工程学攻略

    以下工程攻略,已经覆盖所有必备的工程学用品。按照以下顺序冲工程,效率较高。基维斯的各种材料,因图纸获取复杂,不在这里描述,请直接AH购买。 正文:(侏儒种族+15工程技能,冲技能过程会产生变化,请自行调整,…

    投稿 2022年11月21日
  • oppoa93s支持无线充电吗

    Oppo A93s支持无线充电吗? 一、Oppo A93s简介 Oppo A93s是Oppo旗下的一款中端智能手机,采用6.43英寸的全面屏,搭载高通骁龙765G处理器,支持8GB+128GB的存储组合,拥有4800万+800万+200万+200万的四摄拍照系统,后…

    投稿 2023年3月24日
  • 16g内存够用吗(电脑16g内存够用吗)

    未曾想到,在《最畅销游戏本为啥显卡都是它?》的下面,大家不是针对游戏本独显性能进行讨论,而是针对标配的内存够不够用的问题开始无限延伸了,有点意思哈!140个字的回复有些说不清楚,干脆给大家来个直观完整的,以下内容大概1000字,阅读时间1分钟,看完懂不懂随缘吧。每个人,这里说的是每个人哦,对办公、娱乐或者游戏的要求没有100%相同的,想拿实际情况说话稍微有些难度,小

    2022年1月4日
  • 六小龄童简介(六龄童简介个人简历)

    说到西游记最经典的还是86版《西游记》,其中主演六小龄童也是将美猴王孙悟空这个角色演得活灵活现。可就是这么一个艺术家在晚年却背负了骂名,人设崩塌的尴尬境地?这到底是怎么回事呢? 六小龄童,本名章金莱,195…

    2022年10月17日
  • 鱼汤怎么做好吃?鱼汤要熬多长时间

    炖鱼汤时,不要直接煎或炖,教你3个技巧,鱼汤浓白鲜美,无腥味 意味着寒冷的天气就要来临了,对于抵抗力差的孩子和老人,切记要多穿点衣服,而且不要轻易脱衣服,不然很容易受凉。   除了穿衣要合适,还可以通…

    2022年11月30日
  • 灵魂摆渡剧情(灵魂摆渡剧情梳理)

    《灵魂摆渡》可以说是我的网剧启蒙,在那个网剧刚刚兴起的时代,能有这么一部经费不足却制作精良的网剧出现,是值得我们观众开心的事情。而后随着网剧的发展,有关部门对网剧的内容也开始进行审查,于是《灵魂摆渡》…

    2022年11月25日