地图的开发研究---在线地图

   关于地图的开发，目前有两种，谷歌或者百度地图提供的在线API(目前我使用的)，方便有效，但是需要用户可以连接到百度或者谷歌的服务器，即必须在线，对于重视安全隐私的局域网不适合。另一种就是开源组件使用的openlayer组件，提供离线地图，但是开发难度大，需要自己截取区域，并且有点丑。

  目前我使用的是前者开发，为了比较两种地图的差异，两种地图都已开发，加载速度还算满意。

 

1.百度地图的开发：

  开发百度地图，准备工作就是要申请一个密钥，引入百度地图的在线API接口：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>

  这里我使用的是地址解析到经纬度，然后定点标注，根据后台查到的事件的发生地址通过百度的函数解析为经纬度然后在地图上标注出来，并给每个标注点添加提示框，显示事件详情。开发过程中遇到了2个问题：

  （1）批量解析的时候，提示框的内容都是最后一个事件的内容，这个问题在网上好多人都遇到了，应该是百度API的问题。我的解决方法是在解析之前取出来想要的提示信息，然后再放到解析函数中，如下图红色代码，

Function bdGEO(){

init();//查到的事件信息保存到数组中

    var add = adds[index];

    geocodeSearch(add);

    index++;

}

function geocodeSearch(add){

    if(index < adds.length){

        setTimeout(window.bdGEO,1);

    } 

    var p1=title[index];

    var p2=time[index];

    var p3=info[index];

    myGeo.getPoint(add, function(point){

      if (point) {  

       var  content="<b>"+p1+"</b><hr></hr><font color='red'>时间：</font>"+p2+"</br>"+"<font color='red'>地址：</font>"+add+"</br>"+"<font color='red'>描述：</font>"+p3; 

        var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));

        map.addOverlay(marker);//根据解析的经纬度增加标注点

 

  //鼠标移到标注点显示信息 

marker.addEventListener("mouseover", function () {

         var infoWindow = new BMap.InfoWindow(content);

         this.openInfoWindow(infoWindow);});

      }

   //鼠标移开标注点关闭信息框 

marker.addEventListener("mouseout", function () {

       this.closeInfoWindow();});

    }, "克拉玛依市");

}

 

（2）上述代码中的setTimeout(window.bdGEO,1);不能缺少，如果直接用for循环里面调用解析函数会造成只显示一个标注点或者没有标注点，这个问题应该和附件组件提出的异步问题相似，for循环和地图加载异步，线程速度不一样，会造成只显示最后一个标注点。

 

2.谷歌地图的开发：

  谷歌地图的开发一波三折，一开始使用的是v2版的谷歌地图在线API，需要密钥,本地开发测试都成功后，让局域网的他人访问页面测试，总是提示需要密钥，后来通过网上查询得知，v2版仅供本地测试开发，果断更改为v3，且不需要密钥。经过测试后没有问题，不过网上有人说访问次数有限制，所以目前推荐百度地图，百度地图颗粒度也比谷歌地图的高。

  谷歌地图和百度地图的函数很相似，百度地图的两个问题谷歌也存在，就列出解析函数：

function geocodeSearch(address) { 

  if(index < adds.length-1){

        setTimeout(window.bdGEO,1);

    }   

  var geocoder = new google.maps.Geocoder();

  var  content="<font color='red'>"+title[index]+"</font>"+"<hr></hr>时间："+time[index]+"</br>"+"地址："+address+"</br>"+"描述："+ info[index]; 

    geocoder.geocode( { 'address': address}, function(results, status) {    

if (status == google.maps.GeocoderStatus.OK) {    

//      console.log(results[0].geometry.location); 

      map.setCenter(results[0].geometry.location);

      var infowindow = new google.maps.InfoWindow({ 

          content: content

      }); 

      var marker = new google.maps.Marker({          

          map: map,  

          position: results[0].geometry.location 

      }); 

  

              google.maps.event.addListener(marker, 'mouseover', function() {               

                 infowindow.open(map,marker);               

               });

              google.maps.event.addListener(marker, 'mouseout', function() {               

               infowindow.close();               

             });

 

其中console.log(results[0].geometry.location);本是用来控制台调试的，却造成了整个页面的困扰，导致后面好多代码不执行，可能单线程吧，被占用了。

 

总结;

，综合比较下来，在线的话 还是使用百度地图比较好，因为加载速度快，地图的颗粒度更高，显示的内容更细致，相反谷歌浏览器效果不是那么理想。当然现在的在线地图显然不能满足现实，所以后期还是要开发离线地图方便局域网使用。

效果图：

谷歌地国

:

百度地图：