vue2
liyongbin
parent
4c18a3f47b
commit
301007cd6b
|
|
@ -14,14 +14,16 @@
|
|||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"axios": "0.18.1",
|
||||
"core-js": "3.6.5",
|
||||
"element-ui": "2.13.2",
|
||||
"element-ui": "^2.15.12",
|
||||
"js-cookie": "2.2.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"vue": "2.6.10",
|
||||
"vue-baidu-map": "^0.21.22",
|
||||
"vue-router": "3.0.6",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,3 +15,5 @@
|
|||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
<!-- 引入高德地图API -->
|
||||
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=44ea4ac03cbd3cefc6397e1af606a3c0"></script>
|
||||
|
|
|
|||
29
src/main.js
29
src/main.js
|
|
@ -15,6 +15,35 @@ import router from './router'
|
|||
import '@/icons' // icon
|
||||
import '@/permission' // permission control
|
||||
|
||||
//百度地图 全局注册一次性引入
|
||||
import BaiduMap from 'vue-baidu-map'
|
||||
|
||||
/**
|
||||
* 百度
|
||||
*/
|
||||
Vue.use(BaiduMap, {
|
||||
/* 需要注册百度地图开发者来获取你的ak */
|
||||
ak: 'tqZyKtiyv367BS34ve0D92UBadXlf3LP'
|
||||
})
|
||||
/**
|
||||
* 高德
|
||||
*/
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
AMapLoader.load({
|
||||
'key': '44ea4ac03cbd3cefc6397e1af606a3c0',
|
||||
'version': '2.0', // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
|
||||
'plugins': ['AMap.Scale','AMap.GeoJSON'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等，更多插件请看官方文档
|
||||
}).then((AMap) => {
|
||||
Vue.use(AMap)
|
||||
})
|
||||
Vue.prototype.mapJsKey = '44ea4ac03cbd3cefc6397e1af606a3c0'; // jsApi
|
||||
Vue.prototype.mapServiceKey = '5756347f1804ff075028f0888516402c'; // 服务端
|
||||
// 配置安全密钥
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: '5690e34e121bb31129a44487f03bf7e5', //* 安全密钥
|
||||
};
|
||||
|
||||
/**
|
||||
* If you don't want to use mock-server
|
||||
* you want to use MockJs for mock api
|
||||
|
|
|
|||
|
|
@ -89,7 +89,42 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/百度地图',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: '百度地图',
|
||||
component: () => import('@/views/baidu/index'),
|
||||
meta: { title: '百度地图', icon: '百度地图' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/高德地图',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: '高德地图',
|
||||
component: () => import('@/views/gaode/index'),
|
||||
meta: { title: '高德地图', icon: '高德地图' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/websocket',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'websocket',
|
||||
component: () => import('@/views/websocket/index'),
|
||||
meta: { title: 'websocket', icon: 'websocket' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/nested',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<!--
|
||||
scroll-wheel-zoom是是否可以缩放
|
||||
@ready是图加载完后触发事件
|
||||
center是位置定位
|
||||
zoom是缩放大小限制
|
||||
inertial-dragging是允许惯性拖拽
|
||||
-->
|
||||
<baidu-map
|
||||
class="bm-view"
|
||||
:zoom="15"
|
||||
:center="center"
|
||||
inertial-dragging
|
||||
@ready="mapReady"
|
||||
:scroll-wheel-zoom="true"
|
||||
>
|
||||
<!-- 定位控件 anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->
|
||||
<bm-geolocation
|
||||
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
|
||||
:showAddressBar="true"
|
||||
:autoLocation="true"
|
||||
></bm-geolocation>
|
||||
<!-- 地区检索 keyword：关键字搜索 @searchcomplete：检索完成后的回调函数 auto-viewport：检索结束后是否自动调整地图事业 -->
|
||||
<bm-local-search
|
||||
:keyword="keyword"
|
||||
@searchcomplete="search"
|
||||
:auto-viewport="true"
|
||||
class="search"
|
||||
></bm-local-search>
|
||||
<!-- 缩放控件 anchor代表控件停靠位置 anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->
|
||||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
||||
|
||||
</baidu-map>
|
||||
</div>
|
||||
</template>
|
||||
<baidu-map>
|
||||
<!-- 其他组件... -->
|
||||
|
||||
<button @click="startDrawing">开始圈选</button>
|
||||
</baidu-map>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//定位位置信息
|
||||
center:[],
|
||||
//检索关键字
|
||||
keyword: "",
|
||||
//输入框input值
|
||||
input3: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
startDrawing() {
|
||||
this.drawingManager.open();
|
||||
},
|
||||
//输入框
|
||||
inputfz() {
|
||||
this.keyword = this.input3;
|
||||
},
|
||||
search(){},
|
||||
//地图加载后的回调
|
||||
mapReady({ BMap, map }) {
|
||||
//保存this指向，因为在百度的回调中this不指向vue
|
||||
const _this = this;
|
||||
// 获取自动定位方法
|
||||
var geolocation = new BMap.Geolocation();
|
||||
// 获取自动定位获取的坐标信息
|
||||
geolocation.getCurrentPosition(
|
||||
function (r) {
|
||||
console.log(r );
|
||||
console.log(r.address.province );
|
||||
console.log(r.address.city );
|
||||
_this.center = {
|
||||
lng: r.point.lng,
|
||||
lat: r.point.lat,
|
||||
};
|
||||
},
|
||||
//启用高精度
|
||||
{ enableHighAccuracy: true }
|
||||
);
|
||||
}
|
||||
},
|
||||
mapReady({ BMap, map }) {
|
||||
// ...
|
||||
|
||||
// 创建DrawingManager对象
|
||||
this.drawingManager = new BMapLib.DrawingManager(map, {
|
||||
isOpen: false, // 是否开启绘制模式
|
||||
enableDrawingTool: true, // 是否显示工具栏
|
||||
drawingToolOptions: {
|
||||
anchor: BMAP_ANCHOR_TOP_RIGHT, // 工具栏位置
|
||||
offset: new BMap.Size(5, 5), // 偏移量
|
||||
},
|
||||
circleOptions: {
|
||||
strokeWeight: 2, // 边线宽度
|
||||
fillOpacity: 0.1, // 填充透明度
|
||||
strokeStyle: "solid", // 边线样式
|
||||
},
|
||||
}); // 创建小区标记点
|
||||
const point = new BMap.Point(经度, 纬度); // 替换为你的小区的经纬度坐标
|
||||
const marker = new BMap.Marker(point);
|
||||
|
||||
// 将标记点添加到地图上
|
||||
map.addOverlay(marker);
|
||||
},
|
||||
mounted() {
|
||||
// ...
|
||||
|
||||
const drawingScript = document.createElement("script");
|
||||
drawingScript.type = "text/javascript";
|
||||
drawingScript.src =
|
||||
"https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js";
|
||||
document.head.appendChild(drawingScript);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 给个宽高 */
|
||||
.bm-view {
|
||||
height: 650px;
|
||||
width: 700px;
|
||||
}
|
||||
.input-with-select {
|
||||
width: 400px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.search {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<!-- 高德地图组件 -->
|
||||
<div class="map">
|
||||
<div class="map-search">
|
||||
<div class="map-search__area">
|
||||
<span class="search-title">地区：</span>
|
||||
<el-cascader
|
||||
v-model="areaValue"
|
||||
:options="areaOptions"
|
||||
:props="areaProps"
|
||||
:teleported="false"
|
||||
separator="-"
|
||||
placeholder="请选择"
|
||||
popper-class="dropDownPanel"
|
||||
@change="handleAreaChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-loading="loading"
|
||||
element-loading-text="数据更新中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(25,81,135,0.7)"
|
||||
id="qyContainer">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入地图插件
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
// 引入 地址级联选择器和code码转换
|
||||
// import { regionDataPlus } from 'element-china-area-data'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: "GapDeMap",
|
||||
data() {
|
||||
return {
|
||||
areaProps: { // 选择地区的属性
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children'
|
||||
},
|
||||
areaOptions: regionDataPlus, // 地区选择的所有的数据
|
||||
areaValue: ['330000', '330100', '330109'], // 地区选择参数，['省区域码', '市区域码']
|
||||
loading: false, // 地图是否处于加载中
|
||||
|
||||
map: null, // 当前显示的地图区域对象
|
||||
AMap: null // 拿到的所有的地图的对象
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 设置安全密钥
|
||||
window._AMapSecurityConfig = {
|
||||
// 必须配合秘钥使用，密钥需要生成，成为开发者之后创建应用即可。
|
||||
securityJsCode: '5690e34e121bb31129a44487f03bf7e5'
|
||||
// 应用密钥概览：https://console.amap.com/dev/key/app
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$nextTick(() => {
|
||||
AMapLoader.load({
|
||||
key: "44ea4ac03cbd3cefc6397e1af606a3c0", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.LngLat'], // 需要使用的的插件列表
|
||||
AMapUI: {
|
||||
version: '1.1',
|
||||
plugins: ['overlay/SimpleMarker']
|
||||
}
|
||||
}).then((AMap) => {
|
||||
this.AMap = AMap
|
||||
// 初始化地图
|
||||
this.map = new AMap.Map("qyContainer", { // 设置地图容器id
|
||||
viewMode: "2D", // 是否为3D地图模式
|
||||
zoom: 12, // 初始化地图级别
|
||||
center: [120.458373, 30.190322] // 初始化地图中心点位置 萧山区
|
||||
})
|
||||
|
||||
// 添加toolbar--放大缩小
|
||||
const toolbar = new AMap.ToolBar()
|
||||
this.map.addControl(toolbar)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 更改地图的地区
|
||||
handleAreaChange() {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#qyContainer{
|
||||
padding:0px;
|
||||
margin: 0px;
|
||||
width: 700px;
|
||||
height: 560px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<div class="sence-box sence-box1">
|
||||
<div class="sence-in">
|
||||
<div class="text-left text-box">掘金多多</div>
|
||||
<div class="text-right text-box">大展鸿图</div>
|
||||
<div class="long long-left"></div>
|
||||
<div class="long long-right"></div>
|
||||
<div class="denglong-box"></div>
|
||||
<div class="long2 long2-left"></div>
|
||||
<div class="long2 long2-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sence-box sence-box2">
|
||||
<div class="sence-in">
|
||||
<div class="text-left text-box">步步高升</div>
|
||||
<div class="text-right text-box">年年有鱼</div>
|
||||
<div class="long long-left"></div>
|
||||
<div class="long long-right"></div>
|
||||
<div class="denglong-box"></div>
|
||||
<div class="long2 long2-left"></div>
|
||||
<div class="long2 long2-right"></div>
|
||||
<div class="xiangyun"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sence-box sence-box3">
|
||||
<div class="sence-in">
|
||||
<div class="text-left text-box">心想事成</div>
|
||||
<div class="text-right text-box">万事如意</div>
|
||||
<div class="long long-left"></div>
|
||||
<div class="long long-right"></div>
|
||||
<div class="denglong-box"></div>
|
||||
<div class="long2 long2-left"></div>
|
||||
<div class="long2 long2-right"></div>
|
||||
<div class="xiangyun"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sence-box sence-box4">
|
||||
<div class="sence-in">
|
||||
<div class="text-left text-box">蒸蒸日上</div>
|
||||
<div class="text-right text-box">一帆风顺</div>
|
||||
<div class="long long-left"></div>
|
||||
<div class="long long-right"></div>
|
||||
<div class="denglong-box"></div>
|
||||
<div class="long2 long2-left"></div>
|
||||
<div class="long2 long2-right"></div>
|
||||
<div class="xiangyun"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sence-box sence-box5">
|
||||
<div class="sence-in">
|
||||
<div class="text-left text-box">自强不息</div>
|
||||
<div class="text-right text-box">恭喜发财</div>
|
||||
<div class="sence-block">龙年大吉</div>
|
||||
<div class="denglong-box"></div>
|
||||
<div class="long long-left"></div>
|
||||
<div class="long long-right"></div>
|
||||
<div class="long2 long2-left"></div>
|
||||
<div class="long2 long2-right"></div>
|
||||
<div class="xiangyun"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,6 +46,10 @@ module.exports = {
|
|||
alias: {
|
||||
'@': resolve('src')
|
||||
}
|
||||
},
|
||||
externals: {
|
||||
'AMap': 'AMap',
|
||||
'AMapUI': 'AMapUI'
|
||||
}
|
||||
},
|
||||
chainWebpack(config) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue