首页/资讯中心/详情

uni-app x联系我们，地图显示，拨打电话

uni-app x联系我们，地图显示，拨打电话
📅 发布时间：2026/6/19 19:43:48

一、概述

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

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

image

二、联系我们

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

图片随便从网上下载即可，效果如下：

image

三、腾讯地图

接下来，需要实现地图展示，这个需要调用腾讯地图的api key才可以正常显示，否则使用map组件，会提示：

Map key not configured.

 

首先需要前往腾讯位置服务控制台申请API密钥，地址：https://lbs.qq.com/dev/console/home

注册手机号，必须绑定微信号

登录之后，创建一个应用map，然后创建key

8f1f482f92165279caf441e1e8e66c88

注意保存secure key

 然后给key配置额度，直接填满。 注意：免费额度是，每日可以调用6000次，如果需要更多次，需要付费购买。

50990aa8511ee8283def9cfbe0a5acf6

 

四、地图显示

设置secure key

打开manifest.json，设置腾讯地址图

image

 

百度地图-坐标拾取器

打开官网：https://lbs.baidu.com/maptool/getpoint

搜索北京市，复制坐标

image

北京市的坐标为： 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>

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

image

 

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