uni-app原生map热区与map地图冲突如何解决

今天我们来说一说在<map></map>热区链接。那什么是热区链接呢？实际上热区链接就是在一张图片上某些区域是可点击的，通常会用在区域地图，或者给图片某些区域加上提示以及点击某个区域进行跳转。图像热区链接在普通的html中是可行的，但是在uni-app中使用map标签就会直接出现地图，如下图所示：

很可惜，这并不是我想要的，那么这是为什么呢？看了uni-app的官网发现，<map></map>标签在uni-app中是其封装的一个地图组件，因为原生的map标签和uni-app的map地图组件标签的名称冲突了，所以在uni-app里面识别map标签就只能按照封装好的组件识别为了地图。那么问题来了，有没有什么办法来解决呢？经过资料的查找（各种百度），终于让我找到了解决的方法，下面来说一说我是如何解决的。

第一步，安装Dreamweaver来画出图像的热点区域，用来获取图像区域的坐标点。（Dreamweaver(Dw) 2020安装教程）首先Ctrl+N新建一个html文件，然后Ctrl+Alt+I插入一张图片，最后就是使用软件的“属性”来画出区域（可能刚使用软件找不到“属性”，可使用快捷键Ctrl+F3显示）。画图的话要先点击图片后才可以，然后根据实际情况选择使用的热点工具是圆形、矩形、还是多边形。

第二步，就可以开始画图了。（如下图显示）其中area标签就是我们需要的。

第三步，最终代码和效果。

<template id="first">
	<view class="content">
        <!-- 注意，这里使用img标签，不要使用image标签，否者没有效果 -->
		<img class="logo" src="/static/logo.png" border="0" usemap="#logomap"></img>
		<!-- <map name="logomap" id="logomap">
			<area shape="poly" coords="66,49,48,49,46,156,152,157,152,50,132,51,132,138,67,137" href="#">
		</map> -->
		<mapelement></mapelement>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	components: {
		mapelement: {
			render:(createElement) => {
				var pElem1 = createElement('area', {
					attrs: {
						//区域的形状（default、rect、circ、poly）
						shape: 'poly',
						//定义可点击区域（对鼠标敏感的区域）的坐标
						coords:'68,49,46,49,46,158,153,159,153,49,132,49,132,138,67,138',
						href: '#'
					},
					on: {
						click:() => {
							uni.showToast({
								icon:'none',
								title:'Hello'
							})
						}
					}
				});
				return createElement(
					'map',
					{
						attrs: {
							name: 'logomap',
							id: 'logomap'
						}
					},
					[
						pElem1 //想要添加更多area,可在数组中继续添加。如[pElem1,pElem2,…]
					]
				);
			}
		}
	},
	methods: {}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 400rpx;
	width: 400rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}
</style>

好了，今天我们就到这里，see you......