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

灰太狼 2022-12-28 01:58 210阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70][]

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

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

![20201214111709680.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 2][]

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

<template id="first">
    	<view class="content">
            
    		<img class="logo" src="/static/logo.png" border="0" usemap="#logomap"></img>
    		
    		<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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 3][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70]: /images/20221120/5c9327b1590043ec88a3db25d980bd00.png
[Link 1]: https://uniapp.dcloud.io/component/map
[Dreamweaver_Dw_ 2020]: https://mp.weixin.qq.com/s/MzS09Fk7sZiTpcJ7hHKsjw
[20201214111709680.png]: https://img-blog.csdnimg.cn/20201214111709680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201214111853425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201214112324453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201214120615322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu,size_16,color_FFFFFF,t_70