网页中增加地图组件的推荐方法和优缺点

网页中有两种地图，一种是做一个链接，打开之后看地图；还有一种是在页面中嵌套一个地图作为网页的一部分。两种做法都可以选用多种地图，目前用的比较多的有：百度地图、搜狗地图、腾讯地图、高德地图。因为限于篇幅和小编的研究，这里只讲我们经常用的方式。

第一类：网页位置链接。

1、H5网页位置链接建议用百度的。

操作方式：百度搜索“百度地图”，然后输入您想要的地址，例如我们搜“弘熹台-东门”，得到如下结果：

点击分享，复制里边的链接，即可成为一个独立连接放到你的网站上去。

优缺点分析：百度地图在微信里支持度稍微差了一点，但好在他在微信里会顶部出现一个提示让大家在浏览器里使用。综合评比觉得还是百度地图的链接用起来更顺一些。

2、微信中使用的多可以选择腾讯地图

操作方法：跟百度差不多，搜索地点，然后点击地图中地点起泡，出来这个地点的详细情况，右上角会有一个分享按钮，点击会出一个小弹窗，里边可以复制链接，如下图：

腾讯地图的好处就是在微信中展示效果比较好，但是在网页中效果就一般般了。

第二类：网页嵌套地图。

这个我们还是比较推荐搜狗地图和百度地图。但是考虑到现在百度地图需要密钥，这两年用这个就比较少了，一般情况下小编使用的是搜狗地图。

1、搜狗地图引用代码：

<style type="text/css">
html {
height: auto;
}
body {
height: auto;
margin: 0;
padding: 0;
}
#map_canvas {
width: 1000px;
height: 500px;
position: absolute;
}

@media print {
#map_canvas {
height: 950px;
}
}

.map_tips {
font-size: 14px;
padding: 10px;
width: 260px;
line-height: 150%
}
</style>
<script type="text/javascript">
  var map_title="野狼SEO团队，纯白帽SEO倡导者！";
  var map_tips="<div class='map_tips'>全国24小时服务电话：400-6676-390</br>固定电话：0371-56789390</div>";
  var map_x=12653699.21875;
  var map_y=4111972.65625;
  function initialize() {
    var myOptions = {
      zoom: 15,
      center: new sogou.maps.Point(map_x,map_y)
    }
    var map = new sogou.maps.Map(document.getElementById("map_canvas"),myOptions);

  //添加一个红色的图标
    var image = 'http://api.go2map.com/maps/images/v2.0/S20.png';
    var myLatLng =new sogou.maps.Point(map_x,map_y);
    var beachMarker = new sogou.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });

var infowindow = new sogou.maps.InfoWindow({title:map_title});
infowindow.setContent(map_tips);
infowindow.open(map,beachMarker);
sogou.maps.event.addListener(beachMarker, 'click',function (){      
 infowindow.open(map,beachMarker);      
    }); 
  }   
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.onGo2mapApiLoad=initialize;
    script.src = "http://api.go2map.com/maps/js/api_v2.5.1.js";
    document.body.appendChild(script);
  }   
  window.onload = loadScript;
</script>

去搜狗地图网站上进行选点，然后在这个引用代码里修改文字描述等，即可配置好地图信息。

2、百度地图引用代码

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXX"></script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(113.297416,34.79116),16);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"永易搜科技，专注网站开发。",title:"永易搜科技 ",imageOffset: {width:0,height:3},position:{lng:113.297416,lat:34.79116}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/images/markers.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
    }
    var map;
      initMap();
  </script>

去百度地图官网完成选点等操作，替换代码中的坐标位置即可。百度坐标拾取器网址：http://api.map.baidu.com/lbsapi/getpoint/index.html