微信小程序直接引用外部地图（腾讯地图、高德地图导航）附代码！！

效果如图：

附代码：

<template>
	<view class="content">
		<image src="../../static/logo.png" class="addr-image" @click="mapNavigation()"></image>
	</view>
</template>

<script>
	// 引入SDK核心类
	var QQMapWX = require('../../static/qqmap-wx-jssdk.js')
	var qqmapsdk;

	export default {
		data() {
			return {
				addr: "天虹",
				longitude:'',
				latitude:''
			}
		},
		onLoad() {

		},
		methods: {
			// 点击按钮触发方法
			mapNavigation() {
				// console.log(e.target.addr);
				var addr = this.addr
				var that = this;
				console.log("打印addr：" + addr)
				// 使用 JavaScript SDK 获取目的地经纬度
				// 实例化API核心类
				qqmapsdk = new QQMapWX({
					key: '76LBZ-AYVC3-PHG3I-YRN4C-2P2G6-G3B7F'
				});
				qqmapsdk.geocoder({
					address: addr,
					success: function(res) {
						console.log("hhhh" + res);
						var local = res.result.location;
						that.longitude= local.lng;
						that.latitude=local.lat
					},
					false: function(res) {
						console.log("失败")
					}
				})
				// 使用微信内置地图查看位置
				wx.getLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						console.log("经" + that.latitude)
						console.log("纬" + that.longitude)
						wx.openLocation({
							'latitude': 30.256237664806,
							'longitude': 120.2037621592,
							// latitude: that.data.latitude,
							// longitude: that.data.longitude,
							scale: 28,
							name: addr, //打开后显示的地址名称
						})
					}
				})
			}
		}
	}
</script>

<style>
	.addr-image {
		width: 50rpx;
		height: 50rpx;
	}
</style>

1：配置使用位置权限

踩坑：page.json的配置文件编译到微信小程序的时候发现不见了，需要在app.json重新手动配置官方文档踩坑说明

app.json/page.json官方配置文档

配置Key

下载SDK

示例全局代码：