一般大多数企业官网都会在自己的网站上放上一个地图框架,来显示自家公司的地理位置,方便客户查询,但是做这种地图框架其它代码技术的程序员才能做,导致很多SEO网站管理人员受技术限制做不出来这种效果。
今天小墨就用一种方法小白制作地图图标显示框架。
一、在网站上的显示方式
在这里,不管是制作地图框架显示,还是JS代码显示,它的功能作用就只是在网页上显示出来而已,那只要在网页显示出来,最简单的方式就是做成一张图片,把图片放到模板代码里面就OK了。
先来看下效果:
二、如何生成这种地图图片
工具:http://api.map.baidu.com/lbsapi/creatmap/
第一步:输入自己所要的地址
第二步:添加自己的标注 (“设置地图”这一个步骤不用管,默认就行了)
第三步:点击获取代码,点击复制全部代码
第四步:将复制好代码放到一个 .html 网页文件中,用浏览器仿问此文件就可以看到自己做好的地图图标了
我们可以发现做出来的地图尺寸大小有问题,没有把网页屏幕铺满。
第五步:a.将第19行的代码里面 style="width:697px;height:550px;border:#ccc solid 1px;" 样式删除掉
b.在第12行后面添加一段代码: #dituContent {width: 100%;min-height: 100%;overflow: hidden; margin: 0; position: absolute;}
OK,这样地图的显示就铺满屏了,地图就生成制作完成。
三、将做好的地图用PS制作成图片
把网页全屏地图截图,然后用PS工具制好要自己要的图片尺寸格式就好了,用这种小白方法做网页地图,以后不管网站如何改版,或换公司地址,都能简单快速的做一个新地图显示图片出来。
|