最开始遇到地图这块的时候，想的比较复杂。想到是不是需要引用高德或者百度地图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~

【小程序地图】uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。相关推荐

HBuilderX搭建微信小程序；HBuilderX开发uni-app微信小程序；uni-app开发微信小程序；使用uni-app搭建微信小程序；使用uni-ui模板搭建微信小程序步骤
1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.w ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...

【小程序地图】uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。