当前位置:网站首页>uniapp开发微信小程序,显示地图功能,且点击后打开高德或腾讯地图。
uniapp开发微信小程序,显示地图功能,且点击后打开高德或腾讯地图。
2022-06-24 09:43:00 【马小跳会Coding】
最开始遇到地图这块的时候,想的比较复杂。想到是不是需要引用高德或者百度地图api 之类的。
其实完全没必要,使用uniapp自带的方法 uni.openLocation 即可。
话不多说,完整代码、注释、以及开发中遇到的问题如下所示:
1、uniapp 打包成微信小程序后—配置app.json文件
//开发过程中,需要在unpackage>>dist>>dev>>mp-weixin>>app.json中加入如下配置
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
//在manifest.json的源码视图中配置:配置appid和地理位置
"mp-weixin": {
/* 小程序特有相关 */
"appid": "", //需要配置appid
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
2.页面具体代码:
<template>
<view class="">
<view class="ditu">
<map style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="marker" @markertap="toMap()">
<!--此处踩坑问题1: @markertap 是点击地图上的标记点时 触发打开地图。 @tap 是点击地图整体的时候 触发打开地图。 -->
</map>
</view>
</view>
</template>
<script> export default {
data() {
return {
latitude: '', //纬度 longitude: '', //经度 marker: [{
id: 0, latitude: '', //纬度 longitude: '', //经度 // title: '山东某某有限公司', //标注点名 alpha: 1, //透明度 }], scale: 14, //地图缩放程度 address: '' } }, methods: {
//点击地图上的标记,打开手机内置地图 toMap() {
console.log('点击地图') uni.openLocation({
latitude: Number(this.latitude), //要去的纬度-地址 longitude: Number(this.longitude), //要去的经度-地址 address: this.address, //要去的具体地址 //此处踩坑的问题2: //latitude 和 longitude的值一定要是number类型。 //所以传递的时候需要使用Number将其转换一下。 }) }, } } </script>
<style scoped> .ditu {
width: 100%; height: 565rpx; } </style>
3.开发完成~如下图所示:




4.关于踩坑的两个问题:
①点击哪里可以触发地图?@markertap 是点击地图上的标记点时 触发打开地图。@tap 是点击地图整体的时候 触发打开地图。

②uni.openLocation 点击打开地图时没反应?
注意经纬度的数据类型:使用Number

ending~
边栏推荐
- 411 stack and queue (20. valid parentheses, 1047. delete all adjacent duplicates in the string, 150. inverse Polish expression evaluation, 239. sliding window maximum, 347. the first k high-frequency
- 2022-06-23:给定一个非负数组,任意选择数字,使累加和最大且为7的倍数,返回最大累加和。 n比较大,10的5次方。 来自美团。3.26笔试。
- Symbol. Iterator iterator
- The great charm of cookies
- Practical analysis: implementation principle of APP scanning code landing (app+ detailed logic on the web side) with source code
- 416-二叉树(前中后序遍历—迭代法)
- PostgreSQL DBA quick start - source compilation and installation
- 为什么 JSX 语法这么香?
- ByteDance Interviewer: talk about the principle of audio and video synchronization. Can audio and video be absolutely synchronized?
- np.float32()
猜你喜欢

How to standardize data center infrastructure management process

Getting user information for applet learning (getuserprofile and getUserInfo)

415 binary tree (144. preorder traversal of binary tree, 145. postorder traversal of binary tree, 94. inorder traversal of binary tree)

Geogebra instance clock

SQL Server AVG函数取整问题

Queue queue

Phpstrom code formatting settings

ssh远程免密登录

canvas掉落的小球重力js特效动画

Cicflowmeter source code analysis and modification to meet requirements
随机推荐
CVPR 2022 oral | NVIDIA proposes an efficient visual transformer network a-vit with adaptive token. The calculation of unimportant tokens can be stopped in advance
416-二叉树(前中后序遍历—迭代法)
操作符详解
Programming questions (continuously updated)
How do novices choose the grade of investment and financial products?
How to manage massive network infrastructure?
SQL sever基本数据类型详解
Array seamless scrolling demo
Mise en œuvre du rendu de liste et du rendu conditionnel pour l'apprentissage des applets Wechat.
PostgreSQL DBA quick start - source compilation and installation
canvas管道动画js特效
PostgreSQL
机器学习——主成分分析(PCA)
2021-08-17
SQL Sever关于like操作符(包括字段数据自动填充空格问题)
Queue queue
Error reading CSV (TSV) file
解决微信小程序rich-text富文本标签内部图片宽高自适应的方法
微信小程序學習之 實現列錶渲染和條件渲染.
分布式 | 如何与 DBLE 进行“秘密通话”