作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案。三思而后行,这是一个好的习惯。

需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图展示功能,用于展示所有项目的分布情况。搜索功能(省略,不是这里介绍的内容).......

交互:选中左侧的项目,选中项高亮,自动定位到右侧地图中项目所在位置,并弹出项目的基本信息。点击右侧的项目,自动高亮显示左侧的项目,并滚动到项目所在位置。地图支持聚合和缩放。

项目运行效果如下图所示:

接下来开始开发:

在vue中引入百度地图

百度开发者平台已经封装了基于vue的地图组件,详细使用,请参考官网:

https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

网上有一些是直接在index.html页面全部引用的,本人强烈反对此种使用方式,因为我们项目是组件化的单页应用,强行引入多页应用的开发方式,会破坏整个项目的框架,严重影响性能。有些甚至还在vue单页应用中引入jquery,感觉这都是一些反人类的骚操作,不到万不得已,不建议使用。

使用方式

我这里只演示单页应用的开发方式。

1.安装组件

  1. $ npm install vue-baidu-map --save

2.注册组件

组件的注册可以分为全局注册和局部注册,我这里采用的是局部注册。因为整个项目中仅此一个界面使用。引入官方的说明:

如果有按需引入组件的需要,可以选择局部注册百度地图组件,这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下,按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行,如果引入组件时发生运行时错误,请检查 webpack 的 loader 配置,确认 includeexclude 选项命中了组件库。

引入组件代码如下:

  1. //百度地图
  2. import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  3. import BmScale from 'vue-baidu-map/components/controls/Scale'
  4. import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  5. import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
  6. import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  7. import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

组件注册:

  1. export default {
  2. name: "pm-distribution",
  3. components: {
  4. BaiduMap,
  5. BmScale,
  6. BmNavigation,
  7. BmMarkerClusterer,
  8. BmMarker,
  9. BmInfoWindow
  10. },
  11. ......

3.HTML部分:

  1. <baidu-map :style="{width:map.width,height:map.height}" class="map" ak="你的百度地图秘钥" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}"
    @ready="handler" :scroll-wheel-zoom="true">
  2. <!--比例尺控件-->
  3. <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  4. <!--缩放控件-->
  5. <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
  6. <!--聚合动态添加的点坐标-->
  7. <bm-marker-clusterer :averageCenter="true">
  8. <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)"></bm-marker>
  9. </bm-marker-clusterer>
  10. <!--信息窗体-->
  11. <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
  12. <p><span class="left">单位面积能耗:</span><span class="right">{{infoWindow.info.areaEnergy}}kWh/㎡</span></p>
  13. <p><span class="left">建筑面积:</span><span class="right">{{infoWindow.info.area}}㎡</span></p>
  14. <p><span class="left">电耗:</span><span class="right">{{infoWindow.info.energy}}kWh</span></p>
  15. <p><span class="left">水耗:</span><span class="right">{{infoWindow.info.water}}m³</span></p>
  16. <p><span class="left">气耗:</span><span class="right">{{infoWindow.info.air}}m³</span></p>
  17. </bm-info-window>
  18. </baidu-map>

寻找共性,提取公共部分,左侧点击项目和地图中点击项目,效果大体一致,都是弹出一个信息框,提取方法:

  1. //查看详情
  2. lookDetail(data, target){
  3. this.infoWindow.show =true;
  4. this.infoWindow.info=data;
  5. this.activeName = data.name;
  6. //为弹窗口标题添加title
  7. this.$nextTick(()=>{
  8. var win=document.querySelector(".BMap_bubble_title");
  9. win.title = this.activeName;
  10. })
  11. if(target=='left'){ //点击的是左侧列表项,则不需要滚动
  12. this.map.center={lng: data.lng, lat: data.lat};
  13. this.map.zoom = 15;
  14. return;
  15. }
  16. //滚动到指定元素位置
  17. this.$nextTick(()=>{
  18. var obj=document.querySelector(".active");
  19. var scrollTop=obj.offsetTop;
  20. this.$refs.box.scrollTop=scrollTop-180;
  21. })
  22. },

注意看上述代码,用到了this.$nextTick,这是在vue中如果要对dom进行操作,在此方法中可以保证dom节点已加载完成,vue中是以数据驱动的形式来渲染dom的,也就是说数据修改后,dom不会马上改变,它会排队等待修改。再演示某些程序员的骚操作:

  1. setTimeout(function () {
  2. var win=document.querySelector(".BMap_bubble_title");
  3. win.title = This.activeName;
  4. },300);

注意看:上述代码使用了setTimeout进行延时,来避免数据改变了,但是获取的dom中数据不是最新的情况,虽然大部分情况下可以解决问题,但是存在缺陷。1、你如何确定刚好300毫秒就可以读取到最新的dom数据了。(经验值)2.万一你设置的这个延时时间小了呢?或者数据变更得慢了一些呢?可能你设置了300ms,可实际100ms就已经变更了呢?是不是存在200ms的效率差?等等.....

 左侧项目名称超出自动显示省略号

单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法直接通过css样式控制:

  1. overflow: hidden;
  2. text-overflow:ellipsis;
  3. white-space: nowrap;

左侧项目列表选中项高亮,其它项正常显示

通过定义一个变量activeName ,记录当前选中的项目名称(此处项目名称不可能重复),如果当前项目的名称和activeName  的值一致时,添加一个css样式名称active,然后设置这个样式active高亮(设置背景色啊等等)

如下代码所示:

  1. <div class="row" v-for="marker of markers" :key="marker.code" @click="lookDetail(marker,'left')" :class="{active: activeName == marker.name}">

点击地图中项目,自动定位到左侧项目选中位置

左侧选中的dom,有一个激活样式active,获取到它的offsetTop属性,然后设置列表容器的scrollTop属性即可。

  1. //滚动到指定元素位置
  2. this.$nextTick(()=>{
  3. var obj=document.querySelector(".active");
  4. var scrollTop=obj.offsetTop;
  5. this.$refs.box.scrollTop=scrollTop-180;
  6. })

注意:点击左侧项目,不需要滚动,只有点击地图中的项目才去滚动。

关于项目信息框中标题超出添加省略号,添加title完整提示

通常我们添加了超出部分省略号,一般都会给其添加一个完整的title显示。在现有的百度提供的InfoWindow组件中是没有封装这个属性的,所以我们通常有两种办法:1.扩展组件源码(耗时)2.直接dom操作。

这里我选择第二种,因为快。浏览器中按F12,可以发现这个标题的HTML代码部分:

  1. <div class="BMap_bubble_title" style="overflow: hidden; height: auto; line-height: 24px; white-space: nowrap; width: auto;" title="南京高新区管委会行政办公大楼">南京高新区管委会行政办公大楼</div>

我们看到有一个BMap_bubble_title样式,我们可以直接操作这个dom。

代码如下:

  1. //为弹窗口标题添加title
  2. this.$nextTick(()=>{
  3. var win=document.querySelector(".BMap_bubble_title");
  4. win.title = this.activeName;
  5. })

从左侧树点击项目要修改Zoom,直接定位到项目信息

百度地图中Zoom的详细说明:

 地图自动铺满右侧,并且高度全屏且和左侧高度基本一致

但凡这种情况,首先就考虑要计算浏览器的宽高了,当然你也可以使用一些自适应的UI库,我这里直接自己计算的。这个也很简单,获取浏览器可是部分高度,减去一些固定px的长度部分即可。

关于单页应用中的样式问题

我发现一些以前做惯了多页应用开发的人,现在来做单页应用,他会很迷糊,因为在多页应用的世界,每个界面是独立的,每个界面中的样式是互不影响的。而单页应用,通常是一个入口,其它组件(页面)都是按需加载,样式命名相同就冲突了,也就是合并覆盖。避免的方式呢,组件中只自己用的,添加scoped,如果需要覆盖其它的,就在组件容器的最外层添加一个class或者ID(这个在项目中唯一命名),然后覆盖的样式都写在这个容器样式之下。

如局部样式:

  1. <style lang="scss" scoped>

全局样式:

  1. <style lang="scss">
  2. .pm-distribution{
  3. .BMap_bubble_title {
  4. ......

完整代码:

  1. <template>
  2. <div class="pm-distribution">
  3. <h3 class="title">项目分布</h3>
  4. <div class="container" id="container" :style="{height:containerHeight}">
  5. <div class="left">
  6. <div class="top">
  7. <!--行政区域-->
  8. <div class="item fl">
  9. <el-select filterable clearable v-model="districtType" style="width: 140px;margin-left: 5px;">
  10. <el-option v-for="item in districtTypeOptions" :key="item.value" :label="item.label"
  11. :value="item.value">
  12. </el-option>
  13. </el-select>
  14. </div>
  15. <!--项目类型-->
  16. <div class="item fl">
  17. <el-select filterable clearable v-model="buildType" style="width: 140px;">
  18. <el-option v-for="item in buildTypeOptions" :key="item.id" :label="item.name"
  19. :value="item.id">
  20. </el-option>
  21. </el-select>
  22. </div>
  23. <div class="item fl" style="margin-left: 10px">
  24. <el-select filterable clearable v-model="buildId" style="width: 190px;">
  25. <el-option v-for="item in buildOptions" :key="item.code" :label="item.name"
  26. :value="item.code">
  27. </el-option>
  28. </el-select>
  29. </div>
  30. <!--查询-->
  31. <div class="item query-submit fl" @click="search">
  32. <i class="el-icon-search"></i> 查 询
  33. </div>
  34. </div>
  35. <div class="header">共{{markers.length}}个项目<span style="float: right;margin-right: 15px;">今日能耗</span></div>
  36. <div class="list" :style="{height:leftHeight}">
  37. <div class="list-context">
  38. <div ref="box" class="list-scroll bmr-y-scroll":style="{height:leftHeight}">
  39. <!-- 项目列表-->
  40. <div class="listItemDIV">
  41. <div class="row" v-for="marker of markers" :key="marker.code" @click="lookDetail(marker,'left')" :class="{active: activeName == marker.name}">
  42. <div
  43. class="head-title" v-text="marker.name" :title="marker.name"></div>
  44. <div class="row-content">
  45. <span class="item fl"><i class="iconfont nhjc-dianli electricity"></i>{{marker.energy}}kWh</span>
  46. <span class="item fl"><i class="iconfont nhjc-shui water"></i>{{marker.water}}m³</span>
  47. <span class="item fl"><i class="iconfont nhjc-qi air"></i>{{marker.air}}m³</span>
  48. </div>
  49. </div>
  50. <div style="clear:both;"></div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="right-context" id="right-context">
  57. <baidu-map :style="{width:map.width,height:map.height}" class="map" ak="这里填你的百度秘钥" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true">
  58. <!--比例尺控件-->
  59. <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  60. <!--缩放控件-->
  61. <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
  62. <!--聚合动态添加的点坐标-->
  63. <bm-marker-clusterer :averageCenter="true">
  64. <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)"></bm-marker>
  65. </bm-marker-clusterer>
  66. <!--信息窗体-->
  67. <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
  68. <p><span class="left">单位面积能耗:</span><span class="right">{{infoWindow.info.areaEnergy}}kWh/㎡</span></p>
  69. <p><span class="left">建筑面积:</span><span class="right">{{infoWindow.info.area}}㎡</span></p>
  70. <p><span class="left">电耗:</span><span class="right">{{infoWindow.info.energy}}kWh</span></p>
  71. <p><span class="left">水耗:</span><span class="right">{{infoWindow.info.water}}m³</span></p>
  72. <p><span class="left">气耗:</span><span class="right">{{infoWindow.info.air}}m³</span></p>
  73. </bm-info-window>
  74. </baidu-map>
  75. </div>
  76. </div>
  77. </div>
  78. </template>
  79.  
  80. <script>
  81. import {
  82. buildTypeOptionsData,
  83. districtTypeOptionsData,
  84. buildOptionsData
  85. } from "../views/energyAnalysis/energyConsumptionRanking/energyConsumptionRanking"
  86. import {
  87. getProgramsType
  88. } from "../assets/js/bmr-request";
  89. import GlobalUtil from "../utils/globalUtil";
  90. import PmDistributionService from "../services/pmDistributionService"
  91.  
  92. //百度地图
  93. import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  94. import BmScale from 'vue-baidu-map/components/controls/Scale'
  95. import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  96. import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
  97. import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  98. import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  99.  
  100. export default {
  101. name: "pm-distribution",
  102. components: {
  103. BaiduMap,
  104. BmScale,
  105. BmNavigation,
  106. BmMarkerClusterer,
  107. BmMarker,
  108. BmInfoWindow
  109. },
  110. data() {
  111. return {
  112. districtType: 0,//行政区域
  113. districtTypeOptions: GlobalUtil.deepCopy(districtTypeOptionsData),//行政区域选项
  114. buildType: 0,//项目类型
  115. buildTypeOptions: buildTypeOptionsData,//项目类型选项
  116. buildId: '',//项目ID
  117. buildOptions: buildOptionsData, //项目列表
  118. searchParams:{
  119. regions:0,//区域编号
  120. proType:0,//项目类型
  121. proCode:'',//项目编号
  122. },
  123. map:{
  124. center: {lng: 118.802422,lat:32.065631},//'南京市',
  125. zoom: 12,
  126. width:'1000px',
  127. height:'710px'
  128. },
  129. markers:[],
  130. infoWindow: {
  131. lng: 0,
  132. lat: 0,
  133. show: false,
  134. info:{
  135. air: 0,
  136. area: 12313,
  137. areaEnergy: 0.64,
  138. code: "440300A055",
  139. energy: 7922.66,
  140. lat: "32.043433",
  141. lng: "118.784107",
  142. name: "市人民检察院",
  143. water: 0
  144. },
  145. },
  146. activeName: '',
  147. leftHeight:'540px',
  148. containerHeight:'700px'
  149. }
  150. },
  151. created() {
  152. this.districtTypeOptions[0].label = '请选择行政区域';
  153. this.getBuildTypes();
  154. this.getSelectPro();
  155. },
  156. mounted() {
  157. this.leftHeight=document.body.clientHeight-300+'px';
  158. this.containerHeight=document.body.clientHeight-150+'px';
  159. },
  160. methods: {
  161. //查询
  162. search() {
  163. this.searchParams.regions=this.districtType;
  164. this.searchParams.proType=this.buildType;
  165. this.searchParams.proCode=this.buildId;
  166. this.getProPositionMap();
  167. },
  168. infoWindowClose (e) {
  169. this.infoWindow.show = false
  170. },
  171. infoWindowOpen (e) {
  172. this.infoWindow.show = true
  173. },
  174. //查看详情
  175. lookDetail(data, target){
  176. // console.log('data',data)
  177. this.infoWindow.show =true;
  178. this.infoWindow.info=data;
  179. this.activeName = data.name;
  180. // let This=this;
  181. //为弹窗口标题添加title
  182. this.$nextTick(()=>{
  183. var win=document.querySelector(".BMap_bubble_title");
  184. win.title = this.activeName;
  185. })
  186. if(target=='left'){ //点击的是左侧列表项,则不需要滚动
  187. this.map.center={lng: data.lng, lat: data.lat};
  188. this.map.zoom = 15;
  189. return;
  190. }
  191. //滚动到指定元素位置
  192. this.$nextTick(()=>{
  193. var obj=document.querySelector(".active");
  194. var scrollTop=obj.offsetTop;
  195. this.$refs.box.scrollTop=scrollTop-180;
  196. })
  197. },
  198. //地图初始化
  199. handler ({BMap, map}) {
  200. console.log(BMap, map)
  201. // this.map.center.lng = 118.802422
  202. // this.map.center.lat = 32.065631
  203. // this.map.zoom = 12;
  204. this.map.width= document.getElementById("container").clientWidth-330+'px';
  205. this.map.height=document.body.clientHeight -160+'px';
  206. this.getProPositionMap();
  207. },
  208. //获取项目列表
  209. getSelectPro(){
  210. PmDistributionService.instance().getSelectPro({}).then((res) => {
  211. if (res.code === 200) {
  212. console.log('res',res)
  213. res.data.list.unshift({code:'',name:'请输入项目名称'})
  214. this.buildOptions=res.data.list;
  215. } else {
  216. this.$message({
  217. message: "获取数据失败",
  218. type: "error"
  219. });
  220. }
  221. })
  222. },
  223. //项目分布地图
  224. getProPositionMap(){
  225. PmDistributionService.instance().getProPositionMap(this.searchParams).then((res) => {
  226. if (res.code === 200) {
  227. // console.log('res',res)
  228. this.markers=res.data.list;
  229. } else {
  230. this.$message({
  231. message: "获取数据失败",
  232. type: "error"
  233. });
  234. }
  235. })
  236. },
  237. //获取项目类型
  238. getBuildTypes() {
  239. getProgramsType().then(res => {
  240. //获取楼建筑下拉框
  241. let temArr = new Array();
  242. temArr.push({name: '请选择项目类型', id: 0, type: 10})
  243. res.array.forEach(function (item, index) {
  244. temArr.push(item);
  245. })
  246. console.log('res.array', res.array)
  247. this.buildTypeOptions = temArr;
  248. });
  249. },
  250. }
  251. }
  252. </script>
  253.  
  254. <style lang="scss" scoped>
  255. $bgBlueColor: #1881bf;
  256. h3.title {
  257. box-sizing: border-box;
  258. height: 34px;
  259. line-height: 34px;
  260. font-size: 16px;
  261. font-weight: 600;
  262. padding: 0 0 0 30px;
  263. border: 1px #E5EEF3 solid;
  264. color: #2274A4;
  265. background: #F5F9F9;
  266. width: 100%;
  267. text-align: left;
  268. }
  269. .container {
  270. margin: 0 auto;
  271. min-width: 1366px;
  272. padding: 0px;
  273. min-height: 710px;
  274. .left {
  275. width: 320px;
  276. float: left;
  277. .header {
  278. width: 300px;
  279. clear: left;
  280. height: 34px;
  281. line-height: 34px;
  282. color: black;
  283. background: #F5F9F9;
  284. padding-left: 20px;
  285. }
  286. .top {
  287. height: 70px;
  288. padding: 8px 5px 12px 5px;
  289. }
  290. }
  291. .right-context {
  292. float: left;
  293. }
  294. .item {
  295. margin: 5px;
  296. height: 28px;
  297. line-height: 28px;
  298. .electricity{
  299. color: #FFD670;
  300. }
  301. .water{
  302. color:#4EB9DB;
  303. }
  304. .air{
  305. color:#F39795;
  306. }
  307. .iconfont{
  308. font-size: 22px;
  309. }
  310. }
  311. .query-submit {
  312. width: 90px;
  313. border-radius: 28px;
  314. background: $bgBlueColor;
  315. color: #fff;
  316. text-align: center;
  317. cursor: pointer;
  318. }
  319. .list{
  320. .item{
  321. width: 93px;
  322. height: 30px;
  323. line-height: 30px;
  324. display: block;
  325. }
  326. .item.fl{
  327. float: left;
  328. }
  329. .list-context{
  330. border-radius:5px;margin-top:10px;background:white;
  331. .list-scroll{
  332. margin-top:10px;overflow-y:auto;min-height:537px;overflow-x: hidden;
  333. .row{
  334. float:left;width:320px;
  335. cursor: pointer;
  336. .head-title{
  337. overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:16px;color:#1781BF;font-weight:400; padding-left: 20px;
  338. height: 30px;
  339. line-height: 30px;
  340. }
  341. .row-content{
  342. overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-bottom:10px;font-size:12px;color:rgb(128, 128, 128);
  343. border-bottom: 1px solid #eee; padding-left: 10px;
  344. }
  345. }
  346. .row.active{
  347. background-color: #CFDDF3;
  348. }
  349. }
  350. }
  351. }
  352. .map{
  353. min-width: 800px; width:1000px;height:710px;float:left;background:white;border-radius:5px;margin-left:10px;
  354. .right{
  355. text-align: left;
  356. }
  357. .left{
  358. width: 100px;
  359. }
  360. }
  361.  
  362. }
  363. </style>
  364. <style lang="scss">
  365. .pm-distribution{
  366. .BMap_bubble_title {
  367. color: #2DB7F5 !important;
  368. font-size: 16px;
  369. font-weight: 400;
  370. margin-bottom: 8px;
  371. overflow: hidden;
  372. text-overflow:ellipsis;
  373. white-space: nowrap;
  374. width: 220px !important;
  375. }
  376. }
  377. </style>

  说明:本界面所有功能是一天之内赶出来的,所以代码就凑合吧。其它的一些封装的组件代码没有贴出来,因为本篇重点是介绍地图的使用。我见过一些所谓前端工程师的代码,也就那样,有些还时不时的弄一些骚操作,请允许我自恋一下,O(∩_∩)O哈哈~。虽然我不是专业的前端,但是不管是写后端代码还是前端代码,多少要有点追求,有时候为了赶进度,快得了一时,其实误了后面更多时间,很多项目都是被怎么快怎么来玩死的,每天想着以后再重构,以后再重构,到后面就不了了之了..........

  明天是三八节,今天给公司每一位女同胞写贺卡,已经快忘记怎么写字了,中学时代,我可是专业情书枪手呢?O(∩_∩)O哈哈~

如何在vue单页应用中使用百度地图的更多相关文章

  1. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  2. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  3. vue单页应用中根据不同城市不同业务添加百度统计代码

    问题描述: 我们知道一般的百度统计代码是添加在html的head里的:但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面, 统计代码如果放在项目里的index.heml的hea ...

  4. vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  5. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  6. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  7. 基于vue单页应用的例子

    代码地址如下:http://www.demodashi.com/demo/13374.html 目录结构 src目录 主要的代码目录 components 存放项目组件 router 路由文件 sto ...

  8. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  9. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

随机推荐

  1. [Swift]LeetCode368. 最大整除子集 | Largest Divisible Subset

    Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...

  2. 让一个数组中存在N多个函数。让每个函数执行的 时候自动加1

    function test(){ var arr = [ ]; for (var i = 0; i < 10; i++) { (function(i){ arr[i] = function(){ ...

  3. 【Spark篇】---Spark中广播变量和累加器

    一.前述 Spark中因为算子中的真正逻辑是发送到Executor中去运行的,所以当Executor中需要引用外部变量时,需要使用广播变量. 累机器相当于统筹大变量,常用于计数,统计. 二.具体原理 ...

  4. 网络协议 7 - UDP 协议:性善碰到城会玩

        网络协议五步登天路,我们一路迈过了物理层.链路层,今天终于到了传输层.从这一层开始,很多知识应该都是服务端开发必备的知识了,今天我们就一起来梳理下.     其实,讲到 UDP,就少不了 TC ...

  5. solr索引报错(java.lang.OutOfMemoryError:GC overhead limit exceeded)

    配置文件修改如下: <dataSource driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost:3 ...

  6. C#版 - Leetcode 191. Number of 1 Bits-题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  7. PHPExcel使用笔记

    PHPExcel使用笔记 - 常见操作总结 最近做项目时,PHPExcel插件用得比较频繁,将其常见的操作总结一下- $objPHPExcel->getDefaultStyle()->ge ...

  8. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  9. VSCode入门----设置成中文

    将VScode设置成中文. 1.如下图,安装中文插件,点击左边后,输入chinese搜索,然后选择中文件简体进行安装. 2.按住Ctrl+Shift+P,然后输入 configure ,如下图,选择“ ...

  10. Linux 中Ctrl + s 的作用

    在Linux下使用vim编辑程序时,常常会习惯性的按下Ctrl + s保存文件内容.殊不知,这一按不紧,整个终端再也不响应了. 事实上Ctrl + s在终端下是有特殊用途的,那就是暂停该终端,这个功能 ...