地图画线

jinxhj2003

浏览: 149052 次
性别:
来自: 南昌

最近访客更多访客>>

tom2139779

java113096

项志鹏同學

wellxu万岁

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

googlemap

Google Struts prototype

<%@page language="java" contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib prefix="c" uri="core"%>
<%@page import="com.jltour.common.framework.Java91Config"%>
<%@ page import="com.jltour.common.constant.OptionType"%>
<%@ page import="com.jltour.common.manager.OptionManager"%>
<%@ taglib uri="java91" prefix="java91" %>
<html>
<head>
<title>google地图操作</title>
<script language='javascript' charset='utf-8' src='/js/framework.js'></script>
<script language='javascript' charset='utf-8' src='/js/area.js'></script>
<script language='javascript' charset='utf-8' src='/js/areafun.js'></script>
<script language='javascript' charset='utf-8' src='/js/city.js'></script>
<script language='javascript' charset='utf-8' src='/js/Validation.js'></script>
<script src='http://maps.google.com/maps?file=api&v=2&key=<%=Java91Config.getGoogleMapKey() %>'></script>
<link rel="stylesheet" type="text/css" href="/style/google.css"/>
<script type="text/javascript">
var pointArray = new Array();
GMarker.prototype.setIndex=function(index)
{
this.index=index;
}
var map;//地图
var polygon;//线对象
var markers=[];//修建的markers
var crenterMarker;//当前的中心点对象
var isCenter =false;//是否是中心点
var myIcon=new GIcon(G_DEFAULT_ICON,"http://www.google.com/mapfiles/marker.png");//图像
function createMarker(point){
     var marker=new GMarker(point,{icon:myIcon,draggable:true,bouncy:true});
     var index=markers.length;
      //document.getElementById("jingwei").innerHTML = document.getElementById("jingwei").innerHTML+"|"+index+":("+point.y + "," + point.x+")";
     GEvent.addListener(marker,'dblclick',function(){//双击删除
     deleteMarker(marker);
     });
     GEvent.addListener(marker,'dragstart',function(){//鼠标按下
        marker.setImage("http://www.google.com/mapfiles/dd-start.png");
     });
     GEvent.addListener(marker,'dragend',function(){//鼠标防开
      marker.setImage("http://www.google.com/mapfiles/marker.png");
     });
     GEvent.addListener(marker,'drag',function(){//重画
      redrawPolygon();
      changMarkerTable(index);
     });
     marker.setIndex(index);
     markers[index]=marker;
     map.addOverlay(marker);
     redrawPolygon();
     initTemplate(index,point.x,point.y);//初始化添加模版
     addRow(index);//在表中添加行
}

function createCenterMarker(point){
if(point){
if(crenterMarker){
map.removeOverlay(crenterMarker);
var marker = new GMarker(point);
map.addOverlay(marker);
crenterMarker = marker;
changCenterMarkerTable(point);//修改值
addPolygon();
}else{
var marker = new GMarker(point);
map.addOverlay(marker);
crenterMarker = marker;
initTemplate(88,point.x,point.y)
addRow(88);//在表中添加行
addPolygon();
}
}

}

function deleteMarker(marker){
    if(!confirm("您确认删除吗?"))return;
    var index=marker.index;
    map.removeOverlay(marker);
    deleteMarkerTable(index);
    for(var i=index;i<markers.length-1;i++){
     markers[i+1].setIndex(i);
     markers[i]=markers[i+1];
    }
    markers.length=markers.length-1;
    redrawPolygon();
}
function load(){
     if(GBrowserIsCompatible()){
     map=new GMap2(document.getElementById("map"));
     map.addControl(new GMapTypeControl());//地图类型地图卫星
map.addControl(new GLargeMapControl());//放大缩小
map.addControl(new GScaleControl());//比例尺
map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放(默认是不会)。
     var centerPoint=new GLatLng(22.542169,114.123402);
     map.setCenter(centerPoint,16);
     GEvent.addListener(map,'click',function(overlay,point){
      if(isCenter){
      if(overlay){
      map.removeOverlay(overlay);
      }else if(point){
      createCenterMarker(point);
      }
      }else{
      if(point){
      createMarker(point);
      }
      }
     });
}
}
function addPolygon(){
    var points=[];
    for(var i=0;i<markers.length;i++){
      points[i]=markers[i].getPoint();
    }
    if(markers.length>0){
    points[markers.length+1]=markers[0].getPoint();
    }
    polygon=new GPolygon(points,"#ff0000",2, 0.3, "#6666FF", 0.4);//顏色，線條的粗細,顏色透明度
    map.addOverlay(polygon);
}
function removePolygon(){
    polygon.remove();
    polygon=null;
}
function redrawPolygon(){//重畫
    if(polygon){
      removePolygon();
    }
    addPolygon();
}

function showAddress(value,cityName){
if(isNullValue(value)){
    return false;
    }
    if(isNullValue(cityName)){
    alert("城市不能为空");
    return false;
    }
    var adressInput =cityName+"市 ";
    map.geocoder = new GClientGeocoder();
    if (map.geocoder) {
    map.geocoder.getLatLng(adressInput,function(point){
            if (!point) {
              alert("不能解析: " + adress);
            } else {
              map.setCenter(point,14);
              var baseIconQuery =new GIcon(G_DEFAULT_ICON,"http://www.google.com/mapfiles/marker.png");//图像
              var marker = new GMarker(point,{icon: baseIconQuery,draggable: true});
              map.addOverlay(marker);
            }
          });
      }
}

</script>
</head>
<body onload="load()" onunload="GUnload()">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="searchtable">
<tr>
<td><table width="100%">
<tr height="50" >
<td width="80px" align="right">常用城市：</td>
<td colspan="5" >
<input type='radio' id="70002" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="70002" ><label for="70002" style="CURSOR:pointer">深圳</label>
<input type='radio' id="30000898" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="30000898" ><label for="30000898" style="CURSOR:pointer">香港</label>
<input type='radio' id="70139" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="70139" ><label for="70139" style="CURSOR:pointer">澳门</label>
<input type='radio' id="70011" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="70011" ><label for="70011" style="CURSOR:pointer">广州</label>
<input type='radio' id="70030" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="70030" ><label for="70030" style="CURSOR:pointer">三亚</label>
<input type='radio' id="70082" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="70082" ><label for="70082" style="CURSOR:pointer">北京</label>
<input type='radio' id="70058" style="CURSOR:pointer;" onclick="cityChangAll(this.value);" name="commoncity" value="70058" ><label for="70058" style="CURSOR:pointer">上海</label>
     
<INPUT TYPE="hidden" id="city_id" value="" name="hotelQueryPara.city">
<INPUT size="10" TYPE="text" style="vertical-align:middle;color:#697268;" id="city_name" value="" onKeyDown="return suggest.display(this,event);" onClick="suggest.display(this,event);">
   
行政区：<select id=zone name="hotelQueryPara.zone" onchange="javaScript:zoneChange(this.value);mapZoneChange(this);" style="width:80px" ></select>
商业区：<select id=bizzone name="hotelQueryPara.bizzone" style="width:80px" onchange="mapBizzChange(this);"></select>
</td>
</tr>
<tr height="50" >
<td width="80px" align="right">设置中心点：</td>
<td colspan="5" >
<input type='radio' id='datetyped' style="CURSOR:pointer;" name="iscenter" value="1"   onclick="setIsCerter(this.value);"/><label for='datetyped' style='CURSOR:pointer;color:#697268'>是</label>
<input type='radio' id='datetypem' style="CURSOR:pointer;" name="iscenter" value="8"    onclick="setIsCerter(this.value);"/><label for='datetypem' style='CURSOR:pointer;color:#697268'>否</label>
</td>
</tr>
<tr>
<td colspan="6" align="right">
<input type="button" value="查询" onclick="submit2();" style="CURSOR:pointer;" > 
<input type="reset" value="重置" style="CURSOR:pointer;" > 
<input type="button" value="隐藏" onclick="queryFormDiv();" style="CURSOR:pointer;" >　　
</td>
</tr>
</table></td>
</tr>
<tr>
<td ><table width="100%" class="searchtableMap" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="800" style="border-right:1px #52A6C6 solid;">
<table width="100%">
<div id="map" style="width: 800px; height: 600px"></div>
</table>
</td>
<td valign="top">
<form name="editForm" action="common/commonAction!listLocalzonexySave.action" method="post" target="editIFrame">
<table width="100%" class="contentTAble" id="contentTable">
<tr>
<th width="40">序号</th>
<th width="30">类型</th>
<th width="130">经度</th>
<th width="130">纬度</th>
<th width="40">中心点

<input type="hidden" value="" name="countryid" />
<input type="hidden" value="" name="stateid" />
<input type="hidden" value="" name="cityid" />
<input type="hidden" value="1" name="types" />
<input type="hidden" value="" name="selectzoneid" />

<input type="hidden" value="" name="updateid" />
<input type="hidden" value="" name="deleteid" />
</th>
</tr>
<tr>
   <th colspan="5" style="text-align:right;">
   <input type="button" value="绘图完成" onClick="setMapLine(1);">
<input type="button" value="保存" onClick="submit2()">
   </th>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="add_template" style="display:none">
<tr>
<td width="30"><input type="text" style="width:100%;" value="" name="localzonexy.numbers" /></td>
</tr>
<tr>
<td><select name="localzonexy.type" ><%=OptionManager.generateOptionString(OptionType.localzonexytype)%></select></td>
</tr>
<tr>
<td><input style="width:100%;" type="text" value="" name="localzonexy.jingdu" /></td>
</tr>
<tr>
<td><input style="width:100%;" type="text" value="" name="localzonexy.weidu" /></td>
</tr>
<tr>
<td><select onchange="setEdit(this);" name="localzonexy.iscenter" ><java91:genoption type="<%=OptionType.YesOrNo%>" code="8" /> </select></td>
</tr>
</table>

<table style="display: none">
<tr>
<td>
<iframe name="editIFrame" width="100%" height="800" border="0" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
<script type="text/javascript">

var mapLine=8;

function setMapLine(values){
mapLine = values;
}

function submit2(){

var table = id("contentTable");
if(table){
if(table.rows.length<=2){
alert("请绘图");
return;
}
}
if(validateByform("editForm")){
if(mapLine ==

{
alert("请点击确认绘图完成");
return;
}

var county= idname("countryid").value;
var statu = idname("stateid").value;
var city = idname("cityid").value;
var selectzone =idname("selectzoneid").value;
var types=idname("types").value;
if(isEmpty(county) || isEmpty(statu) || isEmpty(city) || isEmpty(types) || isEmpty(selectzone)){
alert(county+"|"+statu+"|"+city+"|"+selectzone+"|"+types);
alert("请选择诚市或区域");
return;
}

var iframe=id("editIFrame");
iframe.detachEvent("onload", getIframResult); //先移除事件
if (iframe.attachEvent){
iframe.attachEvent("onload", getIframResult);
} else {
iframe.onload = getIframResult;
}
mapLine=8;
editForm.submit();
}
}
function getIframResult(){
}

var suggest = new city_all();

var cityObj=id("city");
var zoneObj=id("zone");
var bizzoneObj=id("bizzone");

var cityValue="${hotel.city}";
var zoneValue="${hotel.zone}";
var bizzoneValue="${hotel.bizzone}";

function cityChange(a){
cityChangeHandle(a,zoneObj);
cityChangeHandle2(a,bizzoneObj);
id("city_id").value=a;

var stateid = getStateByCityId(a);
    var countryid = getCountryByStateId(stateid);
    setvalue("cityid",a);
    setvalue("countryid",countryid);
    setvalue("stateid",stateid);
var cityNames = getCityNameByCityId(a);
showAddress(cityNames,cityNames);
}
//城市改变下拉也改变
function cityChangAll(a){
cityChangeHandle(a,zoneObj);
id("city_id").value=a;
name("cityid").value = a;//改变
var cityNames = getCityNameByCityId(a);
if(!isNullValue(cityNames)){
     id("city_name").value=cityNames;
    }
    var stateid = getStateByCityId(a);
    var countryid = getCountryByStateId(stateid);
    setvalue("countryid",countryid);
    setvalue("stateid",stateid);
}

function mapZoneChange(zoneObj){
name("selectzoneid").value = zoneObj.value;
settypeTemplate(1);
}

function mapBizzChange(bizzObj){
name("selectzoneid").value = bizzObj.value;
settypeTemplate(2);
}
function settypeTemplate(values){
var tables = id("add_template");
if(tables){
setSelectedByObj(tables.rows[1].firstChild.firstChild,values);
//alert(tables.rows[0].cells[1].firstChild.innerHTML);
}
}

function zoneChange(a){
zoneChangeHandle(a,bizzoneObj);
}

function addRow(index){
    var table=id("contentTable");
var templateTable=id("add_template");
var newTr=table.insertRow(table.rows.length-1);
var cells=[];
var columnNum=table.rows[0].cells.length;
//newTr.id=index+1;
newTr.name=index+1;
for (var i=0;i<columnNum;i++ ){
cells[i]=newTr.insertCell(i);
cells[i].innerHTML=templateTable.rows[i].firstChild.innerHTML;
}
}
//初始化添加模版
function initTemplate(nos,jindu,weidu){
var templateTable=id("add_template");
templateTable.rows[0].firstChild.firstChild.value= nos+1;//序号
templateTable.rows[2].firstChild.firstChild.value= jindu;//经度
templateTable.rows[3].firstChild.firstChild.value= weidu;//纬度
}

function changMarkerTable(index){
var table = id("contentTable");
var trObj = null;
for(var i=0;i<table.rows.length;i++){
trObj = table.rows[i];
if(trObj.name){
if(trObj.name == index+1){
var point = markers[index].getPoint();
if(point){
trObj.cells[2].firstChild.value = point.x;
trObj.cells[3].firstChild.value = point.y;
}
continue;
}
}
}
}

function changCenterMarkerTable(point){
var table = id("contentTable");
var trObj = null;
for(var i=0;i<table.rows.length;i++){
trObj = table.rows[i];
if(trObj.name){
if(trObj.name == 89){
if(point){
trObj.cells[2].firstChild.value = point.x;
trObj.cells[3].firstChild.value = point.y;
}
continue;
}
}
}
}

function deleteMarkerTable(index){
var table = id("contentTable");
var trObj = null;
for(var i=0;i<table.rows.length;i++){
trObj = table.rows[i];
if(trObj.name){
if(trObj.name == index+1){
table.deleteRow(index+1);
changeMarkerTableIndex(index+1);
continue;
}
}
}

}
function changeMarkerTableIndex(index){
var table = id("contentTable");
var trObj = null;
for(var i=0;i<table.rows.length;i++){
trObj = table.rows[i];
if(trObj.name){
if(trObj.name >= index){
trObj.name = i;
trObj.firstChild.firstChild.value= i;//
}
}
}
}

function setIsCerter(values){
var table = id("add_template");
if(table){
setSelectedByObj(table.rows[4].firstChild.firstChild,values);
if(1 == values){
isCenter = true;
}else{
isCenter = false;
}
}
}

</script>
</html>

分享到：

googleMap.js | jstl为空

2010-08-11 22:48
浏览 1363
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

地图画线

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

地图画线

评论

发表评论

相关推荐

最近访客更多访客>>