jeecg-boot

eg:兴亚传媒：小程序http://www.starrymall.net/Mobile/User/login.html

前端技术： Ant-design-vue + Vue + Webpack

-S 生产环境依赖
-D 开发环境依赖
-g 全局安装

//官网及社区

http://jeecg-boot.mydoc.io/?t=345682

http://www.jeecg.org/forum.php?gid=229

http://boot.jeecg.org/

//前端组件网站

https://vue.ant.design/

E:\jeecg-boot\ant-design-jeecg-vue

文件路径: E:\jeecg-boot\ant-design-jeecg-vue

package.json------->show npm scripts---->serve

打开项目:npm run serve

1.跑项目遇到问题：

1.1别人压缩包项目解压后直接提示错误

NSass could not find a binding for your current environment: Windows 64-bit with Node.js 10.x

Found bindings for the following environments:

- Windows 64-bit with Node.js 8.x

重新安装node-sass npm install或者换nodemodals包或者换别人的sass-loader包或者npm install node-sass dev四种不行重启

1.2登录报错timeout of 6000ms exceeded

连接后台端口不正确修改调用的后台端口

eg：1.window._CONFIG['domianURL'] = 'http://localhost:8080/jeecg-boot'; 2.window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view'; 3.以及vue.config.js的localhost都修改为后台所用端口，而不是本地端口

1.3两个页面共用一个v-canvas的数据，宽度高度为NAN

用的<ve-line width="198px" height="198px">

</ve-line>解决的

2.技巧：

webstorm 格式化html页面ctrl+alt+L

一.调用百度：官网https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

百度地图开发者平台网址：http://lbsyun.baidu.com/apiconsole/key

接口	类名	简介
浏览器定位	Geolocation	优先调用浏览器H5定位接口，如果失败会调用IP定位
IP定位	LocalCity	根据用户IP 返回城市级别的定位结果
定位SDK辅助定位	Geolocation	当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，可调用集成在App中的百度地图定位SDK来获取更精准的位置信息

1.申请秘钥：

eg:已经申请的秘钥

应用编号

应用名称

访问应用（AK）

应用类别

备注信息
（双击更改）

应用配置

	16548426			浏览器端		设置删除

1.安装百度地图：npm i --save vue-baidu-map

使用：

2.main.js中

a. import Vue from 'vue'
   import BaiduMap from 'vue-baidu-map'
   import BmScale from 'vue-baidu-map'
   import BmGeolocation from 'vue-baidu-map'

b.   Vue.use(BaidMuap, {
  // ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'g26fDyHd4eexsYkBf4OoKq7LleHKCo9j'
})

使用script引入会报错不支持

3.a.使用的HTML中

<div style="background:#fff;padding:10px;">
  <div id="Map">
    <baidu-map id="allmap" class="allmap mapCeshi" ref="myMap" :center="center" :zoom="zoom"
               :scroll-wheel-zoom="true" @ready="handler">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
      
      
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen='true'></bm-overview-map>
      <bml-marker-clusterer @click="infoWindowOpen2" :averageCenter="true" name="bml2">
        <bm-marker v-for="(marker,index) in markers" :key="index" @click="infoWindowOpen2"
                   :position="{lng:marker.longitude,lat:marker.latitude}">
          <bm-label :content="marker.company" :position="{lng: 116.404, lat: 39.915}" :labelStyle="labelStyle" title="Hover me" @dblclick="companyShow"/>
        </bm-marker>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</div>

</template>

b. data() {
  return {// 百度地图开始
// type: 'tab',
// address_detail: '北京市海淀区',
center: { lng: 0, lat: 0 },
zoom: 13,
postionMap: { //地图坐标
  lng: 120.211486,
  lat: 30.256576
},
show: true,
markers: [//设备所在位置
  { 'longitude': 108.70, 'latitude': 34.35 ,'company':'咸阳农业公司'},
  { 'longitude': 108.80, 'latitude': 34.90 ,'company':'咸阳农研所'},
  { 'longitude': 108.90, 'latitude': 34.339,'company':'外贸公司' }
],
infoWindow: {//信息敞口
  show: true,
//   contents: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
},
labelStyle:{ color: 'red', fontSize : '20px' ,border:'none',marginLeft:'20px'}
// type: ' tab',
// center: {lng: 116.405813, lat:39.914059},//以天安门作为中心点
// 百度地图结束

}

target: 'http://localhost:8080', //请求本地需要jeecg-boot后台项目
// target: 'http://18.190.147.177:8080', //请求本地需要jeecg-boot后台项目
// target: 'http://192.168.13.209:8080', //请求本地需要jeecg-boot后台项目

// window._CONFIG['domianURL'] = 'http://localhost:8080/jeecg-boot';
  // window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view';
  // window._CONFIG['domianURL'] = 'http://192.168.13.209:8080/jeecg-boot';
  // window._CONFIG['imgDomainURL'] = 'http://192.168.13.209:8080/jeecg-boot/sys/common/view';
  window._CONFIG['domianURL'] = 'http://192.118.190.147.177:8080/jeecg-boot';
  window._CONFIG['imgDomainURL'] = 'http://118.190.147.177:8080/jeecg-boot/sys/common/view';

// 192.168.13.209

猜你喜欢