厦门网站建设公司职业生涯规划大赛的意义

当前位置： 首页 > news >正文

厦门网站建设公司,职业生涯规划大赛的意义,怎么做网站像淘宝这样的,网站建设付款银行写什么用途因项目需要#xff0c;在uniapp中集成使用腾讯地图#xff0c;为了方便维护#xff0c;希望通过一套代码实现H5和APP同时可用。H5显示相对简单#xff0c;APP端比较麻烦#xff0c;记录下实现过程 一、集成步骤 1.使用 renderjs script标签使用renderjs#xff0c;因为… 因项目需要在uniapp中集成使用腾讯地图为了方便维护希望通过一套代码实现H5和APP同时可用。H5显示相对简单APP端比较麻烦记录下实现过程 一、集成步骤 1.使用 renderjs script标签使用renderjs因为JavaScript Api需要调用DOM对象APP需要使用renderjs技术保证script运行在webview环境才能调用DOM对象。 script langrenderjs moduletest /script 2.引用地图script 导入腾讯地图JS脚本因为腾讯地图js不是按照uniapp格式编写所以不能直接import导入需要包装成一个js插件使用 Promisejs加载成功调用resolvejs加载失败调用reject。 创建loadJs.js 文件 function loadJs(src) {return new Promise((resolve,reject){let script document.createElement(script);script.type text/javascript;script.src src;document.body.appendChild(script);script.onload (){resolve();}script.onerror (){reject();}}).catch((e) {}) }export default loadJs 在页面中使用 script langrenderjs moduletestimport loadJs from ../../common/loadJs.jsexport default {data() {return {}},mounted(){console.log(renderjs初始化完毕)loadJs(https://map.qq.com/api/gljs?v1.expkeyOB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77).then((){// 加载成功进行后续操作})},methods: {}} /script 3.修改js兼容uniapp 下载腾讯官网的例子改造成uniapp兼容的格式。有两种方式 方式一 将官网例子中 script 封装成一个个的function定义在 vue文件的 methods 中这样就可以直接调用。 方式二 将官网例子中 script 代码全部拷贝到一个js文件中再把需要调用的 function 通过 export 关键字导出在vue文件中进行 import 调用。 4.修改监听事件 腾讯官网例子都是web端的点击事件都是clickH5端运行需要改成touchend否则点击无响应 Web端 svg.addEventListener(click, this.onClick); web端用click事件 H5端 svg.addEventListener(touchend, this.onClick); // H5端用touchend事件 二、示例 腾讯官网例子 以自定义覆盖物 - DOMOverlay 为例实操下 !DOCTYPE html html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDOMOverlay/title /head script charsetutf-8 srchttps://map.qq.com/api/gljs?librariestoolsv1.expkeyOB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77/script style typetext/csshtml,body {height: 100%;margin: 0px;padding: 0px;}#container {width: 100%;height: 100%;} /stylebody onloadinitMap()div idcontainer/divscriptvar SVG_NS http://www.w3.org/2000/svg;// 自定义环状饼图 - 继承DOMOverlayfunction Donut(options) {TMap.DOMOverlay.call(this, options);}Donut.prototype new TMap.DOMOverlay();// 初始化Donut.prototype.onInit function(options) {this.position options.position;this.data options.data;this.minRadius options.minRadius || 0;this.maxRadius options.maxRadius || 50;};// 销毁时需解绑事件监听Donut.prototype.onDestroy function() {if (this.onClick) {this.dom.removeEventListener(this.onClick);}};// 创建DOM元素返回一个DOMElement使用this.dom可以获取到这个元素Donut.prototype.createDOM function() {let svg document.createElementNS(SVG_NS, svg);svg.setAttribute(version, 1.1);svg.setAttribute(baseProfile, full);let r this.maxRadius;svg.setAttribute(viewBox, [-r, -r, r * 2, r * 2].join( ));svg.setAttribute(width, r * 2);svg.setAttribute(height, r * 2);svg.style.cssText position:absolute;top:0px;left:0px;;let donut createDonut(this.data, this.minRadius, this.maxRadius);svg.appendChild(donut);// click事件监听this.onClick () {// DOMOverlay继承自EventEmitter可以使用emit触发事件this.emit(click);};// pc端注册click事件移动端注册touchend事件svg.addEventListener(click, this.onClick);return svg;};// 更新DOM元素在地图移动/缩放后执行Donut.prototype.updateDOM function() {if (!this.map) {return;}// 经纬度坐标转容器像素坐标let pixel this.map.projectToContainer(this.position);// 使饼图中心点对齐经纬度坐标点let left pixel.getX() - this.dom.clientWidth / 2 px;let top pixel.getY() - this.dom.clientHeight / 2 px;this.dom.style.transform translate(\({left}, \){top});};// 使用SVG创建环状饼图function createDonut(data, minRadius, maxRadius) {const colorList [#7AF4FF,#67D7FF,#52B5FF,#295BFF];let sum data.reduce((prev, curr) prev curr, 0);let angle 0;let group document.createElementNS(SVG_NS, g);data.forEach((d, i) {let delta d / sum * Math.PI * 2;color colorList[i],r maxRadius,startAngle angle,endAngle angle delta;angle delta;// 对每个数据创建一个扇形let fanShape document.createElementNS(SVG_NS, path);fanShape.setAttribute(style, fill: \({color};);fanShape.setAttribute(d, [M0 0,L\){r * Math.sin(startAngle)} \({-r * Math.cos(startAngle)},A\){r} \({r} 0 \){delta Math.PI ? 1 : 0} 1 \({r * Math.sin(endAngle)} \){-r * Math.cos(endAngle)},].join( ) z);group.appendChild(fanShape);});// 在中心创建一个圆形let circleShape document.createElementNS(SVG_NS, circle);circleShape.setAttribute(style, fill: #FFFFFF);circleShape.setAttribute(cx, 0);circleShape.setAttribute(cy, 0);circleShape.setAttribute(r, minRadius);group.appendChild(circleShape);// 绘制文字let textShape document.createElementNS(SVG_NS, text);textShape.setAttribute(x, 0);textShape.setAttribute(y, 0.3em);textShape.setAttribute(text-anchor, middle);textShape.innerHTML sum;group.appendChild(textShape);return group;}window.Donut Donut;/scriptscript typetext/javascriptvar map;function initMap() {// 初始化地图map new TMap.Map(container, {zoom:12, // 设置地图缩放级别center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标});let donutList [new Donut({map,position: new TMap.LatLng(39.96030543872138, 116.25809083213608),data: [12, 24],minRadius: 13,maxRadius: 20}),new Donut({map,position: new TMap.LatLng(39.9986945980902, 116.33598362780685),data: [23, 99, 101, 400],minRadius: 25,maxRadius: 35}),new Donut({map,position: new TMap.LatLng(40.02906301748584, 116.25499991104516),data: [18, 41, 50],minRadius: 20,maxRadius: 28})];donutList.forEach((donut, index) {donut.on(click, () {console.log(第\({index}个环形图被点击位置为\){donut.position});});});}/script /body/html 适配后uniapp代码 主要三个文件 DOMOverlay.js、loadJs.js、map.vue DOMOverlay.js  一般来说先把script 全部复制到一个单独js文件然后直接运行运气好直接正常使用运气不好就哪里报错改哪里DOMOverlay.js文件修改过我都加了注释“适配uniapp修改过的” var SVG_NS http://www.w3.org/2000/svg; // 自定义环状饼图 - 继承DOMOverlay function Donut(options) {TMap.DOMOverlay.call(this, options); }/** * —————-适配uniapp修改过的—————-* * 因为 TMap 对象依赖于 https://map.qq.com/api/gljs?v1.expkeyOB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 * 所以要封装一个方法在加载完依赖脚本后再运行*/ function initDonut(){Donut.prototype new TMap.DOMOverlay();// 初始化Donut.prototype.onInit function(options) {this.position options.position;this.data options.data;this.minRadius options.minRadius || 0;this.maxRadius options.maxRadius || 50;};// 销毁时需解绑事件监听Donut.prototype.onDestroy function() {if (this.onClick) {this.dom.removeEventListener(this.onClick);}};// 创建DOM元素返回一个DOMElement使用this.dom可以获取到这个元素Donut.prototype.createDOM function() {let svg document.createElementNS(SVG_NS, svg);svg.setAttribute(version, 1.1);svg.setAttribute(baseProfile, full);let r this.maxRadius;svg.setAttribute(viewBox, [-r, -r, r * 2, r * 2].join( ));svg.setAttribute(width, r * 2);svg.setAttribute(height, r * 2);svg.style.cssText position:absolute;top:0px;left:0px;;let donut createDonut(this.data, this.minRadius, this.maxRadius);svg.appendChild(donut);// click事件监听this.onClick () {// DOMOverlay继承自EventEmitter可以使用emit触发事件this.emit(click);};// —————-适配uniapp修改过的—————-// pc端注册click事件移动端注册touchend事件// svg.addEventListener(click, this.onClick); web端用click事件svg.addEventListener(touchend, this.onClick); // H5端用touchend事件return svg;};// 更新DOM元素在地图移动/缩放后执行Donut.prototype.updateDOM function() {if (!this.map) {return;}// 经纬度坐标转容器像素坐标let pixel this.map.projectToContainer(this.position);// 使饼图中心点对齐经纬度坐标点let left pixel.getX() - this.dom.clientWidth / 2 px;let top pixel.getY() - this.dom.clientHeight / 2 px;this.dom.style.transform translate(\({left}, \){top});}; }// 使用SVG创建环状饼图 function createDonut(data, minRadius, maxRadius) {const colorList [#7AF4FF,#67D7FF,#52B5FF,#295BFF];let sum data.reduce((prev, curr) prev curr, 0);let angle 0;let group document.createElementNS(SVG_NS, g);data.forEach((d, i) {let delta d / sum * Math.PI * 2;let color colorList[i],r maxRadius,startAngle angle,endAngle angle delta;angle delta;// 对每个数据创建一个扇形let fanShape document.createElementNS(SVG_NS, path);fanShape.setAttribute(style, fill: \({color};);fanShape.setAttribute(d, [M0 0,L\){r * Math.sin(startAngle)} \({-r * Math.cos(startAngle)},A\){r} \({r} 0 \){delta Math.PI ? 1 : 0} 1 \({r * Math.sin(endAngle)} \){-r * Math.cos(endAngle)},].join( ) z);group.appendChild(fanShape);});// 在中心创建一个圆形let circleShape document.createElementNS(SVG_NS, circle);circleShape.setAttribute(style, fill: #FFFFFF);circleShape.setAttribute(cx, 0);circleShape.setAttribute(cy, 0);circleShape.setAttribute(r, minRadius);group.appendChild(circleShape);// 绘制文字let textShape document.createElementNS(SVG_NS, text);textShape.setAttribute(x, 0);textShape.setAttribute(y, 0.3em);textShape.setAttribute(text-anchor, middle);textShape.innerHTML sum;group.appendChild(textShape);return group; }window.Donut Donut;var map; function initMap() {// —————-适配uniapp修改过的—————-// 调用封装后的initDount()initDonut()// 初始化地图map new TMap.Map(mapContainer, {zoom:12, // 设置地图缩放级别center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标});let donutList [new Donut({map,position: new TMap.LatLng(39.96030543872138, 116.25809083213608),data: [12, 24],minRadius: 13,maxRadius: 20}),new Donut({map,position: new TMap.LatLng(39.9986945980902, 116.33598362780685),data: [23, 99, 101, 400],minRadius: 25,maxRadius: 35}),new Donut({map,position: new TMap.LatLng(40.02906301748584, 116.25499991104516),data: [18, 41, 50],minRadius: 20,maxRadius: 28})];donutList.forEach((donut, index) {donut.on(click, () {console.log(第\({index}个环形图被点击位置为\){donut.position});alert(第\({index}个环形图被点击位置为\){donut.position})});}); }/*** —————-适配uniapp修改过的—————-* 导出initMap方法*/ export {initMap } loadJs.js 用来加载第三方js function loadJs(src) {return new Promise((resolve,reject){let script document.createElement(script);script.type text/javascript;script.src src;document.body.appendChild(script);script.onload (){resolve();}script.onerror (){reject();}}).catch((e) {}) }export default loadJs map.vue templateview idmapContainer styleheight: 100%; clicklog/view /templatescriptexport default {data() {return {}},mounted() {}} /scriptscript langrenderjs moduletestimport loadJs from ../../common/loadJs.js// 导入适配后的 DOMOverlay.jsimport {initMap} from ../../common/DOMOverlay.jsexport default {data() {return {}},mounted(){console.log(mounted) loadJs(https://map.qq.com/api/gljs?v1.expkeyOB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77).then((){// 调用初始化地图方法initMap()})},methods: {}, created() {}} /scriptstyle/style三、适配效果 APP运行效果图与官网一致