效果图：

• 坐标：示例图中的坐标为“天安门"。<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>

<map>注意事项：

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

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

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: "重庆九龙坡"
	    });
   }
}

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

markers

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