orderAMap.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <el-dialog v-loading='loading' element-loading-text="拼命加载中" width="80%" destroy-on-close :visible.sync="dialogTableVisible">
  3. <el-form v-if="showSearch" ref="ruleForm" class="demo-form-inline" :inline="true">
  4. <el-form-item class="search-box">
  5. <el-input @keydown.enter.native="seachEnterFun" v-model="searchKey" type="search" id="search" style="width: 219px" placeholder="请输入关键字进行搜索" />
  6. </el-form-item>
  7. <el-form-item>
  8. <el-button type="primary" class="map-btn" @click="searchMap">搜索</el-button>
  9. </el-form-item>
  10. <div class="tip-box" id="searchTip"></div>
  11. <el-form-item label="经度" prop="lng">
  12. <el-input maxlength="11" v-model="lng" style="width: 140px" disabled></el-input>
  13. </el-form-item>
  14. <el-form-item label="纬度:" prop="lat">
  15. <el-input maxlength="10" v-model="lat" style="width: 140px" disabled></el-input>
  16. </el-form-item>
  17. <el-form-item>
  18. <el-button type="primary" class="map-btn" @click="clickSureMap">确定</el-button>
  19. </el-form-item>
  20. <div v-show="showAddressList" class="address-list">
  21. <div class="address" @click="getGeoCode(v)" v-for="(v,i) in promptList" :key="i">
  22. <span class="name">{{v.name}}</span>
  23. <span class="district">{{v.district}}{{v.address}}</span>
  24. </div>
  25. </div>
  26. </el-form>
  27. <amap ref="map" :zoom="zoom" :center="center" style="height: 600px;" class="amap-demo">
  28. <amap-marker v-for="(marker,index) in markers" :key="index" :offset="marker.offset" :position="marker.position" :icon="marker.icon" :label="marker.label" />
  29. </amap>
  30. </el-dialog>
  31. </template>
  32. <script>
  33. import { getInputPrompt, getGeoCode, getMapData } from "../../api/order.js";
  34. export default {
  35. data() {
  36. return {
  37. searchKey: "",
  38. dialogTableVisible: false,
  39. order: {},
  40. markers: [],
  41. texts: [],
  42. defaultCity: "北京",
  43. zoom: 18,
  44. center: [116.39747132275389, 39.908857325556404],
  45. promptList: [],
  46. address: "",
  47. addressDetail: {},
  48. lng: "",
  49. lat: "",
  50. showAddressList: false,
  51. showSearch: false,
  52. loading: false,
  53. };
  54. },
  55. created() {},
  56. mounted() {},
  57. methods: {
  58. seachEnterFun(e) {
  59. var keyCode = window.event ? e.keyCode : e.which;
  60. if (keyCode == 13) {
  61. this.searchMap();
  62. }
  63. },
  64. getGeoCode(v) {
  65. this.showAddressList = false;
  66. let address = v.district + v.address + v.name;
  67. getGeoCode({ address }).then((res) => {
  68. if (res.code === 200) {
  69. console.log("object", res.data);
  70. this.addressDetail = res.data[0];
  71. this.addressDetail.address = address;
  72. let splitPoint = this.addressDetail.location.indexOf(",");
  73. console.log("splitPoint", splitPoint);
  74. this.lng = this.addressDetail.location.slice(0, splitPoint);
  75. this.lat = this.addressDetail.location.slice(splitPoint + 1);
  76. this.center = [this.lng, this.lat];
  77. this.markers = [
  78. {
  79. id: 1,
  80. position: this.center,
  81. icon: "/static/image/map_current.png",
  82. },
  83. ];
  84. } else {
  85. this.$message({
  86. type: "error",
  87. message: res.msg,
  88. });
  89. }
  90. });
  91. },
  92. searchMap() {
  93. if (!this.searchKey.trim()) {
  94. return this.$message({
  95. type: "error",
  96. message: "请先输入关键字后再搜索!",
  97. });
  98. }
  99. getInputPrompt({ keywords: this.searchKey }).then((res) => {
  100. if (res.code === 200) {
  101. if (res.data.length) {
  102. this.promptList = res.data;
  103. this.showAddressList = true;
  104. }
  105. } else {
  106. this.$message({
  107. type: "error",
  108. message: res.msg,
  109. });
  110. }
  111. });
  112. },
  113. init(data, mapData) {
  114. let orderDistance =
  115. mapData.orderDistance > 1000
  116. ? (mapData.orderDistance / 1000).toFixed(1) + "公里"
  117. : mapData.orderDistance + "米";
  118. let sendM = {
  119. id: 1,
  120. position: [data.sendLng, data.sendLat],
  121. icon: "/static/image/map-fa.png",
  122. offset: [10, -50],
  123. label: {
  124. content: `商家距离目的地${orderDistance}`,
  125. direction: "top",
  126. },
  127. };
  128. let receiptM = {
  129. id: 2,
  130. position: [data.receiptLng, data.receiptLat],
  131. icon: "/static/image/map-shou.png",
  132. };
  133. // 中心点
  134. this.center = [
  135. ((data.receiptLng * 1 + data.sendLng * 1) / 2).toFixed(6),
  136. ((data.receiptLat * 1 + data.sendLat * 1) / 2).toFixed(6),
  137. ];
  138. // marker标记
  139. this.markers = [sendM, receiptM];
  140. if (mapData.shipperLng && mapData.shipperLat) {
  141. let distance =
  142. mapData.shipperDistance > 1000
  143. ? (mapData.shipperDistance / 1000).toFixed(1) + "公里"
  144. : mapData.shipperDistance + "米";
  145. let riderM = {
  146. id: 3,
  147. position: [mapData.shipperLng, mapData.shipperLat],
  148. icon: "/static/image/map-rider.png",
  149. offset: [15, -50],
  150. label: {
  151. content:
  152. data.buttonStatus === 2
  153. ? `骑手距离商家${distance} | 预计${mapData.riderArriveMinute}分钟后到店`
  154. : data.buttonStatus === 3
  155. ? `骑手距离目的地${distance} | 预计${mapData.estimateArriveTime}送达`
  156. : "",
  157. direction: "top",
  158. },
  159. };
  160. this.markers.push(riderM);
  161. }
  162. this.$nextTick(() => {
  163. console.log('显示地图',this.$refs.map.$map);
  164. this.$refs.map.$map.setFitView();
  165. setTimeout(() => {
  166. this.$refs.map.$map.setFitView();
  167. }, 2000);
  168. });
  169. },
  170. setDialogStatus(data) {
  171. this.dialogTableVisible = true;
  172. this.loading = true;
  173. getMapData({ orderId: data.id }).then((res) => {
  174. if (res.code === 200) {
  175. this.loading = false;
  176. this.init(data, res.data);
  177. } else {
  178. this.loading = false;
  179. this.$message({
  180. type: "error",
  181. message: res.msg,
  182. });
  183. }
  184. });
  185. },
  186. chooseLocation() {
  187. this.dialogTableVisible = true;
  188. this.showSearch = true;
  189. this.searchKey = "";
  190. this.lat = "";
  191. this.lng = "";
  192. },
  193. clickSureMap() {
  194. this.$emit("getAddressDetail", this.addressDetail, this.lng, this.lat);
  195. this.dialogTableVisible = false;
  196. },
  197. },
  198. };
  199. </script>
  200. <style lang="scss" scoped>
  201. /deep/ .amap-marker-label {
  202. font-size: 12px;
  203. background: #fc7200;
  204. color: #fff;
  205. padding: 4px 8px;
  206. border: none;
  207. }
  208. /deep/ .amap-marker-label:before {
  209. content: "";
  210. width: 0;
  211. height: 0;
  212. border-left: 10px solid transparent;
  213. border-right: 10px solid transparent;
  214. border-top: 10px solid #fc7200;
  215. position: absolute;
  216. bottom: -10px;
  217. left: 50%;
  218. transform: translateX(-50%);
  219. }
  220. .map-btn {
  221. background: #fc7200;
  222. border: none;
  223. }
  224. .demo-form-inline {
  225. position: relative;
  226. display: flex;
  227. align-items: center;
  228. .address-list {
  229. position: absolute;
  230. left: 0;
  231. top: 45px;
  232. border: 2px solid #3333;
  233. background: #fff;
  234. padding: 0 10px;
  235. z-index: 2;
  236. .address {
  237. line-height: 30px;
  238. cursor: pointer;
  239. .name {
  240. color: #333333;
  241. }
  242. .district {
  243. color: #999999;
  244. margin-left: 10px;
  245. }
  246. }
  247. }
  248. }
  249. /* 图标大小修改 */
  250. /deep/ .el-dialog__header {
  251. display: none !important;
  252. }
  253. #container {
  254. width: 100%;
  255. height: 400px;
  256. }
  257. /deep/ .amap-container img {
  258. width: 35px !important;
  259. height: 45px !important;
  260. }
  261. </style>