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

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

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

一、准备工作

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

相关推荐

  • 入耳式耳机哪个牌子好(台式电脑入耳式耳机哪个牌子好)

    蓝牙耳机是近两年特别火爆的产品,基本上已经取代充电宝成为智能手机最大的配件。而对于蓝牙耳机来讲,最受关注的仍然是音质,而前不久就有自媒体通过对网络上各大品牌的音质口碑评价等等,做出了2020年度1-7月份十大主流蓝牙耳

    2022年1月1日
  • 地下城如何赚钱(玩地下城如何赚钱)

    作者:明空对于萌新、回归玩家以及一些小伙伴们的小号来说,装备大都还未毕业,还在百级传

    2022年1月2日
  • 空格名字怎么打出来?如何打出空白名字

    空格名字也说法是隐形的符号名字,当我们设置了这个名字之后,给别人的感觉就是一个没有名字的个性名字。空格名字比较少人使用,但是还有同学喜欢这样的个性名字符号,我们就来看看如何快速打出空格名字符号 1:如果…

    2022年11月18日
  • 大学里的双学位证书有什么用?双学位证书

    考证热? 考证是大学生活不可或缺的一部分。无论是准备就业还是考研,多一个证就多一份底气。即使自己创业,考证也是快速提高专业知识水平,扩充知识面,提高个人综合素质的有效途径。所以,大学生一定要认真对待考证…

    2022年11月9日
  • 学生用什么笔记本好(学生用什么牌子的笔记本比较好)

    对于学生使用的笔记本电脑我们首先要考虑的是性价比,性能要强,价格还要低的笔记本;其次就是笔记本的颜值,对于年轻的学生们来说,肯定都喜欢高颜值的东西?下面特为大家推荐5款最适合学生用的笔记本,都是一些性价比高,颜值也不错,稳定耐用的笔记本电脑。第一款:联想拯救者R9000P2021RTX3060版【参考价:89

    2022年1月1日
  • 《对手》郭京飞剧照(郭京飞二代精灵剧照)

    《衡山医院》落幕,佳音频传:重点革命题材剧《对手》杀青,预计2022年登陆荧屏,与观众见面。“话剧小王子”郭京飞将联袂谭卓为你带来不一样的《对手》盛宴。乍一看《对手》这个剧名,读者感觉是不是有些似曾相识?冯远征、赵文瑄曾在2008年参演过同名谍战剧《对手》,豆瓣评分7.1分。另外张凯丽

    2022年1月8日
  • 皮卡哪个好?性价比高的皮卡车

    不知道有多少粉丝朋友们和我一样,有一个开着皮卡自由遨游的理想。 从前,由于政策原因和进口皮卡价格高昂,我们可能被迫放弃了这个潇洒的皮卡梦。 不过如今国货崛起,政策利好,你可曾再次想过,有一天自己的皮卡梦…

    2021年11月13日
  • 三防手机推荐?最好的军工三防智能手机

    近两年随着极限运动爱好者的增多,电子产品也开始升级,就如之前荣耀X10真的只是凭借信号好才登上珠峰的吗?当然还有其硬件的加持。为应对极端环境下的通信,国内手机厂商AGM就在2011年研发出了三防手机AGM ROCK V5…

    2021年11月16日
  • 怎么编程一个小程序

    编程是一种复杂的技术,也是一种创造性的表达方式,它可以帮助我们实现各种复杂的功能。编程一个小程序,需要经过一系列的步骤,从设计、编写代码、测试到发布,都需要投入大量的时间和精力。本文将介绍如何编程一个…

    投稿 2023年7月3日
  • 八宝粥怎么做好吃又简单?八宝粥的正宗做法

    用料 赤小豆 50g 大米 100g 黑米 30g 红豆 50g 花生 30g 莲子 20g 紫薯 50g 白砂糖 100g 盐 适量 水 1300ml   做法步骤 1、锅里放入两碗水开火 2、准备上述材料 3、清洗材料至水清澈 4、等水烧开了把淘洗好的米…

    2022年12月30日