工作总结：面包屑+ 父子组件的分开+地图

在公司的实际项目开发中，作为前端开发人员，应该谨记一下几点:

1、首先需要详细的分析需求，知道哪些是难点？哪些是需要注意的？做到心中有数。

2、其次，仔细看需求文档，看请求参数有哪些？以及返回参数，请求方式等；

3、最后，在实际的开发中，一定要有清晰的逻辑（重点）

面包屑（黄色）+ 父子组件的分开（黄色）+地图（紫色）

https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

高德地图API：https://lbs.amap.com/dev/key/app (可以生成key)

父组件：

< template >

< div class = "app-container" >

<!-- 输入框和搜索按钮 -->

< div class = "filter-container" >

< el-input v-model = " queryShoppingListParam.queryContent " placeholder = "请输入商圈名称" clearable style = "width:300px;" @keyup.enter.native = " handleFilter " ></ el-input >

< el-button size = "medium" class = "filter-item" type = "primary" icon = "el-icon-search" @click = " searchShopData " > {{ $t( 'table.search' ) }} </ el-button >

</ div >

<!-- 商圈总数和新建商圈按钮 -->

< div class = "text" >

< span > 商圈总数：{{totalAddressNumber}}个 </ span >

< el-button class = "filter-item" style = "margin-left:20px;" type = "primary" icon = "el-icon-plus" @click = " newAddShop " > 新建商圈 </ el-button >

</ div >

<!-- table列表 用来放置初始化数据 -->

< el-table :data = " shoppingListData " border style = "width: 100%" >

< el-table-column label = "是否启用" prop = "addressIsUse" :formatter = " addressIsUseFormatter " ></ el-table-column >

< el-table-column align = "center" label = "操作" >

< template slot-scope = "scope" >

<!-- scope.row 指的是表格中一行的数据 -->

< el-button type = "primary" icon = "edit" @click = " onAmendShop(scope.$index,scope.row) " > 修改 </ el-button >

</ template >

</ el-table-column >

</ el-table >

</ div >

</ template >

< script >

import { parseTime } from "@/utils" ;

//在父组件中引入子组件

import shoppingList from "./addShoppingDialog";

import shoppingAmend from "./amendShoppingDialog";

export default {

components: { },

data() {

return {

//新建商圈初始化为不可见

doQueryShoppingList: false,

//修改商圈初始化为不可见

doQueryAmendShopping:false,

};

},

created() { },

methods: {

//新建商圈

newAddShop() {

this.$router.push({

path: "/addAddress",

query: {}

});

},

hideShoppingListDialog () {

//隐藏添加商圈对话框

this.shoppingListVisible = false;

},

//修改商圈数据

onAmendShop(index, row) {

this.$router.push({

path: "/modifyAddress",

query: {addressId:row.addressId}

});

},

}

};

</ script >

< style scoped >

.filter-container {

float : left;

margin-bottom : 20px ;

}

.text {

float : right;

}

</ style >

新建商圈子组件

< template >

< div class = "outer" >

<!-- 搜索框 -->

<div>

<el-amap-search-box class="search-box " v-model="addShoppingAreaParam.addressLocation" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>

</div>

<!-- 经纬度和具体地址 -->

<div class="toolbar location">

经纬度: [{{ lng }}, {{ lat }}] 商圈地址: {{ address }}

</div>

<!-- 新建商圈对话框保存按钮 -->

< div >

< el-button size = "medium" class = "filter-item" type = "primary" @click = " saveAddShopping " > 保存 </ el-button >

</ div >

<!-- 地图 -->

<div class="amap-page-container">

<el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">

<el-amap-marker v-for="marker in markers" :key="marker.key" :position="marker"></el-amap-marker>

</el-amap>

</div>

</ div >

</ div >

</ template >

< script >

import VueAMap from "vue-amap" ; //引用地图

Vue.use(VueAMap); //引用地图

export default {

name: "shopping-list" ,

props: { },

data() {

let self = this; //地图定位

return {

center: [120.63, 31.17], //地图默认地址

//地图搜素

markers: [

[121.59996, 31.197646],

[121.40018, 31.197622],

[121.69991, 31.207649]

],

searchOption: {

citylimit: false

},

mapCenter: [120.63, 31.17],

//地图定位

center: [120.63, 31.17],

lng: 0,

lat: 0,

address: "",

loaded: false,

};

},

created() {

// 初始化vue-amap

VueAMap.initAMapApiLoader({

// 高德的key

key: "04b30a9ef15659b83100fb067ac3ac90",

// 插件集合

plugin: [

"AMap.Autocomplete",

"AMap.PlaceSearch",

"AMap.Scale",

"AMap.OverView",

"AMap.ToolBar",

"AMap.MapType",

"AMap.PolyEditor",

"AMap.CircleEditor",

"AMap.Geocoder"

],

// 高德 sdk 版本，默认为 1.4.4

v: "1.4.4"

});

},

methods: {

resetAddShoppingForm() {

//关闭对话框

this.$emit("cancelDialog"); //$emit触发父组件所关心的自定义事件

},

// 地图定位

onSearchResult(pois) {

let latSum = 0;

let lngSum = 0;

if (pois.length > 0) {

pois.forEach(poi => {

let { lng, lat } = poi;

lngSum += lng;

latSum += lat;

this.markers.push([poi.lng, poi.lat]);

});

let center = {

lng: lngSum / pois.length,

lat: latSum / pois.length

};

this.mapCenter = [center.lng, center.lat];

this.lng = center.lng;

this.lat = center.lat;

var geocoder = new AMap.Geocoder({

radius: 1000,

extensions: "all"

});

let self = this;

geocoder.getAddress([this.lng, this.lat], function(status, result) {

if (status === "complete" && result.info === "OK") {

if (result && result.regeocode) {

self.address = result.regeocode.formattedAddress;

self.addShoppingAreaParam.addressCode =

result.regeocode.addressComponent.adcode;

self.$nextTick();

}

}

});

}

},

//保存新建商圈对话框

saveAddShopping() {

//新建商圈接口

this.addShoppingAreaParam.addressLatitude = this.lat;

this.addShoppingAreaParam.addressLongitude = this.lng;

this.addShoppingAreaParam.addressLocation = this.address;

addShoppingArea( this .addShoppingAreaParam).then(() => {

this .$notify({

title: "成功" ,

message: "添加商圈信息成功" ,

type: "success" ,

duration: 2000

});

//删除其他tags 打开商圈维护首页

this.$store

.dispatch("delAllViews")

.then(({ visitedViews }) => {

this.$router.push("/environment");

});

});

}

},

computed: {},

watch: {}

};

</ script >

< style scoped >

.amap-demo {

height : 500px ;

margin-top : 15px ;

}

.search-box {

position : relative;

margin : 1rem ;

}

.amap-page-container {

position : relative;

}

.outer {

position : relative;

}

.location {

margin : 1rem ;

}

.mapArea {

margin : 1rem ;

}

</ style >

修改商圈子组件

< template >

<!-- 添加新建商圈对话框 -->

< div class = "outer" >

<!-- 搜索框 -->

< div >

< el-amap-search-box class = "search-box" v-model = " queryShoppingAreaParam.addressLocation " :search-option = " searchOption " :on-search-result = " onSearchResult " ></ el-amap-search-box >

</ div >

<!-- 经纬度和具体地址 -->

< div class = "toolbar location" >

经纬度: [{{ lng }}, {{ lat }}] 商圈地址: {{ address }}

</ div >

< div class = "mapArea" >

< el-form :model = " queryShoppingAreaParam " :data = " queryListData.list " >

<!-- 新建商圈对话框是否启用下拉列表 -->

< el-row :gutter = " 24 " >

< el-col :span = " 8 " >

< el-form-item label = "是否启用" >

< el-select v-model = " queryShoppingAreaParam.addressIsUse " clearable class = "filter-item" style = "width: 100px;" >

< el-option v-for = " item in isUseOptions " :key = " item.key " :label = " item.display_name " :value = " item.key " />

</ el-select >

</ el-form-item >

</ el-col >

<!-- 商圈名称-->

< el-col :span = " 8 " >

< el-form-item label = "商圈名称" >

< el-input v-model = " queryShoppingAreaParam.addressName " placeholder = "商圈名称" clearable style = "width:210px;" ></ el-input >

</ el-form-item >

</ el-col >

<!-- 备注 -->

< el-col :span = " 8 " >

< el-form-item label = "备注" >

< el-input v-model = " queryShoppingAreaParam.addressRemark " placeholder = "备注" clearable style = "width:200px; margin-left:20px;" ></ el-input >

</ el-form-item >

</ el-col >

</ el-row >

</ el-form >

<!-- 新建商圈对话框保存按钮 -->

< div >

< el-button size = "medium" class = "filter-item" type = "primary" @click = " saveAmendShopping " > 保存 </ el-button >

</ div >

<!-- 地图 -->

< div class = "amap-page-container" >

< el-amap vid = "amapDemo" :center = " mapCenter " :zoom = " 12 " class = "amap-demo" >

< el-amap-marker v-for = " marker in markers " :key = " marker.key " :position = " marker " ></ el-amap-marker >

</ el-amap >

</ div >

</ div >

</ div >

</ template >

< script >

import Vue from "vue" ;

//引入接口

import { queryShoppingInforById, amendShoppingInfor } from "@/api/environment" ;

import VueAMap from "vue-amap" ; //引用地图

Vue.use(VueAMap); //引用地图

//定义是否启用选择项

const isUseOptions = [

{ key: "1" , display_name: "是" },

{ key: "0" , display_name: "否" }

];

export default {

name: "shopping-amend" ,

//props用来接收父组件传给子组件的数据

props: {},

data() {

let self = this ; //地图定位

return {

isUseOptions, //引用是否启用选择项

//地图搜素

markers: [

[ 121.59996 , 31.197646 ],

[ 121.40018 , 31.197622 ],

[ 121.69991 , 31.207649 ]

],

searchOption: {

citylimit: false

},

mapCenter: [ 120.63 , 31.17 ],

//地图定位

center: [ 120.63 , 31.17 ],

lng: 0 ,

lat: 0 ,

address: "" ,

loaded: false ,

//queryShoppingAreaId: { addressId: "" }, 查询商圈ID参数

// 查询商圈参数

queryShoppingAreaParam: {

addressId: "" ,

addressCode: "" ,

addressName: "" ,

addressLocation: "" ,

addressRemark: "" ,

addressIsUse: "" ,

addressLatitude: "" ,

addressLongitude: ""

},

queryListData: {

total: 0 ,

list: []

}

};

},

created() {

//获取商圈id

this .queryShoppingAreaParam.addressId = this .$route.query.addressId;

this .queryShoppingInformation();

// 初始化vue-amap

VueAMap.initAMapApiLoader({

// 高德的key

key: "04b30a9ef15659b83100fb067ac3ac90" ,

// 插件集合

plugin: [

"AMap.Autocomplete" ,

"AMap.PlaceSearch" ,

"AMap.Scale" ,

"AMap.OverView" ,

"AMap.ToolBar" ,

"AMap.MapType" ,

"AMap.PolyEditor" ,

"AMap.CircleEditor" ,

"AMap.Geocoder"

],

// 高德 sdk 版本，默认为 1.4.4

v: "1.4.4"

});

},

methods: {

// 地图定位

onSearchResult(pois) {

let latSum = 0 ;

let lngSum = 0 ;

if (pois.length > 0 ) {

pois.forEach(poi => {

let { lng, lat } = poi;

lngSum += lng;

latSum += lat;

this .markers.push([poi.lng, poi.lat]);

});

let center = {

lng: lngSum / pois.length,

lat: latSum / pois.length

};

this .mapCenter = [center.lng, center.lat];

this .lng = center.lng;

this .lat = center.lat;

this .queryShoppingAreaParam.addressLatitude = center.lat;

this .queryShoppingAreaParam.addressLongitude = center.lng;

var geocoder = new AMap.Geocoder({

radius: 1000 ,

extensions: "all"

});

let self = this ;

geocoder.getAddress([ this .lng, this .lat], function (status, result) {

if (status === "complete" && result.info === "OK" ) {

// alert(JSON.stringify(result));

if (result && result.regeocode) {

self.address = result.regeocode.formattedAddress;

self.queryShoppingAreaParam.addressLocation = result.regeocode.formattedAddress;

self.queryShoppingAreaParam.addressCode = result.regeocode.addressComponent.adcode;

// alert(result.regeocode.addressComponent.adcode);

self.$nextTick();

}

}

});

}

},

//根据商圈id查询商圈信息接口

queryShoppingInformation() {

let param = { addressId: this .queryShoppingAreaParam.addressId };

queryShoppingInforById(param).then(data => {

let res = data.data;

this .queryShoppingAreaParam.addressName = res.addressName;

this .queryShoppingAreaParam.addressLocation = res.addressLocation;

this .queryShoppingAreaParam.addressIsUse = res.addressIsUse;

this .queryShoppingAreaParam.addressCode = res.addressCode;

this .queryShoppingAreaParam.addressLatitude = res.addressLatitude;

this .queryShoppingAreaParam.addressLongitude = res.addressLongitude;

this .queryShoppingAreaParam.addressRemark = res.addressRemark;

this .$notify({

title: "成功" ,

message: "查询商圈信息成功" ,

type: "success" ,

duration: 2000

});

});

},

// 根据商圈id修改商圈信息接口

saveAmendShopping() {

amendShoppingInfor( this .queryShoppingAreaParam).then(() => {

this .$notify({

title: "成功" ,

message: "修改成功" ,

type: "success" ,

duration: 2000

});

//删除其他tags 打开商圈维护首页

this .$store

.dispatch( "delAllViews" )

.then(({ visitedViews }) => {

this .$router.push( "/environment" );

});

});

}

},

computed: {},

watch: {}

};

</ script >

< style scoped >

.amap-demo {

height : 500px ;

margin-top : 15px ;

}

.search-box {

position : relative;

margin : 1rem ;

}

.amap-page-container {

position : relative;

}

.outer {

position : relative;

}

.location {

margin : 1rem ;

}

.mapArea {

margin : 1rem ;

}

</ style >

 

 

转载于:https://my.oschina.net/u/4013226/blog/2615878