在網(wǎng)站建設(shè)的過程中，隨著時間的積累，我們可能會碰到各種各樣的功能開發(fā)，畢竟客戶的需求是無窮的。說到這，我們就想，為什么我們要做網(wǎng)站。在現(xiàn)在網(wǎng)絡(luò)這么發(fā)達的背景下，為了更好的宣傳自己的企業(yè)，一個漂亮、美觀的網(wǎng)站是必不可少的。既然網(wǎng)站是為了更好的宣傳自己的公司，那么，引入地圖，讓他人更好找到我們公司就顯得至關(guān)重要。廢話不多說，現(xiàn)在我就分別介紹一下百度地圖和谷歌地圖的引入方法。具體操作如下：
首先我們講一講百度地圖。
百度地圖還是挺方便的，直接可以在百度生成，生成地址如下：
http://api.map.baidu.com/lbsapi/creatmap/index.html
獲取代碼后，直接把代碼復(fù)制到相關(guān)頁面就可以了。需要注意的點是：網(wǎng)頁插入地圖部分代碼：
 <div id="googleMap" style="width:500px; height:800px;"></div>中的id屬性要和百度生成的js代碼中的var map = new BMap.Map("gooleMap");一致，這是一種綁定關(guān)系。這里為了以后大家更好的使用，我們封裝一下，所謂的封裝也就是把生成的js代碼放到一個專門的js文件里。然后再地圖顯示頁面直接引入就可以了。具體如下：<script src="__STATIC__/baidumap/baidumap.js"></script>

這里我們不難發(fā)現(xiàn)，我們這里只需要獲得公司地址的經(jīng)緯度就可以生成地圖。方便以后更好的引用。最后網(wǎng)頁實現(xiàn)的效果如下：



接著我們來說一說谷歌地圖：首先跟百度地圖一樣我們也可以去直接去谷歌地圖生成，地址如下：谷歌官網(wǎng)/maps/;
我們可以獲取如下代碼:<iframe src="谷歌官網(wǎng)/maps/embed?pb=!1m14!1m12!1m3!1d255281.22504611858!2d103.84425004999999!3d1.31400005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-CN!2ssg!4v1548403332968" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>,直接插入就行了。
同樣我們也可以封裝成js文件，方便以后引用，如下：我們先要通過如下地址獲取谷歌地圖的key值：<script type='text/javascript' src='谷歌官網(wǎng)/maps/api/js?sensor=true&amp;&amp;key=AIzaSyDO-TI0nPW2O7VTCRuhHDQ-MocQpckas6U'></script>
 
這個獲取到以后，然后我們封裝一下方法：
 
function googleMap(lat,lon){
        var myCenter=new google.maps.LatLng(lat,lon);
        function initialize()
        {
        var mapProp = {
          center:myCenter,
          zoom:18,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };
 
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
        var marker=new google.maps.Marker({
          position:myCenter,
          icon:Img
          });
 
        marker.setMap(map);
        }
        initialize();
}
 
然后我們在頁面只需要googleMap(113.846839,22.786304);我們可以發(fā)現(xiàn)，這里也只需要經(jīng)緯度就可以了，方便以后引用。最后地圖實現(xiàn)效果如下：