标签：upd current nav mobile smo yun sign 使用 nan
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中
<template>
<!-- 百度地图开始 -->
<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-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
全景
<bm-panorama></bm-panorama>
添加海量点
<bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" size="BMAP_POINT_SIZE_SMALL" ></bm-point-collection>-->
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
<!-- 标记 点 -->
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
<!-- <bm-marker :position="{lng:108.70,lat:34.33}" :dragging="true" animation=‘BMAP_ANIMATION_BOUNCE‘>
< <bm-label content=‘咸阳市政府，市中心‘ :labelStyle="{color:‘red‘,fontSize:‘12px‘}" :offset="{width:-35,height:30}" />
< </bm-marker>-->
<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
标签：upd current nav mobile smo yun sign 使用 nan
原文地址：https://www.cnblogs.com/benbenjia/p/11751416.html
