vue,uniapp引入js文件调用高德地图

<script>
	import amap from '@/static/libs/amap-wx.130.js';
	export default {
		data() {
			return {
				key: '高德key',
				amapPlugin: null,
			}
		}
	}
	/* 
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.amapPlugin.getRegeo({
				success: function(data) {
					console.log(data[0])
				},
				fail: function(info) {
					//失败回调
					console.log(info)
				}
			}) */
			/* this.amapPlugin.getPoiAround({
				success: function(data) {
					console.log(data)
				},
				fail: function(info) {
					//失败回调
					console.log(info)
				}
			}) */
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在uniapp项目中接入高德地图,可以按照以下步骤进行操作: 1. 在高德开放平台申请应用并获取应用的AppKey。 2. 安装uni-app高德地图插件,可以通过uni-app官方插件市场或npm进行安装。 3. 在App.vue引入高德地图插件,并初始化地图。 ```javascript <template> <view> <map :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" :include-points="includePoints"></map> </view> </template> <script> import QQMapWX from '@/common/js/qqmap-wx-jssdk.min.js';//引入高德地图插件 export default { data() { return { longitude: 113.324520, latitude: 23.099994, scale: 14, markers: [], includePoints: [] }; }, onReady() { this.mapCtx = uni.createMapContext('map'); this.initMap(); }, methods: { //初始化地图 initMap() { let key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';//AppKey let qqmapsdk = new QQMapWX({ key: key }); qqmapsdk.reverseGeocoder({ success: res => { let { latitude, longitude } = res.result.location; this.longitude = longitude; this.latitude = latitude; this.markers.push({ id: 0, longitude: this.longitude, latitude: this.latitude, iconPath: "/static/img/map-marker.png", width: 30, height: 30 }); this.includePoints.push({ latitude: this.latitude, longitude: this.longitude }); } }); } } }; </script> ``` 4. 在manifest.json文件中配置高德地图插件的AppKey。 ```json { "mp-weixin": { "appid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "miniprogramRoot": "pages", "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxid" }, "myOtherPlugin": { "version": "1.2.3", "provider": "wxid" }, "myAmap": { "version": "1.0.0", "provider": "wxid", "options": { "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" } } } } } ``` 这样就可以在uniapp项目中成功接入高德地图了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值