devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp腾讯地图JavaScript Api，H5端和原生APP端可用_uniapp使用腾讯地图

作者：很楠不爱3 | 2024-04-27 08:34:02

赞

踩

uniapp使用腾讯地图

        因项目需要，在uniapp中集成使用腾讯地图，为了方便维护，希望通过一套代码实现H5和APP同时可用。H5显示相对简单，APP端比较麻烦，记录下实现过程

一、集成步骤

1.使用 renderjs

script标签使用renderjs，因为JavaScript Api需要调用DOM对象，APP需要使用renderjs技术，保证script运行在webview环境，才能调用DOM对象。

  1. <script lang="renderjs" module="test">
  2. </script>

2.引用地图script


导入腾讯地图JS脚本，因为腾讯地图js不是按照uniapp格式编写，所以不能直接import导入，需要包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。

创建loadJs.js 文件

  1. function loadJs(src) {
  2.   return new Promise((resolve,reject)=>{
  3.     let script = document.createElement('script');
  4.     script.type = "text/javascript";
  5.     script.src= src;
  6.     document.body.appendChild(script);
  7.       
  8.     script.onload = ()=>{
  9.       resolve();
  10.     }
  11.     script.onerror = ()=>{
  12.       reject();
  13.     }
  14.   }).catch((e) => {})
  15. }
  16.  
  17. export default loadJs


在页面中使用

  1. <script lang="renderjs" module="test">
  2.     import loadJs from "../../common/loadJs.js"
  3.     
  4.     export default {
  5.  
  6.         data() {
  7.             return {
  8.                 
  9.             }
  10.         },
  11.         mounted(){
  12.             console.log('renderjs初始化完毕')
  13.             loadJs('https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77').then(()=>{
  14.                 // 加载成功，进行后续操作
  15.             })
  16.         },
  17.          methods: {
  18.         }
  19.     }
  20. </script>

3.修改js，兼容uniapp

下载腾讯官网的例子，改造成uniapp兼容的格式。有两种方式，

方式一：

将官网例子中 script 封装成一个个的function，定义在 vue文件的 methods 中，这样就可以直接调用。

方式二：

将官网例子中 script 代码全部拷贝到一个js文件中，再把需要调用的 function 通过 export 关键字导出，在vue文件中进行 import 调用。

4.修改监听事件

腾讯官网例子都是web端的，点击事件都是click，H5端运行需要改成touchend，否则点击无响应

Web端

svg.addEventListener('click', this.onClick); web端用click事件

H5端

svg.addEventListener('touchend', this.onClick); // H5端用touchend事件

二、示例

腾讯官网例子

以自定义覆盖物 -> DOMOverlay 为例，实操下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>DOMOverlay</title>
  9. </head>
  10. <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  11. <style type="text/css">
  12.     html,
  13.     body {
  14.         height: 100%;
  15.         margin: 0px;
  16.         padding: 0px;
  17.     }
  18.  
  19.     #container {
  20.         width: 100%;
  21.         height: 100%;
  22.     }
  23. </style>
  24.  
  25. <body onload="initMap()">
  26. 	<div id="container"></div>
  27. 	<script>
  28. 		var SVG_NS = 'http://www.w3.org/2000/svg';
  29. 		// 自定义环状饼图 - 继承DOMOverlay
  30. 		function Donut(options) {
  31. 			TMap.DOMOverlay.call(this, options);
  32. 		}
  33.  
  34. 		Donut.prototype = new TMap.DOMOverlay();
  35.  
  36. 		// 初始化
  37. 		Donut.prototype.onInit = function(options) {
  38. 			this.position = options.position;
  39. 			this.data = options.data;
  40. 			this.minRadius = options.minRadius || 0;
  41. 			this.maxRadius = options.maxRadius || 50;
  42. 		};
  43.  
  44. 		// 销毁时需解绑事件监听
  45. 		Donut.prototype.onDestroy = function() {
  46. 			if (this.onClick) {
  47. 				this.dom.removeEventListener(this.onClick);
  48. 			}
  49. 		};
  50.  
  51. 		// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
  52. 		Donut.prototype.createDOM = function() {
  53. 			let svg = document.createElementNS(SVG_NS, 'svg');
  54. 			svg.setAttribute('version', '1.1');
  55. 			svg.setAttribute('baseProfile', 'full');
  56.  
  57. 			let r = this.maxRadius;
  58. 			svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '));
  59. 			svg.setAttribute('width', r * 2);
  60. 			svg.setAttribute('height', r * 2);
  61. 			svg.style.cssText = 'position:absolute;top:0px;left:0px;';
  62.  
  63. 			let donut = createDonut(this.data, this.minRadius, this.maxRadius);
  64. 			svg.appendChild(donut);
  65.           
  66.           	// click事件监听
  67.           	this.onClick = () => {
  68. 				// DOMOverlay继承自EventEmitter，可以使用emit触发事件
  69. 				this.emit('click');
  70. 			};
  71. 			// pc端注册click事件，移动端注册touchend事件
  72.           	svg.addEventListener('click', this.onClick);
  73. 			return svg;
  74. 		};
  75.  
  76. 		// 更新DOM元素，在地图移动/缩放后执行
  77. 		Donut.prototype.updateDOM = function() {
  78. 			if (!this.map) {
  79. 				return;
  80. 			}
  81.  
  82. 			// 经纬度坐标转容器像素坐标
  83. 			let pixel = this.map.projectToContainer(this.position);
  84.  
  85. 			// 使饼图中心点对齐经纬度坐标点
  86. 			let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
  87. 			let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
  88. 			this.dom.style.transform = `translate(${left}, ${top})`;
  89. 		};
  90.  
  91. 		// 使用SVG创建环状饼图
  92. 		function createDonut(data, minRadius, maxRadius) {
  93. 			const colorList = [
  94. 				'#7AF4FF',
  95. 				'#67D7FF',
  96. 				'#52B5FF',
  97. 				'#295BFF'
  98. 			];
  99. 			let sum = data.reduce((prev, curr) => prev + curr, 0);
  100. 			let angle = 0;
  101.  
  102. 			let group = document.createElementNS(SVG_NS, "g");
  103. 			data.forEach((d, i) => {
  104. 				let delta = d / sum * Math.PI * 2;
  105. 					color = colorList[i],
  106. 					r = maxRadius,
  107. 					startAngle = angle,
  108. 					endAngle = angle + delta;
  109. 				angle += delta;
  110.  
  111. 				// 对每个数据创建一个扇形
  112. 				let fanShape = document.createElementNS(SVG_NS, 'path');
  113. 				fanShape.setAttribute('style', `fill: ${color};`);
  114. 				fanShape.setAttribute('d', [
  115. 					'M0 0',
  116. 					`L${r * Math.sin(startAngle)} ${-r * Math.cos(startAngle)}`,
  117. 					`A${r} ${r} 0 ${delta > Math.PI ? 1 : 0} 1 ${r * Math.sin(endAngle)} ${-r * Math.cos(endAngle)}`,
  118. 				].join(' ') + ' z');
  119. 				group.appendChild(fanShape);
  120. 			});
  121.  
  122. 			// 在中心创建一个圆形
  123. 			let circleShape = document.createElementNS(SVG_NS, 'circle');
  124. 			circleShape.setAttribute('style', 'fill: #FFFFFF');
  125. 			circleShape.setAttribute('cx', 0);
  126. 			circleShape.setAttribute('cy', 0);
  127. 			circleShape.setAttribute('r', minRadius);
  128. 			group.appendChild(circleShape);
  129.  
  130. 			// 绘制文字
  131. 			let textShape = document.createElementNS(SVG_NS, 'text');
  132. 			textShape.setAttribute('x', 0);
  133. 			textShape.setAttribute('y', '0.3em');
  134. 			textShape.setAttribute('text-anchor', 'middle');
  135. 			textShape.innerHTML = sum;
  136. 			group.appendChild(textShape);
  137.  
  138. 			return group;
  139. 		}
  140.  
  141. 		window.Donut = Donut;
  142. 	</script>
  143. 	<script type="text/javascript">
  144. 		var map;
  145.         function initMap() {
  146.             // 初始化地图
  147.             map = new TMap.Map("container", {
  148.                 zoom:12, // 设置地图缩放级别
  149.                 center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
  150. 			});
  151.  
  152. 			let donutList = [
  153. 				new Donut({
  154. 					map,
  155. 					position: new TMap.LatLng(39.96030543872138, 116.25809083213608),
  156. 					data: [12, 24],
  157. 					minRadius: 13,
  158. 					maxRadius: 20
  159. 				}),
  160. 				new Donut({
  161. 					map,
  162. 					position: new TMap.LatLng(39.9986945980902, 116.33598362780685),
  163. 					data: [23, 99, 101, 400],
  164. 					minRadius: 25,
  165. 					maxRadius: 35
  166. 				}),
  167. 				new Donut({
  168. 					map,
  169. 					position: new TMap.LatLng(40.02906301748584, 116.25499991104516),
  170. 					data: [18, 41, 50],
  171. 					minRadius: 20,
  172. 					maxRadius: 28
  173. 				})
  174. 			];
  175.  
  176. 			donutList.forEach((donut, index) => {
  177. 				donut.on('click', () => {
  178. 					console.log(`第${index}个环形图被点击，位置为${donut.position}`);
  179. 				});
  180. 			});
  181. 		}
  182.     </script>
  183. </body>
  184.  
  185. </html>

适配后uniapp代码

主要三个文件 DOMOverlay.js、loadJs.js、map.vue

DOMOverlay.js 

一般来说先把script 全部复制到一个单独js文件，然后直接运行，运气好直接正常使用，运气不好就哪里报错改哪里，DOMOverlay.js文件修改过我都加了注释“适配uniapp修改过的”

  1. var SVG_NS = 'http://www.w3.org/2000/svg';
  2. // 自定义环状饼图 - 继承DOMOverlay
  3. function Donut(options) {
  4. 	TMap.DOMOverlay.call(this, options);
  5. }
  6.  
  7.  
  8. /** 
  9.  * ----------------适配uniapp修改过的----------------
  10.  * 
  11.  * 因为 TMap 对象依赖于 https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 
  12.  * 所以要封装一个方法，在加载完依赖脚本后，再运行
  13.  */
  14. function initDonut(){
  15. 	Donut.prototype = new TMap.DOMOverlay();
  16. 	
  17. 	// 初始化
  18. 	Donut.prototype.onInit = function(options) {
  19. 		this.position = options.position;
  20. 		this.data = options.data;
  21. 		this.minRadius = options.minRadius || 0;
  22. 		this.maxRadius = options.maxRadius || 50;
  23. 	};
  24. 	
  25. 	// 销毁时需解绑事件监听
  26. 	Donut.prototype.onDestroy = function() {
  27. 		if (this.onClick) {
  28. 			this.dom.removeEventListener(this.onClick);
  29. 		}
  30. 	};
  31. 	
  32. 	// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
  33. 	Donut.prototype.createDOM = function() {
  34. 		let svg = document.createElementNS(SVG_NS, 'svg');
  35. 		svg.setAttribute('version', '1.1');
  36. 		svg.setAttribute('baseProfile', 'full');
  37. 	
  38. 		let r = this.maxRadius;
  39. 		svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '));
  40. 		svg.setAttribute('width', r * 2);
  41. 		svg.setAttribute('height', r * 2);
  42. 		svg.style.cssText = 'position:absolute;top:0px;left:0px;';
  43. 	
  44. 		let donut = createDonut(this.data, this.minRadius, this.maxRadius);
  45. 		svg.appendChild(donut);
  46. 	  
  47. 		// click事件监听
  48. 		this.onClick = () => {
  49. 			// DOMOverlay继承自EventEmitter，可以使用emit触发事件
  50. 			this.emit('click');
  51. 		};
  52. 		// ----------------适配uniapp修改过的----------------
  53. 		// pc端注册click事件，移动端注册touchend事件
  54. 		// svg.addEventListener('click', this.onClick); web端用click事件
  55. 		svg.addEventListener('touchend', this.onClick); // H5端用touchend事件
  56. 		return svg;
  57. 	};
  58. 	
  59. 	// 更新DOM元素，在地图移动/缩放后执行
  60. 	Donut.prototype.updateDOM = function() {
  61. 		if (!this.map) {
  62. 			return;
  63. 		}
  64. 	
  65. 		// 经纬度坐标转容器像素坐标
  66. 		let pixel = this.map.projectToContainer(this.position);
  67. 	
  68. 		// 使饼图中心点对齐经纬度坐标点
  69. 		let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
  70. 		let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
  71. 		this.dom.style.transform = `translate(${left}, ${top})`;
  72. 	};
  73. }
  74.  
  75. // 使用SVG创建环状饼图
  76. function createDonut(data, minRadius, maxRadius) {
  77. 	const colorList = [
  78. 		'#7AF4FF',
  79. 		'#67D7FF',
  80. 		'#52B5FF',
  81. 		'#295BFF'
  82. 	];
  83. 	let sum = data.reduce((prev, curr) => prev + curr, 0);
  84. 	let angle = 0;
  85.  
  86. 	let group = document.createElementNS(SVG_NS, "g");
  87. 	data.forEach((d, i) => {
  88. 		let delta = d / sum * Math.PI * 2;
  89. 			let color = colorList[i],
  90. 			r = maxRadius,
  91. 			startAngle = angle,
  92. 			endAngle = angle + delta;
  93. 		angle += delta;
  94.  
  95. 		// 对每个数据创建一个扇形
  96. 		let fanShape = document.createElementNS(SVG_NS, 'path');
  97. 		fanShape.setAttribute('style', `fill: ${color};`);
  98. 		fanShape.setAttribute('d', [
  99. 			'M0 0',
  100. 			`L${r * Math.sin(startAngle)} ${-r * Math.cos(startAngle)}`,
  101. 			`A${r} ${r} 0 ${delta > Math.PI ? 1 : 0} 1 ${r * Math.sin(endAngle)} ${-r * Math.cos(endAngle)}`,
  102. 		].join(' ') + ' z');
  103. 		group.appendChild(fanShape);
  104. 	});
  105.  
  106. 	// 在中心创建一个圆形
  107. 	let circleShape = document.createElementNS(SVG_NS, 'circle');
  108. 	circleShape.setAttribute('style', 'fill: #FFFFFF');
  109. 	circleShape.setAttribute('cx', 0);
  110. 	circleShape.setAttribute('cy', 0);
  111. 	circleShape.setAttribute('r', minRadius);
  112. 	group.appendChild(circleShape);
  113.  
  114. 	// 绘制文字
  115. 	let textShape = document.createElementNS(SVG_NS, 'text');
  116. 	textShape.setAttribute('x', 0);
  117. 	textShape.setAttribute('y', '0.3em');
  118. 	textShape.setAttribute('text-anchor', 'middle');
  119. 	textShape.innerHTML = sum;
  120. 	group.appendChild(textShape);
  121.  
  122. 	return group;
  123. }
  124.  
  125. window.Donut = Donut;
  126.  
  127. var map;
  128. function initMap() {
  129.     // ----------------适配uniapp修改过的----------------
  130.     // 调用封装后的initDount()
  131. 	initDonut()
  132. 	
  133. 	// 初始化地图
  134. 	map = new TMap.Map("mapContainer", {
  135. 		zoom:12, // 设置地图缩放级别
  136. 		center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
  137. 	});
  138.  
  139. 	let donutList = [
  140. 		new Donut({
  141. 			map,
  142. 			position: new TMap.LatLng(39.96030543872138, 116.25809083213608),
  143. 			data: [12, 24],
  144. 			minRadius: 13,
  145. 			maxRadius: 20
  146. 		}),
  147. 		new Donut({
  148. 			map,
  149. 			position: new TMap.LatLng(39.9986945980902, 116.33598362780685),
  150. 			data: [23, 99, 101, 400],
  151. 			minRadius: 25,
  152. 			maxRadius: 35
  153. 		}),
  154. 		new Donut({
  155. 			map,
  156. 			position: new TMap.LatLng(40.02906301748584, 116.25499991104516),
  157. 			data: [18, 41, 50],
  158. 			minRadius: 20,
  159. 			maxRadius: 28
  160. 		})
  161. 	];
  162.  
  163. 	donutList.forEach((donut, index) => {
  164. 		donut.on('click', () => {
  165. 			console.log(`第${index}个环形图被点击，位置为${donut.position}`);
  166. 			alert(`第${index}个环形图被点击，位置为${donut.position}`)
  167. 		});
  168. 	});
  169. }
  170.  
  171. /**
  172.  * ----------------适配uniapp修改过的----------------
  173.  * 导出initMap方法
  174.  */ 
  175. export {
  176. 	initMap
  177. }
loadJs.js

用来加载第三方js

  1. function loadJs(src) {
  2.   return new Promise((resolve,reject)=>{
  3.     let script = document.createElement('script');
  4.     script.type = "text/javascript";
  5.     script.src= src;
  6.     document.body.appendChild(script);
  7.       
  8.     script.onload = ()=>{
  9.       resolve();
  10.     }
  11.     script.onerror = ()=>{
  12.       reject();
  13.     }
  14.   }).catch((e) => {})
  15. }
  16.  
  17. export default loadJs
map.vue
  1. <template>
  2. 	<view id="mapContainer" style="height: 100%;" @click="log">
  3. 	</view>
  4. </template>
  5.  
  6. <script>
  7. 	export default {
  8. 		data() {
  9. 			return {
  10. 				
  11. 			}
  12. 		},
  13. 		mounted() {
  14. 			
  15. 		}
  16. 		
  17. 	}
  18. </script>
  19.  
  20. <script lang="renderjs" module="test">
  21. 	
  22. 	import loadJs from "../../common/loadJs.js"
  23.     // 导入适配后的 DOMOverlay.js
  24. 	import {initMap} from "../../common/DOMOverlay.js"
  25. 	
  26. 	export default {
  27.  
  28. 		data() {
  29. 		    return {
  30. 				
  31. 			}
  32. 		},
  33. 		mounted(){
  34. 			console.log("mounted") 
  35. 			loadJs('https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77').then(()=>{
  36. 				// 调用初始化地图方法
  37. 				initMap()
  38. 			})
  39. 		},
  40. 		 methods: {
  41. 		}, 
  42. 		created() {
  43. 			
  44. 		}
  45. 	}
  46. </script>
  47.  
  48. <style>
  49.    
  50. </style>

三、适配效果

APP运行效果图，与官网一致

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/495808
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号