CSS实现地图（一）

实现效果

实现思路

• 用地图图片作为底图
• 点击坐标之后高亮该区域，高亮区域也用图片定位实现
• 坐标和高亮图片都以地图为基准定位
  注意：坐标和高亮图片都放在地图的div里面，而该DIV由地图撑开宽高，这样该div的宽高就是地图的宽高了，所有定位元素的left和top都是相对于地图了，这样就不会因为地图变大变小而使定位元素定位不准确

结构代码

• 这里Group.png是你的地图图片
• point_arr存放坐标元素
• cur_p是你当前点击的坐标（省份）
• 所有的light-img都是高亮图片

<div class="img-box">
    <div class="map-div">
        <img src="../assets/cindex/Group.png" class="map">
        <div v-for="(p, idx) in point_arr" :key="idx" class="point" :style="p.style" @click="color_change(p, idx, 3)">
            <span class="p-span l-mid">{{p.name}}</span>
            <img src="../assets/cindex/Subtract.png" class="p-img l-mid">
            <!-- 坐标变色 start -->
            <!-- <span :class="p.yellow?'p_span_y l-mid':'p-span l-mid'">{{p.name}}</span> -->
            <!-- <img v-if="p.yellow" src="../assets/cindex/Subtract_y.png" class="p-img l-mid"> -->
            <!-- <img v-if="!p.yellow" src="../assets/cindex/Subtract.png" class="p-img l-mid"> -->
            <!-- 坐标变色 end -->
        </div>
        <img v-show="cur_p==='四川省'" src="../assets/cindex/cd.png" style="left: 39%;top: 59.9%;width: 18.2%;" class="light-img">
        <img v-show="cur_p==='湖南省'" src="../assets/cindex/cs.png" style="left: 57.6%;top: 70.9%;width: 9%;" class="light-img">
        <img v-show="cur_p==='湖北省'" src="../assets/cindex/wh.png" style="left: 56.88%;top: 62.7%;width: 12.7%;" class="light-img">
        <img v-show="cur_p==='浙江省'" src="../assets/cindex/zj.png" style="left: 72.6%;top: 67.8%;width: 7.5%;" class="light-img">
        <img v-show="cur_p==='北京市'" src="../assets/cindex/bj.png" style="left: 68.5%;top: 41%;width: 3.4%;" class="light-img">
        <img v-show="cur_p==='辽宁省'" src="../assets/cindex/sy.png" style="left: 74.04%;top: 33.8%;width: 11.5%;" class="light-img">
        <img v-show="cur_p==='陕西省'" src="../assets/cindex/xa.png" style="left: 52.1%;top: 45.14%;width: 9.55%;" class="light-img">
        <img v-show="cur_p==='江苏省'" src="../assets/cindex/nj.png" style="left: 69.86%;top: 57.66%;width: 9.42%;" class="light-img">
        <img v-show="cur_p==='广东省'" src="../assets/cindex/sz.png" style="left: 58.86%;top: 82.4%;width: 12.5%;" class="light-img">
    </div>
</div>

数据代码

• yellow来标识某个坐标是否被选中
• m_name这里不用管，原本name代表省会，m_name代表省，现在都改为省了

export const point_arr = [
    {
    name: '北京市',
    style: 'left: 67.6%; top: 39%;',
    yellow: false,
    id: -1,
    m_name: '北京市'
}, {
    name: '辽宁省',
    style: 'left: 79%; top: 37%;',
    yellow: false,
    id: -1,
    m_name: '辽宁省'
}, {
    name: '陕西省',
    style: 'left: 55%; top: 56%;',
    yellow: false,
    id: -1,
    m_name: '陕西省'
}, 
{
    name: '四川省',
    style: 'left: 45%; top: 66%;',
    yellow: false,
    id: 17,
    m_name: '四川省'
}, {
    name: '湖南省',
    style: 'left: 60%; top: 73%;',
    yellow: false,
    id: 15,
    m_name: '湖南省'
}, {
    name: '湖北省',
    style: 'left: 62%; top: 64%;',
    yellow: false,
    id: 14,
    m_name: '湖北省'
}, {
    name: '江苏省',
    style: 'left: 73.5%; top: 60%;',
    yellow: false,
    id: 7,
    m_name: '江苏省'
}, {
    name: '浙江省',
    style: 'left: 73.6%; top: 69.6%;',
    yellow: false,
    id: 8,
    m_name: '浙江省'
}, {
    name: '广东省',
    style: 'left: 62%; top: 83%;',
    yellow: false,
    id: 1,
    m_name: '广东省'
}]

逻辑代码

• color_change为点击某个坐标的方法，点击之后标记yellow
• 将cur_p设置为当前被点击的坐标的name，让其高亮图片显示
• 这里也可以按需增加自己相应的业务逻辑代码

// 坐标点
color_change(p, idx, type) {
    if(!p.yellow&&type===1) {
        setTimeout(()=>{
            this.point_arr[idx].yellow = true
        })
    }else if(p.yellow&&type===2) {
        setTimeout(()=>{
            this.point_arr[idx].yellow = false
        })
    } else if(type===3) { // 点击省市
        this.point_arr.forEach(p => {
            p.yellow = false
        })
        this.point_arr[idx].yellow = true
        this.cur_p = p.name
},

样式代码

• l-mid：水平居中
• img-box：大容器
• map-div：地图容器，width90%，高度由地图图片撑开，在大地图中水平居中垂直居中
• map ：地图图片，宽度为地图容器的宽度，仅设置宽度的话高度就会按照原图比例自动计算

.l-mid {
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}
.img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.map-div {
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    .point {
        cursor: pointer;
        position: absolute;
        z-index: 3;
    }
    .p-span {
        display: block;
        font-size: 12px;
        line-height: 17px;
        letter-spacing: 1px;
        color: #FFFFFF;
    }
    .p_span_y {
        display: block;
        font-size: 12px;
        line-height: 17px;
        letter-spacing: 1px;
        font-weight: 600;
        color: #FFC700;
    }
    .p-img {
        display: block;
        width: 10px;
        height: 13.64px;
    }
}
.map {
    width: 100%;
}
.light-img {
    position: absolute;
    width: 17%;
    z-index: 2;
}