vue+高德地图·选择省市经纬度定位到指定地方

八百比晴明

于 2023-09-11 18:30:22 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/m0_51981718/article/details/132814263

版权

文章描述了如何使用Vue.js和AMapJavaScriptAPI在地图组件中，当用户选择省市区时，地图平移到对应经纬度并高亮显示选中的轮廓。代码展示了如何初始化地图、响应省份选择事件以及实现地图的平移和高亮功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：当选择一个省市区时，地图平移到指定经纬度，并根据已有的经纬度数据进行高亮显示省市区的轮廓。

实现代码：

<template>
  <div>
    <!-- 地图容器 -->
    <div id="container"></div>
    <!-- 省份选择 -->
    <select v-model="selectedProvince" @change="zoomToProvince">
      <option value="">请选择省份</option>
      <option
        v-for="province in provinces"
        :value="province.name"
        :key="province.name"
      >
        {
   {
    province.name }}
      </option>
    </select>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
   
  data() {
   
    return {
   
      map: null, // 地图对象
      selectedProvince: "", // 选中的省份

最低0.47元/天解锁文章