現(xiàn)在很多企業(yè)網(wǎng)站制作上都有位置地圖功能，方便用戶查看公司的位置。讓企業(yè)網(wǎng)站更有信任感。效果如下圖：

網(wǎng)站上添加位置地圖功能，一般是使用百度地圖API來(lái)做的。下面小編就介紹一下企業(yè)網(wǎng)站上添加位置地圖的具體方法。

方法/步驟

第一步：引入百度地圖API，將下面的JS代碼保存到一個(gè)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代碼放在網(wǎng)頁(yè)的最底部，用于引入百度地圖；

<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坐標(biāo)
var dataY='<?php echo $general_options["ymap"]; ?>';//Y坐標(biāo)
//信息標(biāo)注(需要可放開)
//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); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow,point); //開啟信息窗口
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //開啟信息窗口
});

});
</script>

第三步：在需要顯示的地圖的位置用以下的DIV，注意放在父DIV的里面，使用絕對(duì)定位。

<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
}

這樣，通過(guò)以上的方法，我們就可以在自己的網(wǎng)站上添加位置地圖了。