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

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

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

一、准备工作

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月2日
  • 哪个品牌的冲锋衣质量好?冲锋衣排行榜

    喜欢户外运动的友友们,对冲锋衣的喜爱是发自内心的。因为冲锋衣防水、透气、防风、保暖的功能性,能够满足我们去户外的需求。 但是不同的冲锋衣,在性能方面差别非常大,当然对应的价格也相差很大。专业户外全天候…

    2022年11月7日
  • 我想开服装店怎么开?如何开个服装店

    一、服装商圈调查 把握客流原则在车水马龙、人流熙攘的热闹地段开店,成功的几率往往比普通地段高出许多,因为川流不息的人潮就是潜在的客源,只要你所销售的商品或者提供的服务能够满足消费者的需求,就一定会有良…

    投稿 2022年11月11日
  • 什么是核裂变?核裂变是指

    在家也能造出原子弹?图纸和原理都已经是公开化了,那我们需要做什么也能够造出原子弹呢? 今天这一期基地边缘就给大家科普如何自己在家造一颗原子弹!   原子弹的基本原理其实就是核裂变,当一个中子快速冲击…

    2022年11月16日
  • 中小企业oa系统?免费oa系统

    中小企业OA无纸化办公系统 中小企业在选择OA无纸化办公系统时,必须结合企业的实际需求,不能完全模仿大企业的模式,可以根据需要定制比较灵活的软件,解决企业一般和通用的办公需求,逐渐增加和扩大对企业个性化需…

    2021年11月11日
  • 苹果13录屏功能怎么调出来?苹果手机录屏功能在哪里

    在苹果设备日常使用过程中,iPhone的拍照、截屏等功能你是不是很常用? 除此之外,苹果手机自带着实用性非常高的录屏功能,而同样大有用途的iPhone录屏功能,有些用户却还不知道怎么设置,甚至找不到在哪里。 学会iP…

    2022年12月4日
  • 马云点评创业(成功的创业家)

    1、创业者光有激情和创新是不够的,它需要很好的体系、制度、团队以及良好的盈利模式。 2、建一个公司的时候要考虑有好的价值才卖。如果一开始想到卖,你的路可能就走偏掉。 3、商业计划绝对不是一个销售计划,里面…

    2022年10月15日
  • 世界八大奇迹是哪些?世界八大奇迹之一

    奇迹一:古巴比伦空中花园 公元前6世纪左右,古巴比伦国王尼布甲尼撒二世,有一个相当迷人的王后,因王后是米底人,国王为了让她经常瞭望自己的故乡,以解思乡之苦,就斥资重金建造了一座高达的建筑。因上面栽满了奇…

    2022年11月9日
  • “七月半”是什么意思?七月半的来历

    农历七月十五又称为七月半、中元节、鬼节,在古代,这一节日尤为重要,老百姓们在这一天要祭祖,放河灯为逝去的亲人们祈福,思念他们。 图片来源于网络 而在现代,对于这一节日就没有古代那么隆重了。像在我们这里,…

    2022年11月17日
  • 屏保密码如何设置(手机屏幕密码如何设置)

    很多朋友不知道怎么设置手机的锁屏密码,那么这一篇就说说手机的锁屏密码怎么设置吧。 手机正常状态下是没有锁频密码的,但是很多时候我们都需要一个手机使用权限,不管是为了安全还是为了管控孩子贪玩亦或者是为了…

    2022年11月30日