快应用适配微信openLocation接口

初冬、阳光

快应用适配微信openLocation接口

大家都知道，其他平台小程序，都有官方提供的openLocation接口（通过位置坐标在地图上显示对应的标注，同时支持导航），但是快应用官方没有提供，其实官方并不是没有提供，而是提供了更自由的方式。接下来我给大家介绍一下快应用openLocation适配。 1、首先写好页面的布局模板，展示一个地图，一个地址展示栏，一个导航按钮，一个我的位置控制组件，代码如下：

1. <template>
2. <div class="open-location-contanier">
3. <map id='map' class='map' markers="{{markers}}" controls="{{controls}}" @controltap="controlTap" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" showmylocation="{{showMylocation}}"></map>
4. <div class='map-tool'>
5. <div class='location-info-box'>
6. <text class='location-name'>{{name}}</text>
7. <text class='location-address'>{{address}}</text>
8. </div>
9. <text class='location-btn' if='{{isShowNav}}' @click="goNavigation">导航</text>
10. </div>
11. </div>
12. </template>

复制代码

2、样式如下，大家可以自定义

1. <style>
2. .open-location-contanier {
3. display: flex;
4. flex: 1;
5. flex-direction: column;
6. }
8. .location-info-box {
9. height: 200px;
10. background-color: #fff;
11. display: flex;
12. flex-direction: column;
13. justify-content: center;
14. }
16. .location-name {
17. font-size: 34px;
18. color: #333;
19. width: 500px;
20. lines: 1;
21. text-overflow: ellipsis;
22. }
24. .location-address {
25. font-size: 24px;
26. line-height: 30px;
27. color: #666;
28. width: 500px;
29. lines: 1;
30. text-overflow: ellipsis;
31. }
33. .map {
34. flex: 1;
35. }
37. .map-tool {
38. display: flex;
39. justify-content: space-between;
40. align-items: center;
41. padding: 0 40px;
42. }
43. </style>

复制代码

3、页面js逻辑

1. <script>
2. import router from '@system.router'
3. import prompt from '@system.prompt'
4. import pkg from '@system.package'
5. import device from '@system.device'
7. // 地图列表
8. const mapList = [
9. {
10. uri: 'baidumap://map/navi',
11. packageName: 'com.baidu.BaiduMap',
12. name: '百度地图'
13. },
14. {
15. uri: 'androidamap://navi',
16. packageName: 'com.autonavi.minimap',
17. name: '高德地图'
18. },
19. {
20. uri: 'qqmap://map/routeplan',
21. packageName: 'com.tencent.map',
22. name: '腾讯地图'
23. }
24. ]
26. export default {
27. protected: {
28. // 位置名称 必填
29. name: '故宫',
30. // 地址 必填
31. address: '故宫',
32. // 缩放级别
33. scale: 17,
34. //gcj02坐标系 必填
35. latitude: 0,
36. longitude: 0,
37. },
38. private: {
39. //是否显示我的位置
40. showMylocation: false,
41. // 位置标注
42. markers: [],
43. // 我的位置控制
44. controls: [
45. {
46. id: 1,
47. iconPath: './icon_location_btn.png',
48. position: {
49. right: 20,
50. bottom: 20,
51. width: 120,
52. height: 120
53. }
54. }
55. ],
56. // 是否显示导航按钮
57. isShowNav: true
59. },
60. onInit() {
61. let {
62. name,
63. address,
64. latitude,
65. longitude,
66. scale,
67. } = this
69. scale = scale && !isNaN(scale) ? scale : 17
71. //设置位置标注
72. this.markers = [
73. {
74. latitude,
75. longitude,
76. width: 160,
77. height: 160,
78. iconPath: 'http://mapp.alicdn.com/1544079046704Gq25RHeyZTQ7hJd.jpg',
79. callout: {
80. content: name,
81. display: 'always',
82. borderRadius: 10,
83. padding: 20,
84. fontSize: 28,
85. backgroundColor: '#FF9645',
86. color: '#ffffff'
87. }
88. }
89. ]
90. //对应品牌隐藏信息
91. this.checkDecive()
94. },
95. // 我的位置组件点击
96. controlTap(event) {
97. if (event.controlId === 1) {
98. this.showMylocation = true
99. this.$element('map').moveToMyLocation()
100. }
101. },
102. // 检查设备信息 并对不支持的品牌隐藏按钮
103. checkDecive() {
104. device.getInfo()
105. .then(({ brand }) => {
106. brand = brand.toLocaleLowerCase();
107. if (brand.indexOf('vivo') !== -1) {
108. this.isShowNav = false;
109. }
110. })
111. },
112. // 打开导航
113. goNavigation() {
114. let {
115. name,
116. address,
117. latitude,
118. longitude,
119. } = this
120. // 操作框选择需要打开的地图
121. prompt.showContextMenu({
122. itemList: mapList.map(v => v.name),
123. success: (res) => {
124. let index = res.index
125. let item = mapList[index]
126. // 检查是否安装了对应的地图app
127. pkg.hasInstalled({
128. package: item.packageName
129. })
130. .then((res) => {
132. let result = res.data.result
133. if (result) {
134. let url
135. //百度地图
136. if (index === 0) {
137. // 将gcj02坐标系转化成百度坐标系
138. const {
139. lat, lng
140. } = go_decrypt_bd(latitude, longitude)
141. url = `baidumap://map/direction?destination=${name}|latlng:${lat},${lng}|addr:${address}&src=org.tujia.hotel&coord_type=gcj02`
142. }
143. //高德地图
144. else if (index === 1) {
146. url = `amapuri://route/plan?dlat=${latitude}&dlon=${longitude}&dname=${name}&dev=0&t=0`
147. }
148. //腾讯地图
149. else if (index === 2) {
150. url = `qqmap://map/routeplan?type=drive&referer=kpweizhi&from=我的位置&fromcoord=CurrentLocation&to=${name}&tocoord=${latitude},${longitude}`
151. }
153. router.push({
154. uri: url
155. })
156. }
157. else {
158. prompt.showToast({
159. message: '请先安装' + item.name
160. })
161. }
162. })
163. .catch(err => {
164. console.log('err:', err)
165. })
166. }
167. })
168. }
169. }
172. /**
173. * gcj02坐标系转化成百度地图坐标系
174. *
175. * @param {number} lat gcj02纬度
176. * @param {number} lng gcj02经度
177. * @returns {number,number} 百度地图经纬度
178. */
179. function go_decrypt_bd(lat, lng) {
180. var x_pi = (Math.PI * 3000) / 180.0
181. var x = lng,
182. y = lat
183. var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
184. var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
185. lng = z * Math.cos(theta) + 0.0065
186. lat = z * Math.sin(theta) + 0.006
187. return {
188. lat,
189. lng
190. }
191. }

复制代码

使用方法：

1. router.push({
2. uri: 'pages/openLocation',
3. params: {
4. name: '故宫',
5. address: '北京市东城区景山街前街4号',
6. scale: 17,
7. latitude:116.397067,
8. longitude:39.917399
9. }
10. })

复制代码

看完代码，大家就知道了，其实就是通过地图组件和url scheme功能来适配的openLocation，功能很完美。其实快应用相对其他平台很开放，有很多功能值得探索。 提供几张效果图：

左耳毛毛

666

wyc

很666

Holy

很强~