網頁中有兩種地圖，一種是做一個鏈接，打開之后看地圖；還有一種是在頁面中嵌套一個地圖作為網頁的一部分。兩種做法都可以選用多種地圖，目前用的比較多的有：百度地圖、搜狗地圖、騰訊地圖、高德地圖。因為限于篇幅和小編的研究，這里只講我們經常用的方式。

第一類：網頁位置鏈接。

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