|
|
@@ -1,267 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-row class="movie-list">
|
|
|
- <el-col :md="24">
|
|
|
- <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-card class="box-card">
|
|
|
- <div class="text item amap-wrapper">
|
|
|
- <el-select v-model="form" placeholder="选择标签" @change="onChange">
|
|
|
- <el-option label="全部" value="0" />
|
|
|
- <el-option label="分类1" value="1" />
|
|
|
- <el-option label="分类2" value="2" />
|
|
|
- <el-option label="分类3" value="3" />
|
|
|
- </el-select>
|
|
|
- <!-- zoom=7 的比例尺为 100km -->
|
|
|
- <baidu-map
|
|
|
- :center="mapCenter"
|
|
|
- :scroll-wheel-zoom="true"
|
|
|
- :zoom="7"
|
|
|
- class="bm-view"
|
|
|
- @click="getClickInfo"
|
|
|
- @ready="onBaiduMapReady"
|
|
|
- >
|
|
|
- <!--比例尺控件左上角-->
|
|
|
- <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT" />
|
|
|
- <!--缩放控件右下角-->
|
|
|
- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
|
|
|
- <bm-marker
|
|
|
- v-for="(item,index) in markers"
|
|
|
- :key="index"
|
|
|
- :position="item.position"
|
|
|
- @click="getMarkerInfoWrapper(item)"
|
|
|
- >
|
|
|
- <bm-label
|
|
|
- :content="item.title"
|
|
|
- :label-style="{color: 'blue', fontSize : '12px'}"
|
|
|
- :offset="{width: 0, height: 0}"
|
|
|
- />
|
|
|
- </bm-marker>
|
|
|
- </baidu-map>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <!-- marker 内容弹窗 -->
|
|
|
- <el-dialog
|
|
|
- append-to-body
|
|
|
- :visible.sync="showMarkerDialog"
|
|
|
- :before-close="handleDialogClose"
|
|
|
- width="30%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <el-button
|
|
|
- v-clipboard:copy="earthPoint.lat + ' ' + earthPoint.lng"
|
|
|
- v-clipboard:success="onCopy"
|
|
|
- v-clipboard:error="onCopyError"
|
|
|
- type="text"
|
|
|
- >GoogleEarth 坐标</el-button>
|
|
|
- </div>
|
|
|
- <div class="text item">
|
|
|
- <el-image v-if="markerInfo.photoUrl !== null" :src="markerInfo.photoUrl" min-width="40" height="30" />
|
|
|
- <br>
|
|
|
- <label>
|
|
|
- 商品 <span v-text="markerInfo.itemId" />
|
|
|
- </label>
|
|
|
- <br>
|
|
|
- <label>
|
|
|
- SKU <span v-text="markerInfo.sku" />
|
|
|
- </label>
|
|
|
- <br>
|
|
|
- <label>
|
|
|
- 评论 <span style="color: blue" v-text="markerInfo.replyContent" />
|
|
|
- </label>
|
|
|
- <br>
|
|
|
- <!-- <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
|
|
|
- 追加 <span style="color: blue" v-text="markerInfo.appendContent"/>
|
|
|
- </label>-->
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-dialog>
|
|
|
- </el-row>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import Vue from 'vue'
|
|
|
-import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
|
|
|
-import BmScale from 'vue-baidu-map/components/controls/Scale'
|
|
|
-import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
|
|
|
-import BmMarker from 'vue-baidu-map/components/overlays/Marker'
|
|
|
-
|
|
|
-Vue.use(BaiduMap, {
|
|
|
- ak: ''
|
|
|
-})
|
|
|
-
|
|
|
-import { getMapMarkers, getMarkerInfo } from '@/api/map'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- BaiduMap,
|
|
|
- BmScale, // 比例尺
|
|
|
- BmNavigation, // 缩放
|
|
|
- BmMarker // 标记
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- BMap: null,
|
|
|
- markers: [],
|
|
|
- mapCenter: { title: '武汉', lng: 114.0000, lat: 30.0000 },
|
|
|
- showMarkerDialog: false,
|
|
|
- markerInfo: {
|
|
|
- itemId: null,
|
|
|
- sku: null,
|
|
|
- replyId: null,
|
|
|
- replyContent: null,
|
|
|
- appendContent: null,
|
|
|
- photoUrl: null
|
|
|
- },
|
|
|
- earthPoint: {
|
|
|
- lat: null,
|
|
|
- lng: null
|
|
|
- },
|
|
|
- form: 0
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- document.title = '地图'
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onBaiduMapReady(e) {
|
|
|
- const that = this
|
|
|
- this.BMap = e.BMap
|
|
|
- if (this.BMap) {
|
|
|
- // 获取定位地址信息并赋值给声明变量
|
|
|
- // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
|
|
|
- const geolocation = new this.BMap.Geolocation()
|
|
|
- // 通过 getCurrentPosition() 方法：获取当前的位置信息
|
|
|
- geolocation.getCurrentPosition(res => {
|
|
|
- // console.log('返回详细地址和经纬度', res)
|
|
|
- const { lng, lat } = res.point
|
|
|
- const { province, city, district, street, street_number } = res.address
|
|
|
- that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
|
|
|
- })
|
|
|
-
|
|
|
- const type = 0
|
|
|
- this.getMapMarkersWrapper(type)
|
|
|
- }
|
|
|
- },
|
|
|
- getClickInfo(e) {
|
|
|
- // 此时已经可以获取到BMap类
|
|
|
- if (this.BMap) {
|
|
|
- const that = this
|
|
|
- // Geocoder() 类进行地址解析
|
|
|
- // 创建地址解析器的实例
|
|
|
- const geoCoder = new this.BMap.Geocoder()
|
|
|
- // getLocation() 类--利用坐标获取地址的详细信息
|
|
|
- // getPoint() 类--获取位置对应的坐标
|
|
|
- geoCoder.getLocation(e.point, function(res) {
|
|
|
- const lng = e.point.lng
|
|
|
- const lat = e.point.lat
|
|
|
- const addrComponent = res.addressComponents
|
|
|
- const surroundingPois = res.surroundingPois
|
|
|
- const province = addrComponent.province
|
|
|
- const city = addrComponent.city
|
|
|
- const district = addrComponent.district
|
|
|
- let addr = addrComponent.street
|
|
|
- if (surroundingPois.length > 0 && surroundingPois[0].title) {
|
|
|
- if (addr) {
|
|
|
- addr += `-${surroundingPois[0].title}`
|
|
|
- } else {
|
|
|
- addr += `${surroundingPois[0].title}`
|
|
|
- }
|
|
|
- } else {
|
|
|
- addr += addrComponent.streetNumber
|
|
|
- }
|
|
|
-
|
|
|
- that.choosedLocation = { province, city, district, addr, lng, lat }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- getMapMarkersWrapper(type) {
|
|
|
- this.markers = []
|
|
|
- getMapMarkers(type).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$notify({
|
|
|
- message: '加载了 ' + res.data.length + ' 条数据',
|
|
|
- type: 'warning',
|
|
|
- duration: 5000
|
|
|
- })
|
|
|
- this.markers = res.data
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- message: res.msg,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- this.$notify({
|
|
|
- message: error.message,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getMarkerInfoWrapper(item) {
|
|
|
- this.earthPoint = item.position
|
|
|
- this.showMarkerDialog = true
|
|
|
- this.markerInfo = {
|
|
|
- itemId: null,
|
|
|
- sku: null,
|
|
|
- replyId: null,
|
|
|
- replyContent: null,
|
|
|
- appendContent: null,
|
|
|
- photoUrl: null
|
|
|
- }
|
|
|
-
|
|
|
- getMarkerInfo(item.id).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.markerInfo = res.data
|
|
|
- } else {
|
|
|
- this.showMarkerDialog = false
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- this.showMarkerDialog = false
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
- },
|
|
|
- handleDialogClose(done) {
|
|
|
- this.showMarkerDialog = false
|
|
|
- this.earthPoint = { lat: null, lng: null }
|
|
|
- done()
|
|
|
- },
|
|
|
- onCopy(e) {
|
|
|
- this.$notify({
|
|
|
- message: 'GoogleEarth 坐标已复制, 快到 GoogleEarth 中去找这个地方吧~',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- },
|
|
|
- onCopyError(e) {
|
|
|
- this.$notify({
|
|
|
- message: '复制 GoogleEarth 坐标失败!',
|
|
|
- type: 'error',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- },
|
|
|
- onChange() {
|
|
|
- const type = this.form
|
|
|
- this.getMapMarkersWrapper(type)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-.bm-view {
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
-}
|
|
|
-
|
|
|
-.movie-list {
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 1%;
|
|
|
- padding-right: 1%;
|
|
|
-}
|
|
|
-</style>
|
