一、概述
上一篇文章,已经实现了商品列表数据,上下拉动,动态加载。
接下来,实现联系我们,地图显示,拨打电话,效果如下:

二、联系我们
修改 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>
编译运行,点击号码,会有一个提示

如果是手机运行,就会提示,是否拨打这个号码