vue使用高德地图

已于 2024-10-05 15:02:33 修改
阅读量73 收藏
点赞数 1
分类专栏： VUE UNIAPP 文章标签： vue.js javascript ecmascript
于 2024-10-05 14:58:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45788691/article/details/142714306
版权
UNIAPP 同时被 2 个专栏收录
57 篇文章 8 订阅
订阅专栏
VUE
53 篇文章 0 订阅
订阅专栏

在这里插入图片描述
摘要：

需求是填写数据表单时会去选择省市区+具体地址+经纬度，数据的填写与数据的回显！

在这里插入图片描述
vue3:

安装amap/amap-jsapi-loader
npm install amap/amap-jsapi-loader

<ChooseMapPoiDialog ref="chooseMapPoiRef" @confirm="selectPoi" />

// 选择坐标
const chooseMapPoiRef = ref()
const openChooseMap = async () => {
  chooseMapPoiRef.value.open({
    title: '选择坐标',
    areaId: formData.value.areaId,
    address: formData.value.detailAddress,
    latitude: formData.value.splat,
    longitude: formData.value.splon
  })
}

const selectPoi = async (addInfo) => {
  if (addInfo) {
    formData.value.areaId = addInfo.areaId
    formData.value.splon = addInfo.lng
    formData.value.splat = addInfo.lat
    formData.value.detailAddress = addInfo.address
  }
}

ChooseMapPoiDialog.vue:

<template>
  <Dialog v-model="dialogVisible" title="选择坐标" width="65%" :close-on-click-modal="false">
    <div class="dialogModel">
      <div class="flex" style="margin-top: -10px;margin-bottom: 10px;">
        <el-input v-model="mapAddress" placeholder="请输入内容" class="!w-240px !mr-10px" />
        <el-button type="primary" @click="searchInputKeyword">
          <Icon class="mr-5px" icon="ep:search" />查询
        </el-button>
      </div>
      <div class="flex !mb-10px">
        <div class="!w-240px">
          <div class="searchResModel">
            <div class="searchResItem" @click="mapValueChangeNew(item.id)" v-for="(item, index) in poiList" :key="index">
              <p class="poiName">{{ item.name }}</p>
              <p class="poiAddress">{{ item.address }}</p>
            </div>
          </div>
        </div>
        <div style="flex:1;padding-left: 10px;box-sizing:border-box; width: calc(100% - 250px);">
          <div class="mapModel">
            <div id="container" class="map" style="height:500px"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部对话框操作按钮 -->
    <template #footer>
      <el-button type="primary" @click="onSelectAddress">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import AMapLoader from "@amap/amap-jsapi-loader";

defineOptions({ name: 'ChooseMapPoiDialog' })

const message = useMessage() // 消息弹窗
const loading = ref(false)
const title = ref()
const showsearchResult = ref(false)
const thisPosition = ref({
  areaId: "",
  address: "",
  lat: "",
  lng: ""
})
const poiList = ref<[]>([])
const mapAddress = ref()
const visible = ref()
const latitude = ref()
const longitude = ref()
const mapValue = ref()
const autoCompleteComponent = ref()

const map = ref()
const address = ref()
const placeSearchComponent = ref()
const geocoder = ref()

/** 打开弹窗 */
const dialogVisible = ref(false)
const open = (data: any) => {
  dialogVisible.value = true
  window._AMapSecurityConfig = {
    securityJsCode: 'keykeykeykeykeykeykey',
  }

  // const { title, address, name, latitude, longitude } = data
  // if (title && title.trim().length) title.value = title
  if (data.address && data.address.trim().length) {
    //searchKeyWord(address);
    mapAddress.value = data.address
    thisPosition.value = {
      areaId: data.areaId,
      address: data.address,
      lng: data.longitude,
      lat: data.latitude
    }
  }
  if (data.latitude && data.longitude) {
    latitude.value = data.latitude
    longitude.value = data.longitude
  }
  visible.value = true;
  nextTick(() => initMap())

  // activeAppLink.value.path = link

}
defineExpose({ open })


const close = async () => {
  visible.value = false;
}
// 初始化搜索
const mapSearchInit = async () => {
  let autoOptions = {
    input: "tipInput",
  }
  let autoCompleteComponent = new AMap.Autocomplete(autoOptions);
  autoCompleteComponent.value = autoCompleteComponent;
  // 注册placeSearch组件
  placeSearchComponent.value = new AMap.PlaceSearch();
  if (mapAddress.value) {
    searchKeyWord(mapAddress.value)
  }
}

const searchInputKeyword = async () => {
  searchKeyWord(mapAddress.value);
}

// 根据输入内容查询
const searchKeyWord = async (query) => {
  placeSearchComponent.value.search(query, function (status, result) {
    if (status === 'complete' && result.info === "OK") {
      showsearchResult.value = true
      poiList.value = result.poiList.pois;
    } else {
      showsearchResult.value = false
      poiList.value = []
      message.error("没有查到结果")
    }
  })

}

const mapValueChange = async () => {
  let items = poiList.value.find((item) => {
    return item["id"] == mapValue.value
  })
  if (items) { markerResult(items) }
}

const mapValueChangeNew = async (id) => {
  let items = poiList.value.find((item) => {
    return item["id"] == id
  });
  if (items)
    markerResult(items)
}

//选择搜索的内容
const markerResult = async (data) => {
  console.log("data", data)
  showsearchResult.value = false;
  address.value = data.name;
  var marker = new AMap.Marker({
    position: [Number(data.location.lng), Number(data.location.lat)],
  })
  map.value.clearMap() // 清除所有覆盖物（点标志）
  console.log("marker", marker)
  map.value.add(marker) // 添加点标志
  showInfoWindow(marker);
  setTimeout(() => {
    map.value.setCenter(data.location);
    map.value.setZoom(18);
  }, 50)
  let lnglat = [data.location.lng, data.location.lat]
  geocoder.value.getAddress(lnglat, function (status, result) {
    if (status === 'complete' && result.regeocode) {
      address.value = result.regeocode.formattedAddress;

      // adcode.value = result.regeocode.addressComponent.adcode; // 区域ID

      showInfoWindow(marker); //自定义信息窗体
      thisPosition.value = {
        areaId: parseInt(result.regeocode.addressComponent.adcode),
        address: data.address + data.name,
        lng: data.location.lng,
        lat: data.location.lat
      };
      //that.$emit("select", that.thisPosition) //返回给父组件
    } else {
      message.error('根据经纬度查询地址失败')
    }
  })
}

const initMap = () => {
  AMapLoader.load({
    // key: "keykeykeykeykeykeykey", // 申请好的Web端开发者Key，首次调用 load 时必填
    key: "keykeykeykeykeykeykey",
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.Geolocation',
      'AMap.PlaceSearch',
      'AMap.AutoComplete',
      'AMap.Geocoder',
      'AMap.CitySearch',
      'AMap.DistrictSearch'
    ],
    resizeEnable: true,
  }).then((AMap) => {
    const initParams = {
      viewMode: "3D", //是否为3D地图模式
      zoom: 18, //初始化地图级别
    };
    if (longitude.value && latitude.value) {
      initParams.center = [longitude.value, latitude.value]
    }
    console.log("initParams", initParams)
    map.value = new AMap.Map("container", initParams);
    geocoder.value = new AMap.Geocoder()
    map.value.addControl(new AMap.Scale()) // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
    map.value.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件，在地图右下角显示地图的缩略图

    handleClick(AMap) //地图选点
    mapSearchInit();
    if (longitude.value && latitude.value) {
      let marker = new AMap.Marker({
        position: new AMap.LngLat(longitude.value, latitude.value)
      })
      map.value.clearMap() // 清除所有覆盖物（点标志）
      map.value.add(marker) // 添加点标志
    }

  }).catch(e => {
    console.log(e);
  })
}

//点击地图获取地理位置
const handleClick = async () => {
  map.value.on('click', (e) => {
    console.log("e", e)

    let lng = e.lnglat.lng
    let lat = e.lnglat.lat
    let marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat)
    })
    map.value.clearMap() // 清除所有覆盖物（点标志）
    map.value.add(marker) // 添加点标志
    let lnglat = [lng, lat]
    geocoder.value.getAddress(lnglat, function (status, result) {
      if (status === 'complete' && result.regeocode) {
        address.value = result.regeocode.formattedAddress;

        // adcode.value = result.regeocode.addressComponent.adcode; // 区域ID

        showInfoWindow(marker); //自定义信息窗体
        thisPosition.value = {
          areaId: parseInt(result.regeocode.addressComponent.adcode),
          address: address.value,
          lng: lng,
          lat: lat
        };
        //that.$emit("select", that.thisPosition) //返回给父组件
      } else {
        message.error('根据经纬度查询地址失败')
      }
    })

    // 获取点击位置的区域ID
    // const districtSearch = new AMap.DistrictSearch({
    //   level: "district",
    // });

    // districtSearch.search("中国", (status, result) => {
    //   if (status === "complete") {
    //     for (let i = 0; i < result.districtList[0].districtList.length; i++) {
    //       const polygon = new AMap.Polygon({
    //         path: result.districtList[0].districtList[i].boundaries,
    //         strokeWeight: 2,
    //         strokeColor: "#ff33ff",
    //         fillColor: "#f5deb3",
    //         fillOpacity: 0.35,
    //       });

    //       polygon.setMap(map);

    //       // if (polygon.contains(e.lnglat)) {
    //         console.log("点击的区域ID:", result.districtList[0].districtList[i].adcode);
    //       //   break;
    //       // }
    //     }
    //   } else {
    //     console.error("获取区域信息失败");
    //   }
    // });
  })
}
//新增标记
const showLocation = async (data) => {
  let marker = new AMap.Marker({
    position: new AMap.LngLat(data[0], data[1]) //参数为经纬度
  })
  map.value.clearMap() // 清除所有覆盖物（点标志）
  map.value.add(marker) // 添加点标志
  showInfoWindow(marker); //自定义信息窗体
}

//自定义信息窗体
const showInfoWindow = async (marker) => {
  let infoWindow = new AMap.InfoWindow({
    isCustom: true, //是否自定义信息窗体
    content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address.value}</div>`,
    closeWhenClickMap: true,
    zIndex: 999,
    offset: new AMap.Pixel(16, -35)
  });
  infoWindow.open(map.value, marker.getPosition())
}

const emit = defineEmits<{
  (e: 'confirm')
}>()
const onSelectAddress = () => {
  if (!thisPosition.value.address) {
    message.error('先选择经纬度')
    return;
  }

  emit('confirm', thisPosition.value)
  dialogVisible.value = false
}


/** 初始化 **/
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.searchResModel {
  height: 500px;
  overflow-y: scroll;
}

.searchResItem {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.searchResItem .poiName {
  font-size: 14px;
  font-weight: bolder;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.searchResItem .poiAddress {
  font-size: 12px;
  color: #8c8c8c;
  padding: 0;
  margin-top: 4px;
  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.mapModel {
  height: 500px;
}

.map_search_result {
  position: absolute;
  top: 80px;
  left: 40px;
  background-color: rgba(255, 255, 255, .9);
  z-index: 1000;
}

.map_search_result ul li {}

.input-card {
  bottom: 40px;
}

.input-item {
  height: auto;
}

.map {
  height: 100%;
}
</style>

vue2:

<template>
<el-dialog v-model="visible" align-center :append-to-body="false" :modal-append-to-body="false" draggable :title="title" width="1200px" @close="close">
    <div class="dialogModel">
        <div class="flex-x-left" style="margin-top: -10px;margin-bottom: 10px;">
            <div style="width: 240px;">
                <el-input v-model="mapAddress" placeholder="请输入内容"></el-input>
            </div>
            <div style="flex:1;margin-left: 10px;">
                <com-button icon="Search" type="primary"  @click="searchInputKeyword">查询</com-button>
            </div>
        </div>
        <div class="flex-x-left" style="margin-bottom: 10px;">
            <div style="width: 240px;">
                <div class="searchResModel">
                    <div class="searchResItem" @click="mapValueChangeNew(item.id)" v-for="(item, index) in poiList">
                        <p class="poiName">{{item.name}}</p>
                        <p class="poiAddress">{{item.address}}</p>
                    </div>
                </div>
            </div>
            <div style="flex:1;padding-left: 10px;box-sizing:border-box; width: calc(100% - 250px);">
                <div class="mapModel">
                    <div id="container" class="map" style="height:500px"></div>
                </div>
            </div>
        </div>
    </div>

    <template #footer>
        <el-button type="default" @click="close">关闭</el-button>
        <el-button type="primary" @click="onSelectAddress">确定</el-button>
    </template>
</el-dialog>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: 'keykeykeykeykeykeykeykeykey',
}
export default {
    name: "ChooseMapPoi",
    data: function () {
        return {
            loading: false,
            showsearchResult: false,
            thisPosition: {
                address: "",
                lat: "",
                lng: ""
            },
            poiList: [],
            mapAddress: "",
            mapValue: "",
            visible: false,
            title: '选择坐标',
            latitude: 0,
            longitude: 0
        };
    },
    computed: {
        saveText: function () {
            return this.saveLoading ? "保存中..." : "保存";
        },
    },
    methods: {
        // options: {address}
        show(options) {
            const {
                title,
                address,
                name,
                latitude,
                longitude
            } = options;

            if (title && title.trim().length) this.title = title;
            if (address && address.trim().length) {
                //this.searchKeyWord(address);
                this.mapAddress = address;
                this.thisPosition = {
                    address: address,
                    lng: longitude,
                    lat: latitude
                };
            }
            if(latitude && longitude){
                this.latitude = latitude;
                this.longitude = longitude;
            }
            this.visible = true;
            this.$nextTick(() => {
                this.initMap();
            })

        },
        close() {
            this.visible = false;
        },

        /** 初始化搜索 */
        mapSearchInit() {
            let autoOptions = {
                input: "tipInput",
            }
            let autoCompleteComponent = new AMap.Autocomplete(autoOptions);
            this.autoCompleteComponent = autoCompleteComponent;
            // 注册placeSearch组件
            this.placeSearchComponent = new AMap.PlaceSearch();
            // console.log('this.mapAddress2', this.mapAddress);
            if (this.mapAddress != '') {
                this.searchKeyWord(this.mapAddress);
            }
        },
        searchInputKeyword() {
            this.searchKeyWord(this.mapAddress);
        },
        //根据输入内容查询
        searchKeyWord(query) {
            let that = this
            that.placeSearchComponent.search(query, function (status, result) {
                // console.log('result:',result);
                if (status === 'complete' && result.info === "OK") {
                    that.showsearchResult = true
                    that.poiList = result.poiList.pois;
                } else {
                    that.showsearchResult = false
                    that.poiList = []
                    that.$message({
                        message: "没有查到结果",
                        type: "warning",
                    });
                }
            })
        },
        mapValueChange() {
            let that = this;
            let items = this.poiList.find((item) => {
                return item["id"] == that.mapValue
            });
            if (items)
                this.markerResult(items);
        },
        mapValueChangeNew(id) {
            let that = this;
            let items = this.poiList.find((item) => {
                return item["id"] == id
            });
            if (items)
                this.markerResult(items);
        },
        //选择搜索的内容
        markerResult(data) {
            this.showsearchResult = false;
            this.address = data.name;
            var marker = new AMap.Marker({
                position: [Number(data.location.lng), Number(data.location.lat)],
            });
            this.map.clearMap() // 清除所有覆盖物（点标志）
            this.map.add(marker) // 添加点标志
            this.showInfoWindow(marker);
            setTimeout(() => {
                this.map.setCenter(data.location);
                this.map.setZoom(18);
            }, 50)
            this.thisPosition = {
                address: data.address + data.name,
                lng: data.location.lng,
                lat: data.location.lat
            };
        },
        onSelectAddress() {
            if (!this.thisPosition.address) {
                this.$message.error('先选择经纬度');
                return;
            }
            this.$emit("selectPoi",this.thisPosition)
            this.close();
        },
        initMap() {
            AMapLoader.load({
                // key: "keykeykeykeykeykeykey", // 申请好的Web端开发者Key，首次调用 load 时必填
                key: "keykeykeykeykeykeykey",
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [
                    'AMap.ToolBar',
                    'AMap.Scale',
                    'AMap.Geolocation',
                    'AMap.PlaceSearch',
                    'AMap.AutoComplete',
                    'AMap.Geocoder',
                    'AMap.CitySearch'
                ],
                resizeEnable: true,
            }).then((AMap) => {
                const that = this;
                const initParams = {
                    viewMode: "3D", //是否为3D地图模式
                    zoom: 18, //初始化地图级别
                };
                if(this.longitude && this.latitude){
                    initParams.center = [this.longitude,this.latitude]
                }
                that.map = new AMap.Map("container", initParams);
                that.geocoder = new AMap.Geocoder()
                that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件，在地图右下角显示地图的缩略图
                that.handleClick(AMap) //地图选点
                that.mapSearchInit();
                if(this.longitude && this.latitude){
                    let marker = new AMap.Marker({
                        position: new AMap.LngLat(this.longitude, this.latitude)
                    })
                    this.map.clearMap() // 清除所有覆盖物（点标志）
                    this.map.add(marker) // 添加点标志
                }

            }).catch(e => {
                console.log(e);
            })
        },
        //点击地图获取地理位置
        handleClick() {
            this.map.on('click', (e) => {
                let lng = e.lnglat.lng
                let lat = e.lnglat.lat
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(lng, lat)
                })
                this.map.clearMap() // 清除所有覆盖物（点标志）
                this.map.add(marker) // 添加点标志
                let lnglat = [lng, lat]
                let that = this
                that.geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        that.address = result.regeocode.formattedAddress;
                        that.showInfoWindow(marker); //自定义信息窗体
                        that.thisPosition = {
                            address: that.address,
                            lng: lng,
                            lat: lat
                        };
                        //that.$emit("select", that.thisPosition) //返回给父组件
                    } else {
                        that.$message.error('根据经纬度查询地址失败')
                    }
                })
            })
        },
        //新增标记
        showLocation(data) {
            let marker = new AMap.Marker({
                position: new AMap.LngLat(data[0], data[1]) //参数为经纬度
            })
            this.map.clearMap() // 清除所有覆盖物（点标志）
            this.map.add(marker) // 添加点标志
            this.showInfoWindow(marker); //自定义信息窗体
        },
        //自定义信息窗体
        showInfoWindow(marker) {
            let infoWindow = new AMap.InfoWindow({
                isCustom: true, //是否自定义信息窗体
                content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.address}</div>`,
                closeWhenClickMap: true,
                zIndex: 999,
                offset: new AMap.Pixel(16, -35)
            });
            infoWindow.open(this.map, marker.getPosition());
        },

    },

    // mounted(){
    //     const recaptchaScript = document.createElement("script");
    //     recaptchaScript.setAttribute(
    //     "src",
    //     "https://webapi.amap.com/loader.js"
    //     );
    //     document.head.appendChild(recaptchaScript);
    // }
};
</script>

<style lang="scss">


.searchResModel {
    height: 500px;
    overflow-y: scroll;
}

.searchResItem {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.searchResItem .poiName {
    font-size: 14px;
    font-weight: bolder;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.searchResItem .poiAddress {
    font-size: 12px;
    color: #8c8c8c;
    padding: 0;
    margin-top: 4px;
    margin-bottom: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.mapModel {
    height: 500px;
}

.map_search_result {
    position: absolute;
    top: 80px;
    left: 40px;
    background-color: rgba(255, 255, 255, .9);
    z-index: 1000;
}

.map_search_result ul li {}

.input-card {
    bottom: 40px;
}

.input-item {
    height: auto;
}

.map {
    height: 100%;
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我就不思
关注
专栏目录
vue使用高德地图获取地理坐标信息
06-11
以下将详细介绍如何在Vue项目中使用高德地图API获取地理坐标信息。 首先，确保你已经安装了Vue.js框架并创建了一个新的Vue项目。如果还没有，可以使用Vue CLI或者手动创建一个基本的Vue应用结构。 1. **引入高德...
vue使用高德地图点击下钻上浮效果的实现思路
10-16
首先，要了解Vue框架的基本使用和高德地图API的调用方式，理解它们如何结合来实现地图功能。Vue是一个用于构建用户界面的渐进式框架，而高德地图API则提供了地图的展示和交互功能。 在实现点击下钻效果时，可以通过...
vue 使用高德地图 api
sinat_29740819的博客
12-11 743
在 vue 中使用高德地图 api，并对其进行封装
Vue使用高德地图
m0_66288747的博客
04-07 670
map.value = new AMap.Map("containerGd",{ //设置地图容器id。// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等。position: current_position.value, // 标记点的位置。// position: e.lnglat, // 点击位置的经纬度。map: map.value, // 要添加标记点的地图对象。// // 创建一个标记点。// 监听地图的点击事件。
vue使用高德地图服务
ghthuhl的博客
07-24 215
vue使用高德地图服务API
【高德地图】vue使用高德地图（js api）
m0_70950838的博客
07-16 2531
vue中使用高德JSapi，添加点标记以及其他覆盖物，高德JSapi的常用操作
vue + 高德地图
何时林听@
04-07 777
vue使用高德地图示例
vue 使用高德地图
帥潔的博客
07-15 521
1、修改webpac.base.conf.js文件 添加： externals: { 'AMap': 'AMap' } 2、在index.html引入sdk 引入有两种方式： （1）页面直接引入（一般用这个） <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> （2）异步加载 <script src="http://w
vue使用高德地图过程
pz
02-19 1182
高德地图API官方文档 http://lbs.amap.com/api/javascript-api/guide/abc/prepare 配置项 1、引入高德JS API 脚本 &amp;amp;amp;amp;lt;script type=&amp;amp;amp;quot;text/javascript&amp;amp;amp;quot; src=&amp;amp;amp;quot;https://webapi.amap.com/maps?v=1.4.6&am
vue使用高德地图轨迹活动效果demo(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-16 861
vue使用高德地图轨迹活动效果demo
在Vue中使用高德地图
热门推荐
zhanghuaiwei
08-01 3万+
web端使用高德地图，实现多图形绘制和清除；获取经纬度；关键词搜索定位等
vue 使用高德地图vue-amap组件过程解析
10-16
在本文中，我们将深入探讨如何在Vue项目中集成并使用高德地图的`vue-amap`组件。`vue-amap`是一个专为Vue.js设计的高德地图插件，它使得在Vue应用中添加地图功能变得简单易行。首先，我们需要安装这个组件，通过运行...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 852
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1206
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 916
自定义指令
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 345
Vue根实例、实例总结
Vue.js组件开发教程
q903249871的博客
09-29 1260
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 576
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值