百度地图和谷歌地图封装插件（一）

作者：秋了秋发表时间：2016年06月17日

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

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

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

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

//百度地图
(function(){
  //加载百度地图所需的css的api文件
  var head = document.getElementsByTagName("head")[0];
  var link = document.createElement("link");
  link.rel="stylesheet";link.type="text/css"
  link.href = "http://api.map.baidu.com/res/11/bmap.css";
  head.appendChild(link);
  var script = document.createElement("script");
  script.src = "http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"; 	
  head.appendChild(script);
  var json={
    pointX:114.037313,//坐标x
    pointY:22.539607,//坐标y
    icoWidth:56,//定位图标宽
    icoHeight:56,//定位图标高
    infoLeft:27,//定位信息框左偏移
    infoTop:56,//定位信息框上偏移
    icoURL:"point.png",//定位小图标
    icoLeft:0,//定位图标左偏移
    icoTop:0,//定位图标上偏移
    txt1:"秋叶网络博客",//定位信息，同下
    txt2:"广东省深圳市福田区车公庙",
    txt3:"QQ：1183238717",   	
  }
function createMap(){
  var map = new BMap.Map("qiuye-map");//地图容器，地图要显示在网页的哪个位置
  var point = new BMap.Point(json.pointX,json.pointY);
  map.centerAndZoom(point,15);//15是初始缩放级别
  window.map = map;
}
function setMapEvent(){
  map.enableDragging();
  map.enableScrollWheelZoom();
  map.enableDoubleClickZoom();
  map.enableKeyboard();
}

function addMapControl(){
  //缩放控件
  var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
  map.addControl(ctrl_nav);
  //加缩略图控件
  var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});map.addControl(ctrl_ove);
//比例尺控件
  var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);
}

function createIcon(){
   var icon = new BMap.Icon(json.icoURL, new BMap.Size(json.icoWidth,json.icoHeight),
   {
      imageOffset: new BMap.Size(json.icoLeft,json.icoTop),
      infoWindowOffset:new BMap.Size(json.infoLeft,json.infoTop),
      offset:new BMap.Size(5,json.icoHeight)
   }
   )
   var marker = new BMap.Marker(new BMap.Point(json.pointX,json.pointY),{icon:icon});
   map.addOverlay(marker);
   
   var content = "<table>"; 
   content = content + "<tr><td>"+json.txt1+"</td></tr>"; 
   content = content + "<tr><td>"+json.txt2+"</td></tr>"; 
   content = content + "<tr><td>"+json.txt3+"</td></tr>"; 
   content += "</table>";
   var infowindow = new BMap.InfoWindow(content);
   marker.addEventListener("click",function(){
      this.openInfoWindow(infowindow);
   });
}
 
function initMap(){ 
  createMap();
  setMapEvent();
  addMapControl();
  createIcon(); 
}
script.onload=function(){
   initMap();
}
$(".city-input").keyup(function(e){//表单搜索位置
   var e=e||window.event;
   if(e.keyCode==13){
      var address=$(".city-input").val();
      var myGeo = new BMap.Geocoder();
      myGeo.getPoint(address, function(point){
         if (point) {
           map.centerAndZoom(point, 14);
           map.addOverlay(new BMap.Marker(point));
         }
      }, address);
   }
}); 
})()