一、效果：

点击图片一后，会跳转到图片二页面（无需自己写图片二页面，小程序会自动打开此页面）

PS：示例图中(坐标)为“天安门"。( <map> 可添加多个坐标点 )

方法一：点击uniapp中的<map>插件唤醒地图
方法二：可以点击<view>、<button>等标签也可以唤醒地图

（图片一）

（图片二）：

点击(上面图片一)后，会自动打开(图片二中)左边的图片
点击（图片二左边图片）右下角绿色icon，会出现底部打开地图app选项弹窗（图片二右边图片）。选择app后，会自动打开对应app软件，如没有下载，则显示下载app的页面。

二、实现方法：

html：

<!-- 方法一：点击小程序map地图插件跳转到app中打开 -->
<map @click="mapFun" class='map' :latitude="latitude" :longitude="longitude" :markers="covers" /><!-- 方法二：点击button等按钮打开 -->
<button type="default" @click="mapFun">唤醒题图</button>

js：

// 高德地图、腾讯、百度等地图中打开
data(){return{latitude: 39.909,longitude: 116.39742,covers: [{latitude: 39.909,longitude: 116.39742,width:'50rpx'}]}
},
methods:{mapFun() {uni.openLocation({latitude: this.latitude,, //纬度 - 目的地/坐标点longitude: this.longitude,, //经度 - 目的地/坐标点name: "电脑城",address: "重庆九龙坡"});}
}

（HTML中）

<map>注意事项：

(使用map地图插件时，具体注意事项及使用方法，请参考官方文档：map | uni-app官网)

<map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标，用错坐标类型会显示偏移。
App平台 layer-style 属性需要在地图服务商后台创建，值设置为高德后台申请的字符串，详情()自定义地图-创建地图-开发指南-Android 地图SDK | 高德地图API详情()
<map> 组件在不同平台的底层引擎是不同的：微信小程序为腾讯地图；H5为腾讯地图或谷歌地图；App、支付宝（中国大陆地区版本）小程序为高德地图；百度小程序、快应用为百度地图。app-vue也可以使用百度地图，在manifest中配置，打包后生效，但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图。
map 组件默认的api是参考微信小程序的，如需要使用plus.map，可以通过$getAppMap获取原生地图对象，详见()uni.createMapContext(mapId,this) | uni-app官网详见()。注意nvue的map组件不是plus.map对象，无法使用$getAppMap
<map> 组件默认为国测局坐标，调用 uni.getLocation 返回结果传递给 <map> 组件时，需指定 type 为 gcj02。
......（其他注意事项可参考上方官网地址）

<map>其他配置：（文档：map | uni-app官网）

markers

标记点用于在地图上显示标记的位置

属性	说明	类型	必填	备注	平台差异说明
id	标记点id	Number	是	marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
title	标注点名	String	否	点击时显示，callout存在时将被忽略	App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0	App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
alpha	标注的透明度	Number	否	默认1，无透明，范围 0 ~ 1	App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
width	标注图标宽度	Number	否	默认为图片实际宽度	App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
height	标注图标高度	Number	否	默认为图片实际高度	App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
clusterId	自定义点聚合簇效果时使用	Number	否		App-nvue 3.1.0+、微信小程序
customCallout	自定义气泡窗口	Object	否		app暂时不支持、微信小程序、支付宝小程序
aria-label	无障碍访问，（属性）元素的额外描述	String	否		App-nvue 3.1.0+、微信小程序

uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开相关推荐

uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
uni-app 微信小程序接入高德SDK
uni-app 微信小程序接入高德SDK 参考文档:https://lbs.amap.com/api/wx/gettingstarted 一.获取高德Key 配置高德key 二.获取高德key的操作步 ...
uni-app 微信小程序用高德sdk获取地理位置，以及天气信息
uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤: 1. 注册高德开发者,并获取应用key 概述-微信小程序插件 | 高德地图API 在这个网页最下面,按步骤来就可以了 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”
本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段我们在用 uni-app 开发微信小程序时, ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(七）---登陆注销功能与微信小程序测试号的申请
到此为止,我们只差一个退出登陆功能了. 回到index.vue页面,之前我们已经预留了退出按钮,现在给它加上功能 <button class="mybutton" type= ...
Uni-app微信小程序开发
Uni-app微信小程序开发环境配置下载好h5和微信小程序,在h5中创建一个uni-app空项目第一次运行到微信小程序的时候,需要将小程序的安装路径放到运行下面文件含义 Pages:存放页面文 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...

uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开

一、效果：

二、实现方法：

html：

js：

（HTML中）

<map>其他配置：（文档：map | uni-app官网）

uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开相关推荐

最新文章

热门文章

uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开

一、效果：

二、实现方法：

html：

js：

（HTML中 ）

<map>其他配置：（文档：map | uni-app官网）

uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开相关推荐

最新文章

热门文章

（HTML中）