Codeigniter 入门 (13) googlemap

先上效果图


-- 英文版

-- 中文版


实现步骤如下:

   1、下载第三方实现包

      下载地址: http://biostall.com/codeigniter-google-maps-v3-api-library

      文档说明:http://biostall.com/wp-content/uploads/2010/07/Google_Maps_V3_API_Documentation.pdf

      将下载好的文件放入application/libraries 目录下(共二个文件Googlemaps.php,Jsmin.php),为了实现中英文互切换,修改了Googlemaps.php中的

       

function create_map($lang="zh_CN")
{
 
    $this->output_js = '';
    $this->output_js_contents = '';
    $this->output_html = '';
     
    //2012-8-30,在这里直接取本地JS
    //if ($this->https) { $apiLocation = 'https://maps-api-ssl'; }else{ $apiLocation = 'http://maps'; }
    //  $apiLocation .= '.google.com/maps/api/js?sensor='.$this->sensor."&language=$lang";
    if($lang=="zh_CN"){
       $apiLocation=base_url()."js/google/map_cn.js";
    }else{
       $apiLocation=base_url()."js/google/map_en.js";
    }

       *其中提到的map_cn.js,与map_en.js,下载到application同级目录下的js/google 目录下保存

       map_cn.txt map_en.txt


  2、自动加载

$autoload['libraries'] = array('database','mymsg','pager','sitemaps','rss','mytool','googlemaps');

  3、控制器

<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
/**
 * 休闲豆(http://www.xiuxiandou.com)
 */
class Googlemap  extends CI_Controller{
  
    public function index(){
        //查询出所有的记录
        $lst_obj=$this->mcom_model->query_hql_object(mymsg::XT_GOOGLEMAP);
        if(!empty($lst_obj)){
            $jd=$lst_obj[0]->jd;
            $wd=$lst_obj[0]->wd;
            
            $config['cluster'] = TRUE;
            $config['center'] =($wd).",".($jd); //默认设置第一个为中心点
            $config["noClear"]=TRUE;
            $config["minifyJS"]=TRUE;
            $config['map_height']='490px';
 
            $this->googlemaps->initialize($config);
          
            foreach($lst_obj as $data){
                $url="http://www.baidu.com";
                $marker = array();
                $marker['position'] = $data->wd.','.$data->jd;      //显示的位置,经度、纬度
                $marker['infowindow_content'] = $data->ms;          //文字说明
                $marker['onclick'] ="[removed].href='$url'";  //点击跳转的地址
                $marker['title'] = "$data->ms";                      //标题说明
                if($data->online=="ONLINE"){//  在线
                    $marker['icon'] = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='.$data->bh.'|99FF00|000000';
                }else if($data->online=="WARN"){//告警
                    $marker['icon'] = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='.$data->bh.'|FF0000|003366';
                    $marker['onclick'] ="xxx";//onclick事件
                    $marker['animation']="BOUNCE";
                }else if($data->online=="OFFLINE"){//离线
                    $marker['icon'] = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='.$data->bh.'|74C2E1|000000';
                }
                $this->googlemaps->add_marker($marker);
            }
          }
        //-----------------------取默认坐标为中心结束-----------------------------
         $data = array();
        // 创建地图
        $data["map"]=$this->load_map();
        $this->load->view('googlemap',$data);             
    }
    //中英文切换
     private function load_map(){
        $lang=$this->session->userdata("language");
        $map=null;
        if($lang=="en"){
            $map=$this->googlemaps->create_map($lang);
        }else{
            $map = $this->googlemaps->create_map();
        } 
        return $map;   
    }
}

  4、显示页面


   
   
<head>  

 
    <?php echo $map['js']; ?>
</head>
<body>
   <?php echo $map['html']; ?>
</body>
 


  5、测试时的数据



可以,在浏览器中录入


http://localhost/example/Googlemap

就可访问,同时可结合上篇国际化,实现中英文切换效果。