通过css3对百度地图maker动态扩展

html-css09

通过css3对百度地图maker动态扩展,第1张

以前使用过百度地图,有一些需要对某些特定标记物进行高亮和醒目标记,因此采用css3对百度地图的marker组件进行动态效果调试,以下是简单记录。

效果如下:

效果如下:

效果如下:

1、拨打电话其实就是一些只有手机支持的标签,

<a href="tel:电话号码">点击通话</a>

2、邮件是:

<a class="c" href="mailto:邮件地址">发送邮件</a>

3、地图就是与正常浏览器看的地图是一样的,真的是一样的。

这些都是HTML5新的标签新的支持。

推荐读一本比较新的关于html5、css3的书,会比较详细的了解。

我读了《响应式web设计 html5和css3实战》,有不少收获,但需要有一定html与css基础才更适合阅读。

css3可以做到兼容ie9和市面上的多数非IE内核浏览器,它的

 background-size可以设置2个值,1个为必填,1个为可选。

其中第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。

div{

background-image:url(test.png)

background-repeat:no-repeat

background-size:100px

}

cover表示覆盖整个容器。你要背景全部那么需要注意的是html,body {height:100%}

当然以上内容不兼容低版本IE浏览器和不兼容css3规则的浏览器。

你说的背景整张显示,我之前项目遇到过这样的需求。我是直接用脚本写的。

实现思路是用图片绝对定位在网站最底层,z-index属性设置成负值。用脚本判断窗口大小,在每次窗口大小发生改变时监听事件捕获长宽,赋值给这张“地图”。