bob
/
westdc-zf1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

用天地图实现空间搜索浏览

This commit is contained in:
wlx 2014-06-20 11:36:42 +00:00
parent 910d890ba9
commit c7a72f41f9
1 changed files with 44 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
application/default/views/scripts/data/map.phtml
View File

@ -3,10 +3,7 @@ $this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data); $this->headTitle($this->config->title->data);
$this->headTitle("空间浏览"); $this->headTitle("空间浏览");
$this->headTitle()->setSeparator(' - '); $this->headTitle()->setSeparator(' - ');
$this->theme->AppendPlus($this,'jquery_ui'); $this->theme->AppendPlus($this,'tianditu');
//$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'=>'空间导航'); $this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
?> ?>
<style type="text/css"> <style type="text/css">
@ -18,8 +15,8 @@ $this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
<div class="row-fluid"> <div class="row-fluid">
<form class="form-search pull-right"> <form class="form-search pull-right">
<div class="input-append"> <div class="input-append">
<input type="text" class="span8 search-query" id="keyword"> <input type="text" class="span8 search-query" id="keyword" placeholder="关键词">
<button type="button" class="btn" onclick="mapmethods.action(map,1);">Search</button> <button type="button" class="btn" onclick="mapmethods.action(map,1);">搜索</button>
</div> </div>
</form> </form>
<h4>将地图中范围调整至要搜索数据的范围，然后点击“搜索数据”按钮查看当前范围的所有数据</h4> <h4>将地图中范围调整至要搜索数据的范围，然后点击“搜索数据”按钮查看当前范围的所有数据</h4>
@ -43,103 +40,59 @@ $this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
</div> </div>
</div> </div>
<script type="text/javascript" > <script type="text/javascript" >
$(function() { var bounds = null;
var rect = null;
var map,zoom=6,rectTool;
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};
}); //加载地图
function loadScript() { var myLatlng = new TLngLat(100,38);
var script = document.createElement('script'); var config = { projection: "EPSG:4326"}
script.type = 'text/javascript'; map = new TMap("map_canvas",config);
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + map.centerAndZoom(myLatlng,zoom);
'callback=initialize'; map.enableHandleMouseScroll();
document.body.appendChild(script); var config = {
} type:"TMAP_NAVIGATION_CONTROL_LARGE", //缩放平移的显示类型
anchor:"TMAP_ANCHOR_TOP_LEFT", //缩放平移控件显示的位置
window.onload = loadScript; offset:[0,0], //缩放平移控件的偏移值
showZoomInfo:true //是否显示级别提示信息，true表示显示，false表示隐藏。
// Google Map Part };
var map = null; //创建缩放平移控件对象
var mapElementID = "map_canvas"; var control=new TNavigationControl(config);
var rectangle = null; //添加缩放平移控件
var markers = []; map.addControl(control);
control = new TMapTypeControl();
function initialize() { //将地图类型控件添加到地图上
//加载地图 map.addControl(control);
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){ function setRectangle(east,west,south,north){
map.clearOverLays();
if(east.toFixed(1) != west.toFixed(1) && south.toFixed(1)!= north.toFixed(1) ){ if(east.toFixed(1) != west.toFixed(1) && south.toFixed(1)!= north.toFixed(1) ){
RemoveRectangle(); var p1=new TLngLat(west,south);
var p2=new TLngLat(west,north);
bounds = new google.maps.LatLngBounds( var p3=new TLngLat(east,south);
new google.maps.LatLng(south,west), var p4=new TLngLat(east,north);
new google.maps.LatLng(north,east) map.setViewport(new Array(p1,p2,p3,p4));
); var bounds = new TBounds(west,south,east,north);
var rect = new TRect(bounds);
rectangle = new google.maps.Rectangle({ map.addOverLay(rect);
bounds: bounds,
editable: false
});
rectangle.setMap(map);
}else{ }else{
RemoveRectangle(); var marker=new TMarker(new TLngLat(east,south));
map.addOverLay(marker);
var position = new google.maps.LatLng(south,east); map.centerAndZoom(new TLngLat(east,south),zoom);
}
var marker = new google.maps.Marker({
position: position,
map: map,
});
markers.push(marker);
}
} }
var mapmethods = { 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){ getbounds : function(map){
bounds = map.getBounds(); bounds = map.getBounds();
point1 = bounds.getNorthEast(); point1 = bounds.getNorthEast();
point2 = bounds.getSouthWest(); point2 = bounds.getSouthWest();
latlng = new Array(); latlng = new Array();
latlng['east'] = point1.lng().toFixed(2); latlng['east'] = point1.getLng().toFixed(2);
latlng['north'] = point1.lat().toFixed(2); latlng['north'] = point1.getLat().toFixed(2);
latlng['west'] = point2.lng().toFixed(2); latlng['west'] = point2.getLng().toFixed(2);
latlng['south'] = point2.lat().toFixed(2); latlng['south'] = point2.getLat().toFixed(2);
return latlng; return latlng;
}, },
action : function(map,ajax){ action : function(map,ajax){