高德地图选择多个marker点

proud1212

于 2024-08-09 18:16:47 发布

阅读量234

点赞数 3

文章标签： swift vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_44309299/article/details/141068671

版权

<template>
    <div class="container-multimap">
        <div class="searchBox">
            <el-input v-model="searchQuery" @keyup.enter="searchPlace" border placeholder="搜索地点" />
            <el-button @click="searchPlace" type="success">搜索</el-button>
            <el-button @click="clearMarkers" type="success">清空</el-button>
        </div>
        <div id="mapContainer" style="width: 100%; height:55vh;"></div>
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
import { getRandomAvatar } from "@/api/robot/manage.js"
export default {
    name: 'Map',
    props: {
        markersArray: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            map: null,
            markers: [], // 存储所有的标记点
            searchQuery: '',// 搜索查询
            placeSearch: null
        };
    },
    mounted() {
        this.initMap();
    },
    watch: {},
    methods: {
        initMap() {
            AMapLoader.load({
                key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["