1 line
13 KiB
JSON
1 line
13 KiB
JSON
{"ast":null,"code":"import { searchFun } from '@/utils/map';\nimport { leftCopy } from '@/utils/common';\nexport default {\n name: \"addressMap\",\n data() {\n return {\n map: '',\n mapPosition: 60,\n source: '',\n keyword: '',\n addressList: [],\n activeIndex: null,\n marker: null\n };\n },\n watch: {\n keyword() {\n this.searchHandler();\n }\n },\n created() {\n this.source = this.$route.query.source || '';\n },\n async mounted() {\n await this.initMap();\n },\n methods: {\n inputBlur() {\n let u = navigator.userAgent;\n let isIOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);\n if (isIOS) {\n setTimeout(() => {\n const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;\n window.scrollTo(0, Math.max(scrollHeight - 1, 0));\n }, 200);\n }\n },\n chooseHandler(item, index) {\n document.body.scrollIntoView();\n this.activeIndex = index;\n this.addMarker();\n },\n addMarker() {\n if (this.marker) {\n this.map.remove(this.marker);\n }\n let content = '<div class=\"my-position\"></div>';\n let activeObj = this.addressList[this.activeIndex];\n this.marker = new AMap.Marker({\n position: new AMap.LngLat(activeObj.location.lng, activeObj.location.lat),\n content: content,\n offset: new AMap.Pixel(-13, -30)\n });\n this.map.add(this.marker);\n },\n // 取消 返回上一页\n cancelHandler() {\n this.$router.go(-1);\n },\n // 完成 选择了事发地或者目的地\n async successHandler() {\n if (this.activeIndex == null) {\n this.$toast('请选择具体地址');\n return;\n }\n let activeObj = this.addressList[this.activeIndex];\n if (this.source == 'address') {\n // 事发地地址\n await this.$store.dispatch('order/setServerCity', activeObj.district);\n await this.$store.dispatch('order/setAddress', {\n startPoiAddress: activeObj.district + activeObj.address + activeObj.name,\n startLat: activeObj.location.lat,\n startLng: activeObj.location.lng\n });\n } else if (this.source == 'dest') {\n // 目的地地址\n await this.$store.dispatch('order/setDestAddress', {\n endLat: activeObj.location.lat,\n endLng: activeObj.location.lng,\n endPoiAddress: activeObj.district + activeObj.address + activeObj.name\n });\n }\n this.$router.go(-1);\n },\n initMap() {\n // 初始化地图\n let orderInfo = this.$store.getters.order.localAddress;\n this.map = new AMap.Map('mapId', {\n viewMode: '2D',\n // 默认使用 2D 模式\n zoom: 11,\n //初始化地图层级\n center: [orderInfo.lng, orderInfo.lat] //初始化地图中心点\n });\n },\n\n async searchHandler() {\n // 根据当前定位城市搜索，将选中的地址清空\n let localCityCode = this.$store.getters.order.localAddress.localCityCode;\n this.activeIndex = null;\n if (this.keyword) {\n this.addressList = await searchFun(this.map, localCityCode, this.keyword);\n } else {\n this.addressList = [];\n }\n }\n }\n};","map":{"version":3,"names":["searchFun","leftCopy","name","data","map","mapPosition","source","keyword","addressList","activeIndex","marker","watch","searchHandler","created","$route","query","mounted","initMap","methods","inputBlur","u","navigator","userAgent","isIOS","match","setTimeout","scrollHeight","document","documentElement","scrollTop","body","window","scrollTo","Math","max","chooseHandler","item","index","scrollIntoView","addMarker","remove","content","activeObj","AMap","Marker","position","LngLat","location","lng","lat","offset","Pixel","add","cancelHandler","$router","go","successHandler","$toast","$store","dispatch","district","startPoiAddress","address","startLat","startLng","endLat","endLng","endPoiAddress","orderInfo","getters","order","localAddress","Map","viewMode","zoom","center","localCityCode"],"sources":["src/views/index/addressMap.vue"],"sourcesContent":["<template>\r\n <div class=\"address_wrap\">\r\n <div class=\"map_wrap\" id=\"mapId\">\r\n </div>\r\n <div class=\"button_wrap\">\r\n <div class=\"cancel_btn\" @click=\"cancelHandler\">取消</div>\r\n <div class=\"confirm_btn\" @click=\"successHandler\">完成</div>\r\n </div>\r\n <div class=\"search_wrap\">\r\n <div class=\"section\">\r\n <input type=\"text\" v-model=\"keyword\" @change=\"searchHandler\" @blur=\"inputBlur\" placeholder=\"请输入地址\" />\r\n </div>\r\n <div class=\"server_list\" v-if=\"keyword\">\r\n <div class=\"text_box\" v-for=\"(item, index) in addressList\" @click=\"chooseHandler(item, index)\" :class=\"{'active': index == activeIndex}\">\r\n <div class=\"address_name\">{{ item.name }}</div>\r\n <div class=\"address_detail\">{{ ( item.district || '' ) + ( item.address || '' ) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n import { searchFun } from '@/utils/map'\r\n import { leftCopy } from '@/utils/common'\r\n export default {\r\n name: \"addressMap\",\r\n data() {\r\n return {\r\n map: '',\r\n mapPosition: 60,\r\n source: '',\r\n keyword: '',\r\n addressList: [],\r\n activeIndex: null,\r\n marker: null,\r\n }\r\n },\r\n watch: {\r\n keyword() {\r\n this.searchHandler()\r\n }\r\n },\r\n created() {\r\n this.source = this.$route.query.source || ''\r\n },\r\n async mounted() {\r\n await this.initMap()\r\n },\r\n methods: {\r\n inputBlur() {\r\n let u = navigator.userAgent\r\n let isIOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/)\r\n if (isIOS) {\r\n setTimeout(() => {\r\n const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0\r\n window.scrollTo(0, Math.max(scrollHeight - 1, 0))\r\n }, 200)\r\n }\r\n },\r\n chooseHandler(item, index) {\r\n document.body.scrollIntoView();\r\n this.activeIndex = index;\r\n this.addMarker()\r\n },\r\n addMarker() {\r\n if( this.marker ) {\r\n this.map.remove(this.marker)\r\n }\r\n let content = '<div class=\"my-position\"></div>';\r\n let activeObj = this.addressList[this.activeIndex];\r\n this.marker = new AMap.Marker({\r\n position: new AMap.LngLat( activeObj.location.lng, activeObj.location.lat ),\r\n content: content,\r\n offset: new AMap.Pixel(-13, -30)\r\n });\r\n this.map.add(this.marker)\r\n },\r\n // 取消 返回上一页\r\n cancelHandler() {\r\n this.$router.go(-1)\r\n },\r\n // 完成 选择了事发地或者目的地\r\n async successHandler() {\r\n if( this.activeIndex == null ) {\r\n this.$toast('请选择具体地址')\r\n return\r\n }\r\n let activeObj = this.addressList[this.activeIndex];\r\n if( this.source == 'address') { // 事发地地址\r\n await this.$store.dispatch('order/setServerCity', activeObj.district)\r\n await this.$store.dispatch('order/setAddress', {\r\n startPoiAddress: activeObj.district + activeObj.address + activeObj.name,\r\n startLat: activeObj.location.lat,\r\n startLng: activeObj.location.lng,\r\n })\r\n } else if( this.source == 'dest' ) { // 目的地地址\r\n await this.$store.dispatch('order/setDestAddress', {\r\n endLat: activeObj.location.lat,\r\n endLng: activeObj.location.lng,\r\n endPoiAddress: activeObj.district + activeObj.address + activeObj.name,\r\n })\r\n }\r\n this.$router.go(-1)\r\n },\r\n initMap() { // 初始化地图\r\n let orderInfo = this.$store.getters.order.localAddress\r\n this.map = new AMap.Map('mapId', {\r\n viewMode: '2D', // 默认使用 2D 模式\r\n zoom:11, //初始化地图层级\r\n center: [orderInfo.lng, orderInfo.lat] //初始化地图中心点\r\n })\r\n },\r\n async searchHandler() { // 根据当前定位城市搜索，将选中的地址清空\r\n let localCityCode = this.$store.getters.order.localAddress.localCityCode\r\n this.activeIndex = null\r\n if( this.keyword ) {\r\n this.addressList = await searchFun(this.map, localCityCode, this.keyword)\r\n } else {\r\n this.addressList = []\r\n }\r\n\r\n }\r\n }\r\n }\r\n</script>\r\n<style>\r\n @import '@/styles/common.css';\r\n</style>\r\n<style scoped lang=\"less\">\r\n .address_wrap {\r\n height: 100%;\r\n }\r\n .map_wrap {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 60%;\r\n z-index: -1;\r\n }\r\n .button_wrap {\r\n width: 100%;\r\n padding: 5px;\r\n box-sizing: border-box;\r\n zoom: 1;\r\n position: fixed;\r\n top: 0;\r\n .cancel_btn {\r\n width: 50px;\r\n height: 27px;\r\n background: #F37877;\r\n font-size: 12px;\r\n text-align: center;\r\n line-height: 27px;\r\n color: #fff;\r\n border-radius: 3px;\r\n float: left;\r\n }\r\n .confirm_btn {\r\n width: 50px;\r\n height: 27px;\r\n background: rgba(5,193,98,1);\r\n font-size: 12px;\r\n text-align: center;\r\n line-height: 27px;\r\n color: #fff;\r\n border-radius: 3px;\r\n float: right;\r\n }\r\n }\r\n .search_wrap {\r\n background-color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n height: 60%;\r\n bottom: 0;\r\n left: 0;\r\n overflow: auto;\r\n .section {\r\n height: 35px;\r\n width: 100%;\r\n background-color: #fff;\r\n position: fixed;\r\n top: 40%;\r\n padding-top: 10px;\r\n input {\r\n width: 90%;\r\n margin: 0 auto;\r\n display: block;\r\n border: none;\r\n height: 30px;\r\n border-radius: 3px;\r\n padding: 0 10px;\r\n background: #e2e0e0;\r\n font-size: 14px;\r\n }\r\n }\r\n .server_list {\r\n overflow-y: auto;\r\n padding-top: 30px;\r\n .text_box {\r\n margin: 10px 25px;\r\n padding-top: 10px;\r\n .address_name {\r\n font-size: 14px !important;\r\n color: rgba(0,0,0,0.8);\r\n }\r\n .address_detail {\r\n margin-top: 3px;\r\n color: #c3c3c3 !important;\r\n font-size: 12px !important;\r\n }\r\n }\r\n .active {\r\n .address_name {\r\n color: green !important;\r\n }\r\n .address_detail {\r\n color: green !important;\r\n }\r\n }\r\n }\r\n }\r\n</style>\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]} |