feat: 调用高德接口
lijiayao
parent
0da5b6c201
commit
da3265ad9d
|
|
@ -36,6 +36,7 @@
|
|||
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.24.0",
|
||||
"clipboard": "2.0.8",
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
"screenfull": "5.0.2",
|
||||
"sortablejs": "1.10.2",
|
||||
"vue": "2.6.12",
|
||||
"vue-amap": "^0.5.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.5",
|
||||
"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 DictData from '@/components/DictData'
|
||||
// 高德地图
|
||||
import AMapLoader from "@amap/amap-jsapi-loader"
|
||||
import VueAMap from "vue-amap";
|
||||
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
|
|
@ -84,3 +88,26 @@ new Vue({
|
|||
store,
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue