网站建设之网站地图的引入

在网站建设的过程中，随着时间的积累，我们可能会碰到各种各样的功能开发，毕竟客户的需求是无穷的。说到这，我们就想，为什么我们要做网站。在现在网络这么发达的背景下，为了更好的宣传自己的企业，一个漂亮、美观的网站是必不可少的。既然网站是为了更好的宣传自己的公司，那么，引入地图，让他人更好找到我们公司就显得至关重要。废话不多说，现在我就分别介绍一下百度地图和谷歌地图的引入方法。具体操作如下：
首先我们讲一讲百度地图。
百度地图还是挺方便的，直接可以在百度生成，生成地址如下：
http://api.map.baidu.com/lbsapi/creatmap/index.html
获取代码后，直接把代码复制到相关页面就可以了。需要注意的点是：网页插入地图部分代码：
 <div id="googleMap" style="width:500px; height:800px;"></div>中的id属性要和百度生成的js代码中的var map = new BMap.Map("gooleMap");一致，这是一种绑定关系。这里为了以后大家更好的使用，我们封装一下，所谓的封装也就是把生成的js代码放到一个专门的js文件里。然后再地图显示页面直接引入就可以了。具体如下：<script src="__STATIC__/baidumap/baidumap.js"></script>

这里我们不难发现，我们这里只需要获得公司地址的经纬度就可以生成地图。方便以后更好的引用。最后网页实现的效果如下：



接着我们来说一说谷歌地图：首先跟百度地图一样我们也可以去直接去谷歌地图生成，地址如下：谷歌官网/maps/;
我们可以获取如下代码:<iframe src="谷歌官网/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='谷歌官网/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);我们可以发现，这里也只需要经纬度就可以了，方便以后引用。最后地图实现效果如下：