html中的map属性--地图例子

最新推荐文章于 2021-10-07 17:00:46 发布
最新推荐文章于 2021-10-07 17:00:46 发布
阅读量344 收藏
点赞数
分类专栏： Web前端 文章标签： map html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3482/article/details/82299209
版权 
<body>

<img src="fj_map.png" border="0" usemap="#planetmap" alt="Planets" height="550" width="550" />

<map name="planetmap" id="planetmap">

<area
	shape="circle"
	coords="330,375,35"
	href ="http://www.w3school.com.cn/tiy/t.asp?f=html_areamap"
	target ="_blank"
	alt="quanz" />

<area
	shape="circle"
	coords="366,305,25"
	href ="http://www.baidu.com/"
	target ="_blank"
	alt="put" />

<area
	shape="circle"
	coords="420,235,54"
	href ="http://www.baidu.com/"
	target ="_blank"
	alt="fuz" />

<area
	shape="circle"
	coords="280,410,23"
	href ="hhttp://www.w3school.com.cn/tiy/t.asp?f=html_areamap"
	target ="_blank"
	alt="xiam" />

<area 
	shape="circle" 
	coords="203,446,57" 
	href ="http://www.qzwb.com" 
	target ="_blank" 
	alt="zhangz" />

<area 
	shape="circle" 
	coords="450,125,59" 
	href ="http://www.baidu.com/" 
	target ="_blank" 
	alt="ningd" />

<area 
	shape="circle" 
	coords="195,240,50" 
	href ="http://www.baidu.com/" 
	target ="_blank" 
	alt="longy" />

<area 
	shape="rect" 
	coords="100,314,200,380" 
	href ="http://www.baidu.com/" 
	target ="_blank" 
	alt="sanm" />

<area 
	shape="polygon" 
	coords="258,215,315,148,225,40,134,110" 
	href ="http://www.baidu.com/" 
	target ="_blank" 
	alt="sanm" />

</map>

</body>
 
iteye_3482
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html map 地图热点
m0_69964155的博客
06-13 701
详细代码介绍:
html<map>使用例子记录
十年树木的博客
06-23 997
最近在工作中遇到html标签的使用： 记录下地图的使用过程： html代码： 然后写在上面鼠标移动、点击等事件；
HTML元素map实例
Sunny
01-28 1119
地图html实现
Helios32的博客
05-06 745
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>个性化地图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-s
html中怎么写地图,html map标签是什么？
weixin_42097369的博客
05-31 598
首先让我们来看一下htmlmap标签是什么：htmlmap标签:定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。定义map：map标签定义map，area标签定义可点击的热点，area属性;shape：定义热点形状，可选参数rect(矩形)、circle(圆形)、poligon(自定义形状)。coords：定义形状路径;当shape=rect时，四个数字依次为：起...
map-api-example
03-13
在描述中同样提到了“map-api-example”，这可能是一个开源项目或者教程，用于展示如何使用特定的地图API来创建地图应用。开发者通常会通过这样的例子学习如何请求地图数据，设置标记，添加自定义图层，以及处理用户...
Web-前端html+css从入门到精通 117. map标签与area标签.zip
05-23
在这个例子中，`<map>`标签的`name`属性是"imageMap"，`<img>`标签通过`usemap="#imageMap"`引用了这个映射。`<area>`标签则定义了图像上不同形状的可点击区域，`shape`属性指定了形状类型（如矩形`rect`、圆形`...
jquery开发的地图热点特效-map标签
04-10
其中，`usemap`属性的值（`#mapName`）与`<map>`的`name`属性匹配，`area`标签则定义了图像中的可点击区域。 2. **`<area>`标签** `area`标签用于定义`<map>`内的可点击区域。它有以下几个关键属性： - `shape`...
reactnative高德地图拖拽定位demo使用webview实现
08-11
1. **初始化地图**：在`map.html`中，使用高德地图API初始化地图，设置中心点、缩放级别等属性。 2. **监听地图事件**：注册地图的`touchstart`、`touchmove`和`touchend`事件，获取触摸事件的坐标，计算出地图的...
HTML map标签
03-19
NULL 博文链接：https://tristan-wang.iteye.com/blog/706629
html图像地图map标签的使用
09-14
map标签定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。这是在所有主流浏览器中都可以兼容的一个标签属性。
html用百度的地图，显示指定坐标点并提示坐标点信息
01-23
html页面调用百度的地图，显示指定坐标点并提示坐标点信息，自己可以在里面将JavaScript里面的代码剪切创建单独的js调用。
Map地图小案例
oudeg的博客
11-30 283
第一次用CSDN写案例，案例呢也是在网上找的，不完整，只有一小部分           body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;} #r-res
前端学习Html5(day3)百度地图案例
weixin_41571938的博客
04-07 116
更多案例可以去官网进行查看 <!DOCTYPE html> <html> <head> <title>普通地图&全景图</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu.com/ap
Map类型实现 —— 选课小案例
爱前端的程序媛的博客
06-26 277
最近呢，知识的输入量比较大，但是呢，依旧是在巩固基础的路上。哈哈哈哈哈哈。大概简单的过了一遍ES5和ES6中新增的数据类型、数组、字符串常用的方法。emmmmm，确实是比较好用。但是，逻辑地实现和代码实现之间是有差距的，今天这个案例，我吧，调试解决问题用了半天，唉，看来还是菜鸟啊，继续加油吧。 案例介绍 +按钮的点击是可以来回切换状态的，在 + — 之间切换。+ 表示添加课程，—表示取消课程。 点击+号，表示选择课程，选中后，选中的课程数和课程会动态渲染在右侧的空白区域。点击过后再次点击时取消选课，渲染数据
html map使用方法,HTML <map> 标签 | 使用方法 入门教程 基础教程
weixin_33402252的博客
06-26 298
HTML 标签实例带有可点击区域的图像映射：width="145" height="126"alt="Planets"usemap="#planetmap">name="planetmap">尝试一下 »浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用 中的 id 或 name 属性...
开源WebGIS开发——Map的事件和可观察属性
yl14774636230的博客
10-07 347
1、Map的事件 change(module:ol/events/Event~BaseEvent) - 通用更改事件。当修订计数器增加时触发。 change:layerGroup（模块：ol/Object.ObjectEvent） change:size（模块：ol/Object.ObjectEvent） change:target（模块：ol/Object.ObjectEvent） change:view（模块：ol/Object.ObjectEvent） click(mod...
java map属性_地图属性－基本
weixin_35965498的博客
02-24 573
旋转地图“旋转角度:”标签控件用来设置当前地图窗口中地图的旋转角度。用户可输入 [-360, 360 ]范围内的任意数值，单位为度，精度到0.1度，正值代表地图沿逆时针方向旋转，负值代表地图沿顺时针方向旋转。当用户输入完角度值后，当前地图会即时按照指定的角度值进行旋转。当前地图进行旋转时，每一次旋转操作都是相对于原始状态的地图进行的，即没有进行任何旋转操作时的地图。旋转的基点为地图在当前地图窗口中...
el-amap-search-box 如何给搜索框赋值，举个例子
最新发布
06-01
el-amap-search-box 是高德地图中的一个搜索框组件，可以用于搜索地点、POI等信息。如果要给 el-amap-search-box 的搜索框赋值，可以通过设置其 v-model 或者 value 属性来实现。例如： ```html <el-amap :amap-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值