|
@@ -1,139 +0,0 @@
|
|
|
-<template>
|
|
|
- <div v-loading="mapLoading" class="map">
|
|
|
- <div id="container" class="map" />
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// 引入高德地图配置
|
|
|
-import mapConfig, { geoLocation } from '@/common/map.config'
|
|
|
-import { geocode } from '@/common/mapService'
|
|
|
-export default {
|
|
|
- name: 'MapUi',
|
|
|
- props: {
|
|
|
- // 城市名称
|
|
|
- address: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- initPoint: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- markFlag: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- mapLoading: true,
|
|
|
- AMap: null,
|
|
|
- map: null,
|
|
|
- marker: null,
|
|
|
- position: null
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.$nextTick(() => {
|
|
|
- console.log(this.address)
|
|
|
- this.init()
|
|
|
- })
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.AMap = null
|
|
|
- this.marker = null
|
|
|
- this.position = null
|
|
|
- this.map.destroy()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 初始化地图
|
|
|
- async init() {
|
|
|
- this.AMap = await window.AMapLoader.load(mapConfig)
|
|
|
- this.map = new this.AMap.Map('container', {
|
|
|
- zoom: 16, // 设置地图显示的缩放级别
|
|
|
- center: [116.397428, 39.90923], // 设置地图中心点坐标
|
|
|
- viewMode: '2D' // 设置地图模式
|
|
|
- })
|
|
|
- this.map.setDefaultCursor('pointer')
|
|
|
- this.addController()
|
|
|
- // 绑定点击事件
|
|
|
- this.bindEvent()
|
|
|
-
|
|
|
- // 初始化地图中心点标记
|
|
|
- // 1 根据已有坐标定位
|
|
|
- if (this.initPoint) {
|
|
|
- const [lng, lat] = this.initPoint.split(',')
|
|
|
- console.log(this.initPoint.split(','))
|
|
|
- const position = new this.AMap.LngLat(parseFloat(lng), parseFloat(lat))
|
|
|
- console.log(position)
|
|
|
- this.markerTo(position)
|
|
|
- this.map.setCenter(position)
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 2 根据城市信息定位
|
|
|
- if (this.address) {
|
|
|
- // const result = await geoCoder('北京市朝阳区阜荣街10号')
|
|
|
- const result = await geocode({
|
|
|
- address: this.address
|
|
|
- })
|
|
|
- if (result.geocodes.length > 0) {
|
|
|
- const [lng, lat] = result.geocodes[0].location.split(',')
|
|
|
- const position = new this.AMap.LngLat(parseFloat(lng, 8), parseFloat(lat, 8))
|
|
|
- this.markerTo(position)
|
|
|
- this.map.setCenter(position)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 3 默认浏览器定位
|
|
|
- const { lng, lat } = await geoLocation()
|
|
|
- const position = new this.AMap.LngLat(lng, lat)
|
|
|
- this.markerTo(position)
|
|
|
- this.map.setCenter(position)
|
|
|
- },
|
|
|
-
|
|
|
- // 添加控件
|
|
|
- addController() {
|
|
|
- this.map.addControl(new this.AMap.ToolBar())
|
|
|
- this.map.addControl(new this.AMap.MapType())
|
|
|
- },
|
|
|
-
|
|
|
- // 绑定事件
|
|
|
- bindEvent() {
|
|
|
- this.map.on('complete', () => {
|
|
|
- this.mapLoading = false
|
|
|
- })
|
|
|
- if (this.markFlag) {
|
|
|
- this.map.on('click', ev => {
|
|
|
- const { lng, lat } = ev.lnglat
|
|
|
- this.markerTo(new this.AMap.LngLat(lng, lat))
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 移动点标记
|
|
|
- markerTo(position) {
|
|
|
- if (this.marker) this.map.remove(this.marker)
|
|
|
- // 构造点标记
|
|
|
- this.marker = new this.AMap.Marker({
|
|
|
- icon: '/location.png',
|
|
|
- position: position,
|
|
|
- offset: new this.AMap.Pixel(-24, -44)
|
|
|
- })
|
|
|
- this.map.add(this.marker)
|
|
|
- this.position = position
|
|
|
- this.$emit('change', this.position)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.map{
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
-}
|
|
|
-</style>
|