uni-app x开发商城系统，联系我们，地图显示，拨打电话

一、概述

上一篇文章，已经实现了商品列表数据，上下拉动，动态加载。

接下来，实现联系我们，地图显示，拨打电话，效果如下：

二、联系我们

修改 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>

编译运行，点击号码，会有一个提示

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