微信小程序如何显示店铺位置信息
随着移动互联网的发展，微信小程序也越来越受到消费者的欢迎，尤其是在商业场景中，微信小程序更是活跃地存在着。那么，如何在微信小程序中显示店铺位置信息呢？下面，就让我们一起来看看吧！
一、准备工作
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文件中添加店铺位置信息，代码如下：
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
