微信小程序使用地图map (详细)

直接看代码：
可直接赋值实现，图标可根据自己需要更改

   <view class="top"><map wx:if="{{markersStatus}}" class="map" id="myMap" scale="{{scale}}" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{datatlist}}" bindregionchange="mapChange"  show-location='true'></map>// 这个是上图灰色图标  点击可回到初始位置<view class="nav-panel"><image class="icon-location" bindtap="getCenterLocation" src="https://applets.jinchehui.com/static/images/icon_location_2.svg" bindtap="getCenterLocation"></image></view></view><van-dialog id="van-dialog" />

小程序地理定位qqmap-wx-jssdk.js：qqmap-wx-jssdk.js
点击可进行下载里边的：下载微信小程序JavaScriptSDK


var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); //自行根据文件放置
var qqmapsdk;
qqmapsdk = new QQMapWX({key: '申请的key'
});
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
Page({/*** 页面的初始数据*/data: {lat: '', //纬度lng: '', //经度latitude: '',longitude: '',keyword: '',scale: 16, //5-18markersStatus: false,datatlist: {}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getLocation();this.bindAuthLocation(); //授权位置},//授权位置按钮bindAuthLocation() {//获取授权结果查看是否已授权位置wx.getSetting({success: (res) => {if (res.authSetting['scope.userLocation'] == undefined && !res.authSetting['scope.userLocation']) //未授权位置（首次进来页面）this.getLocation(); //获取当前位置信息else if (res.authSetting['scope.userLocation'] === false) //未授权位置(点击官方授权弹框取消按钮后)Dialog.confirm({title: '提示',message: '需要获取你的地理位置,你的位置信息将用于位置显示',}).then(() => {this.bindConfirmLocation()// on confirm}).catch(() => {// on cancel});else //已授权this.getLocation(); //获取当前位置信息}})},//定位授权框确认按钮bindConfirmLocation(e) {//打开设置页面进行授权设置wx.openSetting({success: (res) => {if (res.authSetting['scope.userLocation']) {//获取当前位置信息this.getLocation(); //获取当前位置信息}}});},//获取位置getLocation() {this.mapCtx = wx.createMapContext('myMap')// 调用接口wx.getLocation({type: 'gcj02',success: (res) => {// console.log("res", res)if (res) {this.data.lat = res.latitude;this.data.lng = res.longitude;this.setData({latitude: this.data.lat,longitude: this.data.lng,markersStatus: true})} else {wx.showToast({title: '定位失败',icon: 'none',duration: 1500})}qqmapsdk.reverseGeocoder({success: (res) => {console.log('=============', res)},});this.getFood(res.longitude, res.latitude)this.setData({markersStatus: true})},fail(err) {wx.hideLoading({});console.log("asafasfs", err)// wx.showToast({//     title: '定位失败',//     icon: 'none',//     duration: 1500// })setTimeout(function () {// wx.navigateBack({//     delta: 1// })}, 1500)}})},//点击回到初始位置getCenterLocation: function () {var that = this;that.mapCtx.moveToLocation()},//滑动获取周围的店铺mapChange(e) {if (e.type === 'end') {this.mapCtx.getCenterLocation({success: res => {console.log(res);this.getFood(res.longitude, res.latitude)}})}},//搜索附近的店铺getFood(longitude, latitude) {qqmapsdk.search({location: {latitude: latitude,longitude: longitude,},keyword: '',success: (res) => {console.log('地理位置:', res);var mark = []for (let i in res.data) {mark.push({iconPath: '/images/adr.png', //周边的图标    根据自己需要换alpha: 1,title: res.data[i].title,id: Number(i),longitude: res.data[i].location.lng,latitude: res.data[i].location.lat,width: parseInt(31.91) + 'px',//设置图标的大小height: parseInt(31.91) + 'px',})}mark.push({iconPath: '/images/address.png', //中心的图标     根据自己需要换id: Number(res.data.length),alpha: 1,longitude: longitude,latitude: latitude,width: parseInt(43.87) + 'px',height: parseInt(43.87) + 'px',})this.setData({datatlist: mark,})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});},
})

浅记一下！

微信小程序使用地图map (详细)相关推荐

微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
腾讯位置服务--微信小程序JSSDK地图开发
腾讯位置服务–微信小程序JSSDK地图开发 1.腾讯位置服务文档传送门:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview [ ...
微信小程序API之map
微信小程序API之map wxml: <map id="map" longitude="113.324520" latitude="23.099 ...
微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
uni-app 微信小程序中关于 map 地图使用案例分享
这篇文章,我将带领大家使用微信内置地图详细讲解关于如何配置地图.打开地图和使用地图. 目录 1.配置地图 2.先写页面内,这里我创建了一个 map示例页面 mapDemo.vue 2.1 关于 map ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
微信小程序选择地址填写详细地址定位地点
感觉自己做了一个没有意义的东东,选择地址填写详细地址就可以找到那个地方. 如下图所示首先需要一个写好的城市选择器,你可以自己写,也可以私信我h(￣▽￣)~* 这是外部引入的组件 <area_p ...

微信小程序使用地图map (详细)

微信小程序使用地图map (详细)相关推荐

最新文章

热门文章