Vue2+JS项目升级为Vue3+TS之jquery的maphilight引入项目（附使用）

        本人由于想提升自己的项目开发能力，所以将就项目的vue2+JavaScript+webpack的旧技术栈升级为vue3+typescript+vite的技术栈，所以遇到很多坑，以下是maphilight的解决方法。

        众所周知jquery是基于JavaScript进行开发，但是已有typescript版本，所以直接引入即可用jQuery包里的方法，但是！jQuery包里不自带maphilight版本，而且！maphilight没有typescript版本，只有JavaScript版本，不仅要手动引入而且要想办法在typescript的项目中使用。

所以如果只单纯的引入maphighlight的包，就会让$可以使用，但是maphilight会被识别为不是个方法，搜索了一堆网上解决办法，并把GPT干熄火了都没解决，故通过github社区进行解决。

在typescript用JavaScript引入的包，简单粗暴，直接在index.html引入js文件即可全局使用，但是typescript会报类型问题，怎么解决呢，通过全局申明即可解决，故完成！

    <script src="/node_modules/jquery/dist/jquery.min.js"></script><script src="/node_modules/jquery/dist/jquery.maphilight.js"></script>declare const $: any;
declare const maphilight: any;

以下为使用教程

定义热区区域 

    <img src="@/assets/TSG4106AImage/experimentFirst.png" ref="mapAll" id="mapAll" usemap="#image-map"><map name="image-map"><area v-for="(area, index) in allHotspots" :key="index" :id="area.id.toString()" :title="area.title" :coords="area.coords" :shape="area.shape" @click="handleClick(area)" :class="{ 'disabled': !area.clickable }"></map>

 定义热区数组

interface Hotspot {id: number;title: string;coords: string;shape: 'circle' | 'rect';clickable: boolean;
}const allHotspots = ref<Hotspot[]>([{ id: 1, title: 'ONOFF', coords: '141,129,29', shape: 'circle', clickable: false },{ id: 2, title: 'Freq', coords: '1078,113,25', shape: 'circle', clickable: false },{ id: 3, title: '0', coords: '859,490,18', shape: 'circle', clickable: false },{ id: 4, title: '1', coords: '859,427,19', shape: 'circle', clickable: false },{ id: 5, title: '2', coords: '929,428,19', shape: 'circle', clickable: false },{ id: 6, title: '3', coords: '998,426,19', shape: 'circle', clickable: false },{ id: 7, title: '4', coords: '859,365,18', shape: 'circle', clickable: false },{ id: 8, title: '5', coords: '929,364,18', shape: 'circle', clickable: false },{ id: 9, title: '6', coords: '998,364,21', shape: 'circle', clickable: false },{ id: 10, title: '7', coords: '858,301,18', shape: 'circle', clickable: false },{ id: 11, title: '8', coords: '928,302,18', shape: 'circle', clickable: false },{ id: 12, title: '9', coords: '1000,303,18', shape: 'circle', clickable: false },{ id: 13, title: '.', coords: '930,490,18', shape: 'circle', clickable: false },{ id: 14, title: '-', coords: '999,490,18', shape: 'circle', clickable: false },{ id: 15, title: 'Mμ', coords: '1079,366,24', shape: 'circle', clickable: false },{ id: 16, title: 'Gn', coords: '1078,303,24', shape: 'circle', clickable: false },{ id: 17, title: 'km', coords: '1079,427,23', shape: 'circle', clickable: false },{ id: 18, title: 'Ampt', coords: '1079,175,24', shape: 'circle', clickable: false },{ id: 19, title: 'ModONOFF', coords: '998,237,25', shape: 'circle', clickable: false },{ id: 20, title: 'RFONOFF', coords: '140,211,28', shape: 'circle', clickable: false },{ id: 21, title: 'Enter', coords: '1079,490,22', shape: 'circle', clickable: false },{ id: 22, title: 'RFON', coords: '246,112,297,140', shape: 'rect', clickable: false },{ id: 23, title: 'MODON', coords: '300,115,352,139', shape: 'rect', clickable: false },{ id: 24, title: 'left', coords: '858,236,19', shape: 'circle', clickable: false },{ id: 25, title: 'right', coords: '929,236,18', shape: 'circle', clickable: false },{ id: 26, title: 'Bottom1', coords: '288,494,22', shape: 'circle', clickable: false },{ id: 27, title: 'Bottom2', coords: '380,497,22', shape: 'circle', clickable: false },{ id: 28, title: 'Bottom3', coords: '471,496,21', shape: 'circle', clickable: false },{ id: 29, title: 'Bottom4', coords: '562,497,20', shape: 'circle', clickable: false },{ id: 30, title: 'Bottom5', coords: '652,497,20', shape: 'circle', clickable: false },{ id: 31, title: 'Bottom6', coords: '743,496,20', shape: 'circle', clickable: false },{ id: 32, title: 'Mod', coords: '1079,237,23', shape: 'circle', clickable: false }
]);

特效方法 

const handleHighlight = (id:number) => {const escapedId = id;const $element = $(`#${escapedId}`);const data = $element.mouseout().data('maphilight') || {};data.alwaysOn = true;data.fillColor = "feeeed";$element.data('maphilight', data).trigger('alwaysOn.maphilight');setTimeout(() => {const data = $element.mouseout().data('maphilight') || {};data.fillColor = "ff0000";data.alwaysOn = false;$element.data('maphilight', data).trigger('alwaysOn.maphilight');}, 300);
}

开启特效 

onMounted(() => {initHighCharts();$(function() {$('#mapAll').maphilight({fillColor: 'ff0000',strokeColor: "FFFFFF",strokeWidth: 3,fillOpacity: 0.6,});});});