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

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

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

一、准备工作

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

相关推荐

  • 家庭轿车销量排行榜(销量最好的家用轿车)

    国内轿车、SUV以及MPV三大市场的销量排名。先从轿车市场具体的排名情况来看,前十五名车型基本都是一些熟悉的老面孔,只不过内部具体的变化仍然不小。下面,阿贵君就带大家一起看看9月轿车市场的排名情况。 10月轿车…

    2022年11月10日
  • 微信群号码在哪里找?我想加大量的微信群

    很多做营销的人苦苦想找很多微信群,但是就是不知道怎么去找,现在告诉你几种方法,一定有用! 1、公众号查找 有很多公众号每天会推送很多微信群二维码,比如—集梦营、每日群鲜,等等,可以批量关注一些,等到他们推…

    2021年11月16日
  • 甴曱是什么意思?曱甴这两个字念什么

    同志们,目前已知汉字的总数已经超过了8万个,而常用的只有3500字,其他是冷僻字。可以说在茫茫的汉字辞海中,我们的对汉字的认知还是少的可怜。咱们大家伙不可能认识所有的汉字,但对于汉字而言,它就是一个小小的…

    2021年11月9日
  • 支付宝当日转账限额是多少(支付宝一天转账限额多少)

    近日,央行针对移动支付动作不断,不仅今后微信/支付宝红包活动被叫停了,甚至传闻扫码支付也将限额,不少网友直呼央妈管的太宽了。最近有网友问小编,微信

    2022年1月2日
  • 初冬如何野钓大板鲫鱼?野钓鲫鱼技巧

    入冬之后才是最适合钓大板鲫的,因为鲫鱼全年不停口,尤其是体型较大的鲫鱼,初冬还处于大量进食的阶段。喜欢钓鲫鱼的老钓友,在这个阶段才是最忙碌的阶段。虽说冬钓上鱼时间在气温较高的中午前后,但是气温不高发窝…

    2021年11月15日
  • 三角粽子的包法步骤文字(包三角粽子)

    这道三角粽太销魂,连吃3天都不腻 连某人不喜欢吃糯米的东西,但只要吃到老妈做的粽子都会爱上,它有丰富的内馅,会放上花生,红豆,绿豆等,中间再加入腌制过的五花肉,香而不腻 用料 粽叶 1把 棉绳 适量 去皮绿豆 …

    2022年12月11日
  • 盘丝怎么加点?盘丝伤害固伤

    盘丝是不少梦幻西游玩家心中的“朱砂痣”,不管你是什么门派,你总会和“它”产生交集。她在驿站杀环的身影、摸摸摆摊卖符的样子和洞房花烛夜的娇羞模样,都是不少玩家梦中的记忆。2022年4月门派大改后,“盘丝增强”的消…

    2022年10月16日
  • 漏电断路器型号规格表?断路器型号规格表

    断路器是一种安全保障的电器产品,在发生电路负载的时候,这种断路器可以自动地切断电路,从而达到保护和保障的目的,避免后期埋下的进一步的安全隐患问题,那么断路器的参数,具体应该如何选择?对应的断路器的型号…

    2021年11月15日
  • 海参怎么泡发方法?海参如何泡发

    涨发海参时,直接用水泡就亏了,教你正确方法,随吃随取,特省事 我们平时说的“山珍海味”,海参就是其中一种,因为有很好的补益养生作用,所以被称为“海中人参”。海参的蛋白质含量非常高,基本上都超过80%,是牛肉的…

    2022年12月8日
  • 苹果1200万像素相当于(苹果x换摄像头大概多少钱)

    在智能手机市场,除了手机能在外观上做点差异之外,更关键的还是后置的影像系统,好看有好用的后置摄像设计能让手机增色不少,就比如华为Mate4

    2022年1月4日