微信小程序开发之——附近酒店-实现(2)

一概述

腾讯地图sdk配置
地图全屏显示并将位置定位到当前位置
搜索附近的酒店
显示当前位置的名称
点击GPS图标，回到定位位置

二腾讯地图sdk配置

2.1 将腾讯地图SDK添加到小程序libs文件夹下(没有先创建)

2.2 用接口测试号(也可以正式号)扫码登录后，绑定合法域名

https://apis.map.qq.com

2.3 初始化SDK(pages/map/map.js)

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk')
// 实例化API核心类
var qqmapsdk = new QQMapWX({key: 'R72BZ-EMTKU-JGKVD-2VXJM-WMHC7-xxxx' // 必填
})

三地图全屏显示并将位置定位到当前位置

3.1 布局文件(map.wxml)

<map  id="mapId" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" show-location>
</map>

3.2 样式文件(map.wxss)

map{height: 100vh;width: 100vw;
}

3.3 逻辑文件(map.js)

  data: {longitude: null, // 地图中心点经度latitude: null, // 地图中心点纬度},onReady: function () {wx.getLocation({type: 'gcj02',success: res => {//console.log(res)this.setData({longitude: res.longitude,latitude: res.latitude,})}})},

3.4 权限设置(app.json)

 "permission": {"scope.userLocation": {"desc": "你的位置信息将用于小游戏位置接口的效果展示"}},

3.5 效果图

四搜索附近的酒店(markers)

4.1 布局文件(map.wxml)

<map  id="mapId" bindregionchange="bindRegionChange"  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
</map>

说明：

bindregionchange：当地图视图区域发生变化时调用
markers：显示搜索到的标记物

4.2 逻辑文件(map.js)

 data: {scale: '16',markers: null,longitude: null, // 地图中心点经度latitude: null, // 地图中心点纬度},//视野发生变化时触发bindRegionChange: function (e) {//console.log(e)if (e.type === 'end') {this.mapCtx.getCenterLocation({success: res => {this.getHotel(res.longitude, res.latitude)},fail: res => {console.log("搜索失败")}})}},//搜索酒店getHotel(longitude, latitude) {//调用接口qqmapsdk.search({keyword: '酒店',location: {scale: 16,longitude: longitude,latitude: latitude},success: res => {// console.log(res)var mark = []//酒店标记for (let i in res.data) {mark.push({iconPath: '/images/hotel.png',id: parseInt(i),latitude: res.data[i].location.lat,longitude: res.data[i].location.lng,width: 30,height: 30})}//中心点标记mark.push({iconPath: '/images/center.png',id: res.data.length,longitude: longitude,latitude: latitude,width: 15,height: 40})//标记显示this.setData({markers: mark})},fail: res => {console.log(res)}})},

说明：

MapContext.getCenterLocation(Object object)：获取当前地图中心的经纬度。返回的是 gcj02 坐标系

4.3 效果图

五显示当前位置的名称

5.1 布局文件(map.wxml)

<map  id="mapId" bindregionchange="bindRegionChange"  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
</map>

5.2 样式文件(map.wxss)

cover-view.currentName{text-align: center;background-color: green;padding: 3%;color: white;
}

5.3 逻辑文件(map.js)

data: {scale: '16',markers: null,longitude: null, // 地图中心点经度latitude: null, // 地图中心点纬度currentName: ''},getPositionName(longitude, latitude) {qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: res => {//console.log('定位信息', res)this.setData({currentName: res.result.address})},fail: res => {this.setData({currentName: '定位失败'})}})},

5.4 效果图

六点击GPS图标，回到定位位置

6.1 布局文件(map.wxml)

<map  id="mapId" bindregionchange="bindRegionChange"  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
<cover-view class="currentName" marker-id="1">{{currentName}}</cover-view><cover-view class="gps" marker-id="2"><cover-image src="/images/gps.png" bindtap="setPosition"></cover-image></cover-view>
</map>

6.2 样式文件(map.wxss)

cover-view.gps{position: absolute;bottom: calc(5%);right: calc(5%);
}

6.3 逻辑文件(map.js)

 setPosition: function () {// 将地图中心移动到当前定位点this.mapCtx.moveToLocation()}

6.4 效果图

七参考代码

参考代码

微信小程序开发之——附近酒店-实现(2)相关推荐

微信小程序开发之——附近酒店-分析(1)
一概述 map组件展示地图信息通过腾讯地图提供的微信小程序javaScript SDK-关键词搜索(酒店)和逆地址解析(精度和纬度获取当前位置名称) 模拟器和真机演示,接口及显示问题二腾讯地图 ...
小程序开发工具_微信小程序开发工具：电商、酒店、展示、文章制作教程
现在市面上各种微信小程序开发工具已经很多了,类型也不同,很多小白不知道该怎么用.其实如果能够选对智能小程序开发平台,那么开发小程序也可以是很简单的事,不管是什么类型,都能很快生成.接下来我就跟教大家各 ...
小程序开发代码_快速学会微信小程序开发，无需懂代码！
现在想要制作自己的小程序的人越来越多,但大多数都不懂任何代码知识,不知该如何制作.其实随着各种第三方开发工具的出现,无需微信小程序开发源代码,小白也能顺利生成一个自己的小程序了.下面我就跟大家说下该如 ...
微信小程序开发详细步骤解决方案
什么行业适合使用微信小程序? 01. 什么是微信小程序? 微信内嵌的小程序,不需要下载安装就能使用,具有开发成本低.使用方便等特点,它实现了应用"触手可及",用户通过扫描或搜索就能 ...
小程序开发工具_有哪些好用的微信小程序开发工具？如何选择？
小程序对商家和个人的帮助很大,可以为商家导入新的线上流量.那么该如何拥有自己的小程序呢?如果你想自己制作小程序的话,目前有两种方式,一种是使用"微信开发者工具",需要精通代码编程, ...
微信小程序开发流程的两种方法科普
现在微信小程序早已渗透我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信公 ...
小程序发布上线流程_微信小程序开发流程的两种方法科普
现在微信小程序早已渗透到我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...

微信小程序开发之——附近酒店-实现(2)

一概述

二腾讯地图sdk配置

2.1 将腾讯地图SDK添加到小程序libs文件夹下(没有先创建)

2.2 用接口测试号(也可以正式号)扫码登录后，绑定合法域名

2.3 初始化SDK(pages/map/map.js)

三地图全屏显示并将位置定位到当前位置

3.1 布局文件(map.wxml)

3.2 样式文件(map.wxss)

3.3 逻辑文件(map.js)

3.4 权限设置(app.json)

3.5 效果图

四搜索附近的酒店(markers)

4.1 布局文件(map.wxml)

4.2 逻辑文件(map.js)

4.3 效果图

五显示当前位置的名称

5.1 布局文件(map.wxml)

5.2 样式文件(map.wxss)

5.3 逻辑文件(map.js)

5.4 效果图

六点击GPS图标，回到定位位置

6.1 布局文件(map.wxml)

6.2 样式文件(map.wxss)

6.3 逻辑文件(map.js)

6.4 效果图

七参考代码

微信小程序开发之——附近酒店-实现(2)相关推荐

最新文章

热门文章

微信小程序开发之——附近酒店-实现(2)

一 概述

二 腾讯地图sdk配置

2.1 将腾讯地图SDK添加到小程序libs文件夹下(没有先创建)

2.2 用接口测试号(也可以正式号)扫码登录后，绑定合法域名

2.3 初始化SDK(pages/map/map.js)

三 地图全屏显示并将位置定位到当前位置

3.1 布局文件(map.wxml)

3.2 样式文件(map.wxss)

3.3 逻辑文件(map.js)

3.4 权限设置(app.json)

3.5 效果图

四 搜索附近的酒店(markers)

4.1 布局文件(map.wxml)

4.2 逻辑文件(map.js)

4.3 效果图

五 显示当前位置的名称

5.1 布局文件(map.wxml)

5.2 样式文件(map.wxss)

5.3 逻辑文件(map.js)

5.4 效果图

六 点击GPS图标，回到定位位置

6.1 布局文件(map.wxml)

6.2 样式文件(map.wxss)

6.3 逻辑文件(map.js)

6.4 效果图

七 参考代码

微信小程序开发之——附近酒店-实现(2)相关推荐

最新文章

热门文章

一概述

二腾讯地图sdk配置

三地图全屏显示并将位置定位到当前位置

四搜索附近的酒店(markers)

五显示当前位置的名称

六点击GPS图标，回到定位位置

七参考代码