零基础学做网站培训介绍

当前位置:

企业网站上添加位置地图的方法

现在很多企业网站上都有位置地图功能,方便用户查看公司的位置。让企业网站更有信任感。效果如下图:

如何在网站中插入位置地图

网站上添加位置地图功能,一般是使用百度地图API来做的。下面学做网站论坛介绍一下企业网站上添加位置地图的具体方法。

方法/步骤

第一步:引入百度地图API,将下面的JS代码保存到一个JS文件为map.js;


(function(){window.BMAP_PROTOCOL = "https"; window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=B6825983426aaadd0ba7c423b1a7f1ec&services=&t=20191111160328"></script>');})();

第二步:将以下的JS代码放在网页的最底部,用于引入百度地图;


<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/admin/js/map.js">
</script>
<script type="text/javascript">
$(function(){
var dataX='<?php echo $general_options["xmap"]; ?>';//X坐标
var dataY='<?php echo $general_options["ymap"]; ?>';//Y坐标
//信息标注(需要可放开)
//var dataN = '<ul>' + $('.contText .boxText').html() + '</ul>';
// 百度地图API功能
var map = new BMap.Map("ummap");
var point = new BMap.Point(dataX,dataY);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);

var opts = {
width : 200,
title : '' ,
enableMessage:true
}
var infoWindow = new BMap.InfoWindow(dataN, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});

});
</script>

第三步:在需要显示的地图的位置用以下的DIV,注意放在父DIV的里面,使用绝对定位


<div class="linkusone"><div id="ummap"> </div></div>

第四步:将以下的CSS样式放到样式文件里,控制地图的样式,如:宽度、高度等;


.linkusone{width:100%;height:660px;position:relative;margin-top:20px;}
#ummap {
background-color: #000!important;
width: 100%;
position: absolute;
top: 0;
right: 0;
height: 100%;
opacity: 0.4;
}
#ummap img {
max-width: none
}
#ummap iframe {
width: 100%;
height: 100%;
}
#ummap .map_y {
display: none
}

这样,通过以上的方法,我们就可以在自己的网站上添加位置地图了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 这个企业模板综合了企业网站的所有必需因素,如公司简介,幻灯片,产品展示,以及大量的产品分类展示,在线留言,产品循环展示等,基本上能满足公司企业网
  • 前段时间,学做网站新手群里讨论网站备案的事情,很多人不明白网站备案对于网站有什么益处,即要花费用又要受到网监的监控,似乎网站备案对于新手学做
  • 尽管有前一个模板为基础,这个模板仿制过程中还是遇到了不少的问题,加上调用内容比较多,折腾了四五天,总算解决了。再次谢谢老师及学做网站论坛让我
  • 对于很多制作企业网站的学员来说,少不了“联系我们”这一栏,对于大多数网站制作的学员来说,只会写公司名称,公司电话,公司地址之类,最多也只会加一
  • 在自己做网站过程中,往往为了实现某种效果,需要将中国地图嵌入到自己的网页中,而且可以用户随意的选择自己所要查找的城市。并且可以将地图放大与缩
  • 网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接(注:不是所有页面)。大多数人在网站上找不到自己所需