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

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

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

一、准备工作

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

相关推荐

  • 塑料材质怎样辨别好坏?塑料如何挑选

    一、溶解性试验 热固性塑料不溶于有机溶剂,热塑性塑料除一些特殊高分子化合物外,都能溶解于不同的有机溶剂中。 二、密度试验 测出体积、称出重量,计算出密度,据密度判断 三、热分解试验 根据热分解后产生的气体…

    投稿 2023年1月11日
  • 董事会召开时间有规定吗(公司法规定董事会召开几次)

    (接上回)第十四条公司设董事会,其成员为三人,任期每届为三年。董事任期届满,连选可以连任。董事任期届满未及时改选,或者董事在任期内辞职导致董事会成员低于法定人数的,在改选出的董事就任前,原董事仍应当依照法律、行政法规和公司章程的规定,履行董事职务。董事会设董

    投稿 2022年1月5日
  • 网上创业好项目?网络创业项目投资

    现在是互联网的时代,所以有很多朋友想要自主创业,可能会优先考虑选择互联网的一些项目,但是在选择项目的时候,有一些朋友确实很烦恼,所以想要求助大家知不知道网上怎么赚钱快? 1、拍视频 小视频今年的形式不错,…

    2021年11月9日
  • 建档立卡是什么意思(建档立卡和低保户的区别)

    低保分为绝对贫困户和相对贫困户,绝对贫困户指的是难以维持最低生活需求的个人或者家庭,相对贫困户指的是可以勉强支撑家庭的生活,但是不足以达到整体的社会生活水平,建档立卡指的是完成审批后,已经记录在案,获得贫困…

    2024年2月22日
  • 穿过寒冬拥抱你全部演员表(穿过寒冬拥抱你 演员表)

    1905电影网讯由薛晓路执导,黄渤、贾玲、朱一龙、徐帆、高亚麟等主演的电影《穿过寒冬拥抱你》已于12月24日在全国32城超前点映,并于27日举行了北京首映礼。电影《穿过寒冬拥抱你》将视角拉回到武汉封城的凛冽寒冬,讲述了几对普通武汉市民在疫情突如其来的特殊时期共克时艰、互相温暖的温情故

    2022年1月10日
  • 怎么做微信下单小程序推广

    微信小程序推广是近几年新兴的一种推广方式,它不仅能够帮助企业提升品牌知名度,还能够提高企业的销售额。但是,如何才能有效地推广微信小程序,让它能够获得更多的用户,从而实现企业的目标?下面就介绍一些有效的…

    投稿 2023年6月25日
  • 二胡怎么学

    二胡是中国传统乐器,它有着悠久的历史,深受广大民众的喜爱。学习二胡,不仅可以提高自己的音乐素养,还可以放松心情,让自己在繁忙的生活中放松一下。那么,学习二胡需要什么? 首先,学习二胡需要一把合适的二胡…

    投稿 2023年4月19日
  • 2022热播的十部电视剧(电视剧推荐2022正在热播的剧)

    2022年的前八个月播出了许多网剧,从年初的《开端》到年中的《梦华录》,再到暑假档的《苍兰诀》,都获得口碑和热度的双丰收。 热度前十名的网剧有哪些呢?一起来看一看。 01.第十名《苍兰诀》 虞书欣 王鹤棣 《苍兰…

    2022年10月11日
  • 驱动总裁是什么软件

    驱动总裁:让电脑更快更稳定 一、什么是驱动总裁 驱动总裁是一款电脑驱动管理软件,可以帮助用户更新和管理电脑上的驱动程序,让电脑更快更稳定地运行。它支持Windows系统,可以自动检测电脑上的驱动程序,并且可以…

    投稿 2023年7月3日
  • 怎么与打印机连接?如何连接打印机

    连接打印机的方法很简单,只需要我们连接线连接,然后在电脑安装驱动再连接打印机就可以了,具体打印机怎么连接电脑的步骤如下。 工具/原料: 系统版本:windows10系统 品牌版本:联想小新air13 方法/步骤: 1、将打…

    2022年12月1日