51La

永兴集团(中国区)官方网站-Macau App Station

400-800-9385
网站建设资讯详细

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

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

地图设置

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

地图展示

接着永兴集团来说一说谷歌地图:首先跟百度地图一样永兴集团也可以去直接去谷歌地图生成,地址如下:谷歌官网/maps/;
永兴集团可以获取如下代码:,直接插入就行了。
同样永兴集团也可以封装成js文件,方便以后引用,如下:永兴集团先要通过如下地址获取谷歌地图的key值:
 
这个获取到以后,然后永兴集团封装一下方法:
 
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);永兴集团可以发现,这里也只需要经纬度就可以了,方便以后引用。最后地图实现效果如下:

如没特殊注明,文章均为永兴集团原创,转载请注明来自/news/4895.html
XML 地图