|
|
@@ -0,0 +1,164 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-amap
|
|
|
+ class="amap-box"
|
|
|
+ :vid="'amap-vue'"
|
|
|
+ :amap-manager="amapManager"
|
|
|
+ :zoom="mapDiyObj.zoom"
|
|
|
+ :zooms="mapDiyObj.zooms"
|
|
|
+ :mapStyle="mapDiyObj.mapStyle"
|
|
|
+ :center="mapDiyObj.center"
|
|
|
+ :events="mapEvents"
|
|
|
+ :plugin="plugin"
|
|
|
+ >
|
|
|
+ <el-amap-marker class="scoped-m-box" v-for="(marker, index) in markerList" :key="3000 + index"
|
|
|
+ icon="https://img2.honglounews.com/20220110041435-6276.png"
|
|
|
+ width="20"
|
|
|
+ height="20"
|
|
|
+ :position="marker.position"
|
|
|
+ :title="marker.store_name"
|
|
|
+ :label="{content: `${marker.signing == 1 ? 'Y' : 'N'}${marker.store_name}[${marker.clerk_num}]`, offset: [-10 * marker.store_name.length / 2, -20]}"
|
|
|
+ :extData="{id: marker.id}"
|
|
|
+ >
|
|
|
+ </el-amap-marker>
|
|
|
+ </el-amap>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
|
|
|
+const amapManager = new AMapManager()
|
|
|
+import { arrToObj } from '@/utils'
|
|
|
+export default {
|
|
|
+ name: 'shopMap',
|
|
|
+ components: {},
|
|
|
+ mixins,
|
|
|
+ data() {
|
|
|
+ const that = this
|
|
|
+ return {
|
|
|
+ markerList: [],
|
|
|
+ mapDiyObj: {
|
|
|
+ center: [115.852386, 28.684076],
|
|
|
+ zoom: 13,
|
|
|
+ zooms: [11, 21],
|
|
|
+ },
|
|
|
+ amapManager,
|
|
|
+ mapEvents: {
|
|
|
+ init(map) {
|
|
|
+ // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
|
|
|
+ map.setFeatures(['road', 'bg', 'building']); // 多个种类要素显示
|
|
|
+ // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
|
|
|
+ // AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
|
|
|
+ // //图层切换控件
|
|
|
+ // var layerControl = new BasicControl.LayerSwitcher({
|
|
|
+ // baseLayers: [
|
|
|
+ // {
|
|
|
+ // id: 'basic',//图层id，需唯一
|
|
|
+ // enable: false, //是否启用
|
|
|
+ // name: '基础地图',//显示名称，html
|
|
|
+ // layer: new AMap.TileLayer()
|
|
|
+ // },
|
|
|
+ // // {
|
|
|
+ // // id: 'Satellite',//图层id，需唯一
|
|
|
+ // // enable: true, //是否启用
|
|
|
+ // // name: '卫星图',//显示名称，html
|
|
|
+ // // layer: new AMap.TileLayer.Satellite()
|
|
|
+ // // },
|
|
|
+ // ],
|
|
|
+ // overlayLayers:[
|
|
|
+ // ],
|
|
|
+ // position: {
|
|
|
+ // left:'230px',
|
|
|
+ // top:'2px',
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // map.addControl(layerControl);
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // zoomchange (e) {
|
|
|
+ // const curMap = amapManager.getMap()
|
|
|
+ // that.mapDiyObj.zoom = curMap.getZoom() || 17
|
|
|
+ // },
|
|
|
+ // moveend () {
|
|
|
+ // // console.log(this.mapDiyObj.center)
|
|
|
+ // },
|
|
|
+ // click(e) {
|
|
|
+ // if (!that.isDbShow) {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // const { lng, lat } = e.lnglat
|
|
|
+ // // console.log(lng, lat)
|
|
|
+ // that.mapDiyObj.center = [lng, lat]
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ // plugin: [{
|
|
|
+ // pName: 'MouseTool',
|
|
|
+ // }],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ getData () {
|
|
|
+ this.$api.shop.admstorelist({
|
|
|
+ page_size: 10000
|
|
|
+ }).then(res => {
|
|
|
+ const list = res.list || []
|
|
|
+ let markerList = list.map(item => {
|
|
|
+ return {
|
|
|
+ position: [item.longitude, item.latitude],
|
|
|
+ id: item.id,
|
|
|
+ store_name: item.store_name,
|
|
|
+ clerk_num: item.clerk_num,
|
|
|
+ signing: item.signing,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.markerList = [...markerList]
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ position: relative;
|
|
|
+ .amap-box {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+::v-deep .amap-marker-label {
|
|
|
+ border-color: #dcdcdc;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ color: #666;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 0 3px #ccc;
|
|
|
+}
|
|
|
+::v-deep .amap-logo{
|
|
|
+ display: none!important;;
|
|
|
+}
|
|
|
+::v-deep .amap-copyright {
|
|
|
+ opacity:0;
|
|
|
+}
|
|
|
+::v-deep .amap-icon img {
|
|
|
+ width: 11px !important;
|
|
|
+ height: 11px !important;
|
|
|
+ // width: 20px !important;
|
|
|
+ // height: 20px !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
