uniapp：微信小程序地图功能

uni-app 中使用微信小程序第三方 SDK 及资源汇总

1、高德地图>控制台>申请小程序key

2、下载它的微信小程序版 SDK

微信小程序SDK下载

3、新建一个 uni-app 项目，新建一个 common 目录，然后将前面下载得到的 amap-wx.js 的文件复制进去。在 index.vue 中，引入高德小程序 SDK。

import amap from '../../common/amap-wx.js';
export default {
}

4、在 onLoad 中初始化一个高德小程序 SDK 的实例对象。

import amap from '../../common/amap-wx.js';
export default {  data() {  return {  amapPlugin: null,  key: '这里填写高德开放平台上申请的key'  }  },  onLoad() {  this.amapPlugin = new amap.AMapWX({  key: this.key  });  }
}

5、利用高德小程序 SDK，获取当前位置地址信息，以及当前位置的天气情况。

import amap from '../../common/amap-wx.js';
export default {  data() {  return {  amapPlugin: null,  key: '高德key',  }  },  onLoad() {  this.amapPlugin = new amap.AMapWX({  key: this.key  });  },  methods: {  getRegeo() {  uni.showLoading({  title: '获取信息中'  });  this.amapPlugin.getRegeo({  success: (data) => {  console.log(data)  uni.hideLoading();  }  });  }  }
}

完整代码

<template><view class="content"><map style="width: 750rpx;height: 750rpx;" :longitude="longitude" :latitude="latitude" :markers="markers":include-points="includePoints" :show-compass="true" :show-location="true"></map></view>
</template><script>import amap from './amap-wx.js';export default {data() {return {amapPlugin: null,key: '把你申请的key填入进来',longitude: '', //经度latitude: '', //纬度markers: [], //标记点includePoints: [], //缩放视野以包含所有给定的坐标点}},onLoad() {// #ifdef MP-WEIXINthis.amapPlugin = new amap.AMapWX({key: this.key});this.map1();// map1:使用高德的API进行定位// map2:uni.getLocation定位，在小程序内拿不到address数据。数据对比看下图// #endif},methods: {map1() {let _this = this;uni.showLoading({title: '获取信息中'});this.amapPlugin.getRegeo({success: (res) => {console.log('map1');console.log(res)_this.latitude = res[0].latitude;_this.longitude = res[0].longitude;let market = {id: 1,latitude: _this.latitude,longitude: _this.longitude,iconPath: '../../static/marketIcon.png',width: 24,height: 24,title: res[0].name,callout: {content: res[0].name,color: '#ffffff',fontSize: '14',display: 'ALWAYS',bgColor: '#FF6F1E',padding: '10',textAlign: 'center',borderRadius: '15'}}_this.markers[0] = market;_this.address1 = market;_this.markers = [..._this.markers];_this.includePoints[0] = market;}});uni.hideLoading();},map2() {let _this = this;uni.getLocation({type: 'gcj02',geocode: true,success: function(res) {console.log('map2')console.log(res);_this.latitude = res.latitude;_this.longitude = res.longitude;let market = {id: 1,latitude: _this.latitude,longitude: _this.longitude,iconPath: '../../static/marketIcon.png',width: 24,height: 24,title: '测试名称',callout: {content: '测试名称',color: '#ffffff',fontSize: '14',display: 'ALWAYS',bgColor: '#FF6F1E',padding: '10',textAlign: 'center',borderRadius: '15'}}_this.markers[0] = market;_this.address1 = market;_this.markers = [..._this.markers];_this.includePoints[0] = market;},fail: function(err) {console.log(err)},});}}}
</script><style>
</style>

uniapp：微信小程序地图功能相关推荐

uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
微信小程序地图功能的实现 map
微信小程序地图功能的实现 map wxml部分地图标签 wxss js 这次项目有个功能是地图以选项卡方式可以选择进行不同位置展示实现方法就是将地图和tab选项卡结合选项卡刚开始我套了之前的滑动 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...
uni-app 微信小程序分享功能传参接收与调试
uni-app 微信小程序功能传参接收与调试当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现分享给朋友 ...

uniapp：微信小程序地图功能

uniapp：微信小程序地图功能相关推荐

最新文章

热门文章