Vue通过经纬度显示点位地图

最新推荐文章于 2026-03-09 00:34:26 发布

原创最新推荐文章于 2026-03-09 00:34:26 发布 · 1.8k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

该文介绍了如何在Vue应用中集成高德地图，包括通过npm安装资源，配置地图参数，如版本、API密钥和插件，以及在Vue组件中显示地图、点击事件处理和地图信息的显示。此外，还展示了如何根据经纬度信息展示地图并自定义地图样式。

效果图

1.首先运行npm install --save @amap/amap-vue
下载资源在main.js里添加配置

// 高德地图
import AmapVue from '@amap/amap-vue';

AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
AmapVue.config.key = 'e1b6e4516f3e515c017ea2e7356f7eab';
AmapVue.config.plugins = [
  'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
  'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictSearch', 'AMap.CircleMarker', 'AMap.Polyline'
];
Vue.use(AmapVue);
window._AMapSecurityConfig = {
  securityJsCode:'11a114159073d6bd17eddddbadce94d9',
};

2.在vue页面添加代码

<template>
	<div>
        <table>
        	<af-table-column label="所在地址" align="center" prop="szdz" >
				<template slot-scope="scope">
			      <el-link type="primary" 		      @click="clickMapInfo(scope.row.jd,scope.row.wd)" :underline="false">
			       <span>{{scope.row.szdz}}</span>
			      </el-link>
			    </template>
			</af-table-column>  
    	</table>
        
        <el-dialog title="查看工地地址" :visible.sync="showMapInfo" width="65%" append-to-body>
			<look-map-info :timeStamp="Date.parse(new Date())" :mapData="mapInfo" />
		</el-dialog>
    </div>
</template>

<script>
	import lookMapInfo from "@/components/AMap/lookMapInfo.vue";
    
    export default {
        components: {
			lookMapInfo
		},
        data() {
            return {
                // 经纬度信息
				mapInfo: "",
				// 是否查看信息地图
				showMapInfo: false,
            }
        }
        methods: {
            // 点击查看地图位置
			clickMapInfo(jd,wd) {
				if (!jd) {
					this.$message.error("请维护地址信息");
					return;
				}
				this.mapInfo = jd + "," + wd;
				this.showMapInfo = true;
			},
        }
    }
</script>

3.添加地图页面

<template>
  <div class="coord-picker">
    <div class="map-container">
      <amap
        cache-key="coord-picker-map"
        mmap-style="amap://styles/whitesmoke"
        async
        :center.sync="center"
        :zoom.sync="zoom"
        is-hotspot
      >
        <amap-marker v-if="position" :position.sync="position" draggable />
      </amap>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    timeStamp: {
      type: Number,
    },
    mapData: {
      type: String,
    },
  },
  data() {
    return {
      center: null,
      zoom: 10,
      position: null,
    };
  },
  watch: {
    timeStamp() {
      this.center = [115.479646, 35.234309];
      this.zoom = 10;
      this.position = null;
	  this.initMap();
    },
    mapData() {
      this.initMap();
    },
  },
  created() {
    this.initMap();
  },
  methods: {
    // 搜索输入地区信息
    async initMap() {
      if (!this.mapData) {
        return;
      }
      let mapPoi = this.mapData.split(",");
      if (mapPoi.length < 2) {
        this.center = [115.479646, 35.234309];
        this.zoom = 10;
        return;
      }
      this.center = mapPoi;
      this.zoom = 14;
      this.position = mapPoi;
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 500px;
}
</style>

标签

#vue.js #javascript #前端