westdc-zf1/application/default/views/scripts/data/map.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle("Extent Map Browse");
$this->headTitle()->setSeparator(' - ');
$this->theme->AppendPlus($this,'jquery_ui');
//$this->theme->AppendPlus($this,'google_map_v3');
$this->theme->AppendPlus($this,'colorbox');
$this->headLink()->appendStylesheet('/js/theme/default/style.css');
$this->nav[] = array('link'=>"/data/map",'title'=>'Extent Map Browse');
?>
<style type="text/css">
#data_canvas .well {background:#FFF;}
</style>
<div class="row-fluid">
	<?= $this->render('breadcrumbs.phtml'); ?>
    <?= $this->partial('data/tools.phtml'); ?>
    <div class="row-fluid">
    <form class="form-search pull-right">
        <div class="input-append">
        <input type="text" class="span8 search-query" id="keyword">
        <button type="button" class="btn" onclick="mapmethods.action(map,1);">Search</button>
        </div>
    </form>
    <h4>Zoom the map to an extent, then click "Search Data" to view the data that locate in the current map extent.</h4>
    </div>
    <hr />
    <div class="row-fluid">
    	<div class="span6">
        	<div><button class="btn btn-large btn-block" type="button" id="searchbtn" onclick="mapmethods.action(map,1);">View data</button></div>
            <hr />
            <div id="map_canvas" style="height:500px;">
            </div>
        </div>
        <div class="span6">
        	<div><button class="btn btn-large btn-block" type="button" onclick="$('#data_canvas').html('');">Clear list</button></div>
            <hr />
            <div class="well well-small" style="height:500px;overflow-y:scroll;">
            	<ul id="data_canvas" class="unstyled">
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" >
$(function() {

});
function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

// Google Map Part
var map = null;
var mapElementID = "map_canvas";
var rectangle = null;
var markers = [];

function initialize() {
	//加载地图
	var myLatlng = new google.maps.LatLng(35.656456,105.819946);
	var myOptions = {
		zoom: 3,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById(mapElementID), myOptions);
	
	//methods.trigger('tilesloaded',map);
	mapmethods.trigger('dragend',map);
	mapmethods.trigger('zoom_changed',map);
}

function RemoveRectangle(){
	if(rectangle != null)
	{
		rectangle.setMap(null);
		rectangle = null;
	}
	if (markers) {
		for (i in markers) {
  			markers[i].setMap(null);
		}
	}
}

function setRectangle(east,west,south,north){
	
	if(east.toFixed(1) != west.toFixed(1) && south.toFixed(1)!= north.toFixed(1) ){
		RemoveRectangle();
		
		bounds = new google.maps.LatLngBounds(
		  new google.maps.LatLng(south,west),
		  new google.maps.LatLng(north,east)
		);
	
		rectangle = new google.maps.Rectangle({
		  bounds: bounds,
		  editable: false
		});
		
		rectangle.setMap(map);
	}else{
		RemoveRectangle();
		
		var position = new google.maps.LatLng(south,east);
		
		var marker = new google.maps.Marker({
			position: position,
			map: map,
		});
		
		markers.push(marker);
	}
	
	
	
}

var mapmethods = {
	trigger : function(triggername,map){
		google.maps.event.addListener(map, triggername,function(){
			range = mapmethods.action(map);
			//console.log(range);
			//mapmethods.ajax(range,0);
		});
	},
	getbounds : function(map){
		bounds = map.getBounds();
		point1 = bounds.getNorthEast();
		point2 = bounds.getSouthWest();
		latlng = new Array();
		latlng['east'] = point1.lng().toFixed(2);
		latlng['north'] = point1.lat().toFixed(2);
		latlng['west'] = point2.lng().toFixed(2);
		latlng['south'] = point2.lat().toFixed(2);
		return latlng;
	},
	action : function(map,ajax){
		range = mapmethods.getbounds(map);
		$('#searchbtn').html("Search Data: (" + range['east'] + "," + range['north'] + ") to ("  + range['west'] + "," + range['south'] + ")");
		if(ajax  == 1)
		mapmethods.ajax(range);
		//return range;
	},
	ajax : function(range){
		btn = $('#searchbtn');
		btnhtml = btn.html();
		func = btn.attr('onclick');
		
		data = new Array();
		for(k in range)
		{
			data.push('opt['+k+']='+range[k]);
		}

		q = $('#keyword').val();
		if( q != '')
		{
			data.push('opt[q]='+q);
		}
		
		post = data.join("&");
		
		$.ajax({
			'type':"POST",
			'url': '/service/mapsearch',
			'data': post,
			'success':function(data){
				if (typeof(data)=='object')
				{
					mapmethods.list(data);
				}
				else{ 
					alert('No data in current extent');
				}
			},
			'timeout': 15000,
			'error': function(){
				alert('Errors found!');
			},
			'beforeSend':function(){
				btn.attr('onclick','');
				btn.html('<img src="/images/ajax-load-small.gif" />');
			},
			'complete':function(){
				btn.attr('onclick',func);
				btn.html(btnhtml);
			}
		});
	},
	list : function(data)
	{
		html = "";
		if(data.length > 0)
		{
			for(i in data)
			{
				html += '<li class="well well-small">'
					 + '<p><a href="/data/'+data[i].uuid+'">'+data[i].title+'</a></p>'
					 + '<div class="input-append">'
					 + '<a class="btn" href="javascript:void(0);" onclick="setRectangle('+data[i].east+','+data[i].west+','+data[i].south+','+data[i].north+')" title="View the extent of data"><i class="icon-eye-open"></i></a>'
					 + '<a class="btn" href="/data/'+data[i].uuid+'" title="View Data"><i class="icon-search"></i></a>'
					 + '</div>'
					 + '</li>';
			}
		}
		$('#data_canvas').html(html);
	}
}
</script>