vue使用高德地图点标记及复杂操作

最新推荐文章于 2024-09-02 14:32:24 发布

少年你好，我是π。。。

最新推荐文章于 2024-09-02 14:32:24 发布

阅读量3k

点赞数 1

分类专栏：互联网，移动开发文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43528934/article/details/104276867

版权

不知道怎么引用的可以在看下 https://blog.csdn.net/xy19950125/article/details/83213220

上面呢只是简单的一个点标记并没有涉及到复杂的操作而今天要介绍的这个可以动态切换动态打点标记以及其他操作

先看看原型图张什么样

需求1：标记打点

   2：点击图标显示详情

   3：点击右下角 是进行筛选 

   4：点击机构名称  弹出详情（这里没有写 因为也是封装的组件 就没有放上去）

在这里插入图片描述
接着给你撸代码

<template>
    <div>
        <h1 style="color:red;text-align:center">高德地图</h1>
        <div id="container">
            <div class="map-color">
                <div class="map-color-list " v-for="(item, index) in list" :key="index">
                    <span v-if="item.type === 'lnhds'"><img src="@/assets/points/lnhds.png" alt=""/></span>
                    <span v-if="item.type === 'rjzljg'"><img src="@/assets/points/rjzljg.png" alt=""/></span>
                    <span v-if="item.type === 'zcd'"><img src="@/assets/points/zcd.png" alt=""/></span>
                    <span v-if="item.type === 'yljg'"><img src="@/assets/points/yljg.png" alt=""/></span>
                    <span v-if="item.type === 'zzzh'"><img src="@/assets/points/zzzh.png" alt=""/></span>
                    <span v-if="item.type === 'zhwl'"><img src="@/assets/points/zhwl.png" alt=""/></span>
                    <span @click="changePoint(item.type)" :class="typeColor === item.type ? 'chooseIt' : ''">{
   {
    item.name }}</span>
                </div>
            </div>    
        </div> 
    </div>
</template>
<script>
import {
    getMapList, getMapLife } from "@/api/map";
import yljg from "@/assets/imgs/yljg.png";
export default {
   
    data(){
   
        return{
   
            form:{
   
                areaCode: "310112009000"
            },
            centerCo:[],
            posArr:[],
            beiArr:[],
            map:'',
            typeColor:'',
            list: [
                {
   
                name: "老年活动室",
                type: "lnhds"
                },
                {
   
                name: "日间照护机构"