一、概述
上一篇文章，已经实现了商品列表数据，上下拉动，动态加载。
接下来，实现联系我们，地图显示，拨打电话，效果如下：
二、联系我们
修改 pages/contact/contact.uvue文件，增加view
完整代码如下：
<template>
<view class="contact">
<image src="/static/public/gywmban.jpg" class="img"></image>
<view class="info">
<view>联系电话：400-800-9999 (点击拨打)</view>
<view>联系地址：北京四合院1号</view>
</view>
</view>
</template>
<script>
export default {
data() {
},
methods: {
}
}
</script>
<style lang="scss">
.img {
width: 750rpx;
height: 320rpx;
}
</style>图片随便从网上下载即可，效果如下：
三、腾讯地图
接下来，需要实现地图展示，这个需要调用腾讯地图的api key才可以正常显示，否则使用map组件，会提示：
Map key not configured.
首先需要前往腾讯位置服务控制台申请API密钥，地址：https://lbs.qq.com/dev/console/home
注册手机号，必须绑定微信号
登录之后，创建一个应用map，然后创建key
注意保存secure key
然后给key配置额度，直接填满。 注意：免费额度是，每日可以调用6000次，如果需要更多次，需要付费购买。
四、地图显示
设置secure key
打开manifest.json，设置腾讯地址图
百度地图-坐标拾取器
打开官网：https://lbs.baidu.com/maptool/getpoint
搜索北京市，复制坐标
北京市的坐标为： 116.41,39.91
修改 pages/contact/contact.uvue文件，增加map组件，指定坐标
完整代码如下：
<template>
<view class="contact">
<image src="/static/public/gywmban.jpg" class="img"></image>
<view class="info">
<view>联系电话：400-800-9999 (点击拨打)</view>
<view>联系地址：北京四合院1号</view>
</view>
<map :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" class="map" />
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.91, // 北京纬度
longitude: 116.41, // 北京经度
scale: 16, // 缩放级别
markers: [{
id: 1,
latitude: 39.91,
longitude: 116.41,
title: "天安门",
iconPath: "/static/logo.png",// 本地图标路径
width: 30,
height: 30
}]
}
},
methods: {
}
}
</script>
<style lang="scss">
.img {
width: 750rpx;
height: 320rpx;
}
.info {
padding: 10rpx 20rpx;
font-size: 30rpx;
view {
line-height: 80rpx;
border-bottom: 1px solid #eee;
}
}
.map {
width: 750rpx;
height: 750rpx;
}
</style>说明：
latitude，中心纬度
longitude，中心经度
scale，缩放级别，取值范围为3-20
markers，标记点
width: 图标宽度
height: 图标高度
更多参数，可以查看官方文档：https://uniapp.dcloud.net.cn/component/map.html
五、拨打电话
接下来要实现，点击电话号码，能进入拨打电话。
调用uni.makePhoneCall方法
官方文档：https://uniapp.dcloud.net.cn/api/system/phone.html
修改 pages/contact/contact.uvue文件，增加点击事件
完整代码如下：
<template>
<view class="contact">
<image src="/static/public/gywmban.jpg" class="img"></image>
<view class="info">
<view @click="phone">联系电话：400-800-9999 (点击拨打)</view>
<view>联系地址：北京四合院1号</view>
</view>
<map :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" class="map" />
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.91, // 北京纬度
longitude: 116.41, // 北京经度
scale: 16, // 缩放级别
markers: [{
id: 1,
latitude: 39.91,
longitude: 116.41,
title: "天安门",
iconPath: "/static/logo.png",// 本地图标路径
width: 30,
height: 30
}]
}
},
methods: {
phone() {
uni.makePhoneCall({
phoneNumber: '400-800-9999'
})
}
}
}
</script>
<style lang="scss">
.img {
width: 750rpx;
height: 320rpx;
}
.info {
padding: 10rpx 20rpx;
font-size: 30rpx;
view {
line-height: 80rpx;
border-bottom: 1px solid #eee;
}
}
.map {
width: 750rpx;
height: 750rpx;
}
</style>编译运行，点击号码，会有一个提示
如果是手机运行，就会提示，是否拨打这个号码