feat: 调用高德接口
lijiayao
parent
0da5b6c201
commit
da3265ad9d
|
|
@ -36,6 +36,7 @@
|
||||||
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
|
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
|
|
@ -53,6 +54,7 @@
|
||||||
"screenfull": "5.0.2",
|
"screenfull": "5.0.2",
|
||||||
"sortablejs": "1.10.2",
|
"sortablejs": "1.10.2",
|
||||||
"vue": "2.6.12",
|
"vue": "2.6.12",
|
||||||
|
"vue-amap": "^0.5.10",
|
||||||
"vue-count-to": "1.0.13",
|
"vue-count-to": "1.0.13",
|
||||||
"vue-cropper": "0.5.5",
|
"vue-cropper": "0.5.5",
|
||||||
"vue-meta": "2.4.0",
|
"vue-meta": "2.4.0",
|
||||||
|
|
|
||||||
27
src/main.js
27
src/main.js
|
|
@ -37,6 +37,10 @@ import DictTag from '@/components/DictTag'
|
||||||
import VueMeta from 'vue-meta'
|
import VueMeta from 'vue-meta'
|
||||||
// 字典数据组件
|
// 字典数据组件
|
||||||
import DictData from '@/components/DictData'
|
import DictData from '@/components/DictData'
|
||||||
|
// 高德地图
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader"
|
||||||
|
import VueAMap from "vue-amap";
|
||||||
|
|
||||||
|
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
Vue.prototype.getDicts = getDicts
|
Vue.prototype.getDicts = getDicts
|
||||||
|
|
@ -84,3 +88,26 @@ new Vue({
|
||||||
store,
|
store,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 高德地图
|
||||||
|
|
||||||
|
Vue.use(VueAMap);
|
||||||
|
|
||||||
|
// 初始化vue-amap
|
||||||
|
VueAMap.initAMapApiLoader({
|
||||||
|
// 高德的key
|
||||||
|
key: "b5f283177b02e0bdd7f4981f4f219432", // 换成你自己的key,这是我随便写的
|
||||||
|
// 插件集合
|
||||||
|
plugin: [
|
||||||
|
"AMap.Autocomplete",
|
||||||
|
"AMap.PlaceSearch",
|
||||||
|
"AMap.Scale",
|
||||||
|
"AMap.OverView",
|
||||||
|
"AMap.ToolBar",
|
||||||
|
"AMap.MapType",
|
||||||
|
"AMap.PolyEditor",
|
||||||
|
"AMap.CircleEditor",
|
||||||
|
],
|
||||||
|
// 高德 sdk 版本，默认为 1.4.4
|
||||||
|
v: "1.4.4",
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- 设置高德地图安全密钥 -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: 'd4afcbb16c37bab037fe756ffb063e51', // 你的密钥
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,11 +1,93 @@
|
||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div class="mapBox">
|
||||||
|
<!-- 使用高德地图的组件-->
|
||||||
|
<el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px">
|
||||||
|
<!-- el-amap-marker>: 通过v-for指令循环遍历markers数组，-->
|
||||||
|
<!-- 并为每个标记创建一个el-amap-marker组件，将标记的位置(position)绑定到数组中的相应数据。-->
|
||||||
|
<el-amap-marker
|
||||||
|
v-for="marker in markers"
|
||||||
|
:position="marker.position"
|
||||||
|
:events="marker.events"
|
||||||
|
:key="marker.index"
|
||||||
|
></el-amap-marker>
|
||||||
|
<el-amap-info-window
|
||||||
|
v-for="window in windows"
|
||||||
|
:offset="window.offset"
|
||||||
|
:position="window.position"
|
||||||
|
:content="window.content"
|
||||||
|
:open="window.open"
|
||||||
|
:key="window.index"
|
||||||
|
></el-amap-info-window>
|
||||||
|
</el-amap>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 单位信息
|
||||||
|
unit: "xxxxx政府司法局",
|
||||||
|
address: "xx省xx市xxxxx大道东433号",
|
||||||
|
// markers和windows数组用于存储地图标记和信息窗口的数据结构。
|
||||||
|
markers: [],
|
||||||
|
windows: [],
|
||||||
|
center: [116.39, 39.9],
|
||||||
|
zoom: 16,
|
||||||
|
// currentPosition: null, // 新增一个用于存储当前经纬度的变量
|
||||||
|
label: {
|
||||||
|
content: "自定义标题",
|
||||||
|
offset: [10, 12],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
this.initMap();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化地图
|
||||||
|
initMap(map) {
|
||||||
|
this.markers.push({
|
||||||
|
// position: [116.407387, 39.904179],
|
||||||
|
position: [116.39, 39.9],
|
||||||
|
// position: this.currentPosition,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.windows.push({
|
||||||
|
position: [116.39, 39.9],
|
||||||
|
// position: this.currentPosition,
|
||||||
|
content:
|
||||||
|
"<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
|
||||||
|
this.unit +
|
||||||
|
"</h2>" +
|
||||||
|
"<div style='margin: 10px'>" +
|
||||||
|
"地址：" +
|
||||||
|
this.address +
|
||||||
|
"</div>",
|
||||||
|
offset: [0, -20],
|
||||||
|
open: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// var map = new AMap.Map("container", {
|
||||||
|
// zoomEnable: true, //是否禁止缩放
|
||||||
|
// zoom: 12, //缩放比例
|
||||||
|
// dragEnable: false, //禁止拖动
|
||||||
|
// cursor: "hand", // 鼠标在地图上的表现形式，小手
|
||||||
|
// });
|
||||||
|
// // 初始化工具条
|
||||||
|
// map.plugin(["AMap.ToolBar"], function () {
|
||||||
|
// map.addControl(new AMap.ToolBar());
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mapBox {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue