现在的位置:首页>其它免费>正文

谷歌地图和百度地图封装JS代码

2016年08月19日 ⁄ 共 4698字 评论 1 条

地图是个很强大的插件,据说ajax技术热门就是从地图产生那一刻开始,它给人们带来了极大的方便,很多网站上都少不了地图展示定位,尤其是品牌官网,地图无疑是展示一个企业位置最直观的工具。犹以百度地图和谷歌地图最为出色,先来看看百度地图的使用方法:

百度地图封装JS代码

html结构:放一个div容器就OK,用css固定宽高,加个搜索框吧:

  1. <input class="city-input">   
  2. <div id="qiuye-map"></div>  

然后就是js代码了:废话不多说,一切语言尽在代码中:

  1. //百度地图   
  2. (function(){   
  3.   //加载百度地图所需的css的api文件  from www.mfbuluo.com   
  4.   var head = document.getElementsByTagName("head")[0];   
  5.   var link = document.createElement("link");   
  6.   link.rel="stylesheet";link.type="text/css"  
  7.   link.href = "http://api.map.baidu.com/res/11/bmap.css";   
  8.   head.appendChild(link);   
  9.   var script = document.createElement("script");   
  10.   script.src = "http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058";      
  11.   head.appendChild(script);   
  12.   var json={   
  13.     pointX:114.037313,//坐标x   
  14.     pointY:22.539607,//坐标y   
  15.     icoWidth:56,//定位图标宽   
  16.     icoHeight:56,//定位图标高   
  17.     infoLeft:27,//定位信息框左偏移   
  18.     infoTop:56,//定位信息框上偏移   
  19.     icoURL:"point.png",//定位小图标   
  20.     icoLeft:0,//定位图标左偏移   
  21.     icoTop:0,//定位图标上偏移   
  22.     txt1:"百家网络博客",//定位信息,同下   
  23.     txt2:"广东省深圳市福田区车公庙",   
  24.     txt3:"QQ:1183238717",          
  25.   }   
  26. function createMap(){   
  27.   var map = new BMap.Map("qiuye-map");//地图容器,地图要显示在网页的哪个位置   
  28.   var point = new BMap.Point(json.pointX,json.pointY);   
  29.   map.centerAndZoom(point,15);//15是初始缩放级别   
  30.   window.map = map;   
  31. }   
  32. function setMapEvent(){   
  33.   map.enableDragging();   
  34.   map.enableScrollWheelZoom();   
  35.   map.enableDoubleClickZoom();   
  36.   map.enableKeyboard();   
  37. }   
  38. function addMapControl(){   
  39.   //缩放控件   
  40.   var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});   
  41.   map.addControl(ctrl_nav);   
  42.   //加缩略图控件   
  43.   var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});map.addControl(ctrl_ove);   
  44. //比例尺控件   
  45.   var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);   
  46. }   
  47. function createIcon(){   
  48.    var icon = new BMap.Icon(json.icoURL, new BMap.Size(json.icoWidth,json.icoHeight),   
  49.    {   
  50.       imageOffset: new BMap.Size(json.icoLeft,json.icoTop),   
  51.       infoWindowOffset:new BMap.Size(json.infoLeft,json.infoTop),   
  52.       offset:new BMap.Size(5,json.icoHeight)   
  53.    }   
  54.    )   
  55.    var marker = new BMap.Marker(new BMap.Point(json.pointX,json.pointY),{icon:icon});   
  56.    map.addOverlay(marker);   
  57.       
  58.    var content = "<table>";    
  59.    content = content + "<tr><td>"+json.txt1+"</td></tr>";    
  60.    content = content + "<tr><td>"+json.txt2+"</td></tr>";    
  61.    content = content + "<tr><td>"+json.txt3+"</td></tr>";    
  62.    content += "</table>";   
  63.    var infowindow = new BMap.InfoWindow(content);   
  64.    marker.addEventListener("click",function(){   
  65.       this.openInfoWindow(infowindow);   
  66.    });   
  67. }   
  68.     
  69. function initMap(){    
  70.   createMap();   
  71.   setMapEvent();   
  72.   addMapControl();   
  73.   createIcon();    
  74. }   
  75. script.onload=function(){   
  76.    initMap();   
  77. }   
  78. $(".city-input").keyup(function(e){//表单搜索位置   
  79.    var e=e||window.event;   
  80.    if(e.keyCode==13){   
  81.       var address=$(".city-input").val();   
  82.       var myGeo = new BMap.Geocoder();   
  83.       myGeo.getPoint(address, function(point){   
  84.          if (point) {   
  85.            map.centerAndZoom(point, 14);   
  86.            map.addOverlay(new BMap.Marker(point));   
  87.          }   
  88.       }, address);   
  89.    }   
  90. });    
  91. })()  

谷歌地图封装JS代码

使用谷歌地图请先翻@@qiang,或者使用VPS的代@理工具,相对于百度地图插件,谷歌的更加简单些,代码也比较少:

html结构

  1. <input id="city-input">   
  2. <div id="dituContent"></div>  

js代码为:

  1. //谷歌地图  from www.mfbuluo.com   
  2. window.initMap = function() {   
  3.   var map = new google.maps.Map(document.getElementById('dituContent'), {   
  4.     zoom: 15,   
  5.     center: {lat: 22.538329100000002, lng: 114.02683350000007}//坐标   
  6.   });   
  7.   var geocoder = new google.maps.Geocoder();   
  8.   $(".city-input").keyup(function(e) {   
  9.       var e=e||window.event;   
  10.       if(e.keyCode==13){   
  11.           geocodeAddress(geocoder, map);   
  12.       }   
  13.   });   
  14. }   
  15. function geocodeAddress(geocoder, resultsMap) {   
  16.     var detail = $('#city-input').val()||"";   
  17.     var address=detail ;   
  18.   geocoder.geocode({'address': address}, function(results, status) {   
  19.     if (status === google.maps.GeocoderStatus.OK) {   
  20.       resultsMap.setCenter(results[0].geometry.location);   
  21.       var marker = new google.maps.Marker({   
  22.         map: resultsMap,   
  23.         position: results[0].geometry.location   
  24.       });   
  25.     //标注提示窗口   
  26.     var infoWindow = new google.maps.InfoWindow({   
  27.         content: "当前位置:" + results[0].formatted_address   //提示窗体内的提示信息   
  28.     });   
  29.     //打开提示窗口   
  30.     infoWindow.open(map, marker);   
  31.     } else {   
  32.       alert('Geocode was not successful for the following reason: ' + status);   
  33.     }   
  34.   });   
  35. }  

除此之外还要另外加载一个js文件,在页面最底部引入:

  1. <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" defer sync></script>  

小结

文章的方法来源自网络,由免费部落整理发布.

很多人说百度地图不行,不好用之类的,其实就国内的情况来看,还是百度要用得上手一些.

评论 1 条 评论内容很精采,有内幕,而且绝对有干货

  1. 我爱动感单车网 2016年08月23日 11:10  @回复  Δ-49楼 回复

    若是能够配上效果图,那就直观和好理解多了!

给我留言