地图画线

最新推荐文章于 2023-12-18 12:13:54 发布

jinhj2003

最新推荐文章于 2023-12-18 12:13:54 发布

阅读量140

点赞数

分类专栏： googlemap 文章标签： Google Struts prototype

本文链接：https://blog.csdn.net/jinhj2003/article/details/83683186

版权

googlemap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@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 οnlοad="load()" οnunlοad="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;" οnclick="cityChangAll(this.value);" name="commoncity" value="70002" ><label for="70002" style="CURSOR:pointer">深圳</label>
<input type='radio' id="30000898" style="CURSOR:pointer;" οnclick="cityChangAll(this.value);" name="commoncity" value="30000898" ><label for="30000898" style="CURSOR:pointer">香港</label>
<input type='radio' id="70139" style="CURSOR:pointer;" οnclick="cityChangAll(this.value);" name="commoncity" value="70139" ><label for="70139" style="CURSOR:pointer">澳门</label>
<input type='radio' id="70011" style="CURSOR:pointer;" οnclick="cityChangAll(this.value);" name="commoncity" value="70011" ><label for="70011" style="CURSOR:pointer">广州</label>
<input type='radio' id="70030" style="CURSOR:pointer;" οnclick="cityChangAll(this.value);" name="commoncity" value="70030" ><label for="70030" style="CURSOR:pointer">三亚</label>
<input type='radio' id="70082" style="CURSOR:pointer;" οnclick="cityChangAll(this.value);" name="commoncity" value="70082" ><label for="70082" style="CURSOR:pointer">北京</label>
<input type='radio' id="70058" style="CURSOR:pointer;" οnclick="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" οnchange="javaScript:zoneChange(this.value);mapZoneChange(this);" style="width:80px" ></select>
商业区：<select id=bizzone name="hotelQueryPara.bizzone" style="width:80px" οnchange="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" οnclick="setIsCerter(this.value);"/><label for='datetyped' style='CURSOR:pointer;color:#697268'>是</label>
<input type='radio' id='datetypem' style="CURSOR:pointer;" name="iscenter" value="8" οnclick="setIsCerter(this.value);"/><label for='datetypem' style='CURSOR:pointer;color:#697268'>否</label>
</td>
</tr>
<tr>
<td colspan="6" align="right">
<input type="button" value="查询" οnclick="submit2();" style="CURSOR:pointer;" >
<input type="reset" value="重置" style="CURSOR:pointer;" >
<input type="button" value="隐藏" οnclick="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 οnchange="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 == 8){
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>