<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>输电线路图，53156417@qq.com</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var ptArray = []; //点数组;点表示杆塔
var ppArray = []; //存点数组的数组.
var lnArray = []; //线数组,表示线路
var pt; //当前操作的点
var pointf=null; //找到的杆
var line; //当前操作的线
var index; //当前线在线数组里的索引,新线(不在数组内)索引为组长度+1
var map;
var ldkj = new google.maps.LatLng(30.51096,114.34553); //我的坐标
var img1=new google.maps.MarkerImage('.\\pole.png'); //我做的电线杆图标
var img2=new google.maps.MarkerImage('.\\pole2.png');
var newLineOptions = {
strokeColor: '#F00000',
strokeOpacity: 1.0,
strokeWeight: 2 }
var oldLineOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 1.8 }
function initialize() {
var mapOptions = {
zoom: 12,
center: ldkj,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
line = new google.maps.Polyline(newLineOptions);
index=1; //新线不在线数组内，index为数组长度0+1
line.setMap(map);
google.maps.event.addListener(map, 'click', addLatLng); // 在地图上点击，则新增一个杆
google.maps.event.addListener(map,'rightclick', save);
google.maps.event.addListener(map,'center_changed', showChange); //地图中心变化后，在经纬度输入框显示中心点坐标
}
function showChange(event){
var pos=map.getCenter();
document.getElementById("lat").value=pos.lat();
document.getElementById("lng").value=pos.lng();
}
function addLatLng(event) {
var path = line.getPath();
path.push(event.latLng); //将新增的杆加入线路中
pt = new google.maps.Marker({
draggable: true,
position: event.latLng,
title: index+'#线'+path.getLength()+'#杆',
icon: img1,
map: map
});
ptArray.push(pt);
var pptt=pt; // 增加一个引用，在此引用上编写消息响应，这一点很重要
var lline=line;
google.maps.event.addListener(lline, 'mouseover', function() {
var title=pptt.getTitle();
var n= parseInt( title.substring(0,title.search('#线')) );//此杆上标示的线号
document.getElementById("line").value=n+'#线';
document.getElementById("point").value='';
});
google.maps.event.addListener(pptt, 'dragstart', function(){
var title=pptt.getTitle();
var n= parseInt( title.substring(0,title.search('#线')) );//此杆上标示的线号
document.getElementById("line").value=n+'#线';
document.getElementById("point").value=title.substring(3);
if(n!=index){//此杆不在操作的线上
if(index>lnArray.length){
lnArray.push(line);
lnArray[lnArray.length-1].setOptions(oldLineOptions);
ppArray.push(ptArray);
}
lnArray[index-1].setOptions(oldLineOptions);
index=n;
line=lnArray[index-1];
line.setOptions(newLineOptions);
ptArray=ppArray[index-1];
}
});
google.maps.event.addListener(pptt, 'drag', function(){
var ll=pptt.getPosition();
document.getElementById("lat").value=ll.lat();
document.getElementById("lng").value=ll.lng();
});
google.maps.event.addListener(pptt, 'mouseout', function(){
var ll=pptt.getPosition();
document.getElementById("lat").value='';
document.getElementById("lng").value='';
document.getElementById("line").value='';
document.getElementById("point").value='';
});
google.maps.event.addListener(pptt, 'click', function(){
pt=pptt;
var title=pptt.getTitle();
var n= parseInt( title.substring(0,title.search('#线')) );//此杆上标示的线号
document.getElementById("line").value=n+'#线';
document.getElementById("point").value=title.substring(3);
if(n!=index){//此杆不在操作的线上
if(index>lnArray.length){
lnArray.push(line);
lnArray[lnArray.length-1].setOptions(oldLineOptions);
ppArray.push(ptArray);
}
lnArray[index-1].setOptions(oldLineOptions);
index=n;
line=lnArray[index-1];
line.setOptions(newLineOptions);
ptArray=ppArray[index-1];
}
});
google.maps.event.addListener(pptt, 'dragend', function() { //移动杆以后，重新绘制线路
pt=pptt;
line.setMap(null);
var path=line.getPath();
while(path.length>0){
path.pop();
}
for(i in ptArray){
path.push(ptArray[i].getPosition());
}
line.setMap(map);
});
google.maps.event.addListener(pptt, 'mouseover', function() {
var ll=pptt.getPosition();
document.getElementById("lat").value=ll.lat();
document.getElementById("lng").value=ll.lng();
var title=pptt.getTitle();
var n= parseInt( title.substring(0,title.search('#线')) );//此杆上标示的线号
document.getElementById("line").value=n+'#线';
document.getElementById("point").value=title.substring(3);
});
}
function save() {
if(index>lnArray.length){
lnArray.push(line);
lnArray[lnArray.length-1].setOptions(oldLineOptions);
ppArray.push(ptArray);
}else{
lnArray[index-1].setOptions(oldLineOptions);
}
line = new google.maps.Polyline(newLineOptions);
line.setMap(map);
ptArray=new Array();
index=lnArray.length+1;
}
function clearOverlays() {
if(lnArray){
for (i in lnArray) {
lnArray[i].setMap(null);
}
}
if (ppArray) {
for (i in ppArray) {
for(j in ppArray[i]){
ppArray[i][j].setMap(null);
}
}
}
}
function showOverlays() {
if(lnArray){
for (i in lnArray) {
lnArray[i].setMap(map);
}
}
if (ppArray) {
for (i in ppArray) {
for(j in ppArray[i]){
ppArray[i][j].setMap(map);
}
}
}
}
function deleteOverlays() {
clearOverlays();
if(lnArray){
lnArray.length=0;
}
if(ppArray){
ppArray.length=0;
}
if(line){
line.setMap(null);
var path=line.getPath();
while(path.length>0){
path.pop();
}
}
if(ptArray){
for(i in ptArray){
ptArray[i].setMap(null);
}
ptArray.length=0;
}
line = new google.maps.Polyline(newLineOptions);
index=1;
line.setMap(map);
}
function find(){ //按杆编号找到杆；或者按坐标将地图中心重置
var lat=document.getElementById("lat").value;
var lng=document.getElementById("lng").value;
if (lat!=''&&lng!='')
{
map.setCenter(new google.maps.LatLng(lat,lng));
} else{
var lname=document.getElementById("line").value;
var pname=document.getElementById("point").value;
if(ptArray[0].getTitle().search(lname)==0){
for(j in ptArray){
if(ptArray[j].getTitle().substring(lname.length)==pname){
if(pointf){
pointf.setIcon(img1);
}
pointf=ptArray[j];
pointf.setIcon(img2);
map.setCenter(pointf.position);
return;
}
}
}
}
}
function del(){ // 在线路上删除选定的杆，或依次删除
line.setMap(null);
var path=line.getPath();
while(path.length>0){
path.pop();
}
var p;
var find=false;
var tempArray=new Array();
while(p=ptArray.pop()){
if(!find){
if(p==pt){
find=true;
pt.setMap(null);
}else{
tempArray.push(p);
}
}else{
tempArray.push(p);
}
}
ptArray=tempArray.reverse();
pt=ptArray[ptArray.length-1];
for(i in ptArray){
path.push(ptArray[i].getPosition());
}
line.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div>
<input onclick="clearOverlays();" type=butt
hxb.rar （3个子文件） 
hxb 
pole.png 352B
hxb.html 8KB pole2.png 389B资源评论
木薯超人2014-01-14很不错，看了有许多启发
码农兼养猪2013-09-10新手，应该是可以的
车轮子cyz2012-12-29这个完全是拿了google的地图API操作，
ai数学建模
- 粉丝: 10
- 资源: 2
最新资源
- 雅居乐地产置业有限公司企业文化与福利制度培训教材（PPT 60页）.ppt
- 人力资源--伊利集团岗前培训手册(PPT 67页).ppt
- 人力资源-培训积分制度(PPT).ppT
- 某某不动产新人培训手册-新人工作培训手册（PPT 38页）.ppt
- HR工作者的心理素质完全手册.ppt
- 蓝月亮-人事专员培训操作手册(PPT 33页).ppt
- 人力资源部管理手册-培训管理办法(doc 20).doc
- 山西通达摩托车集团公司培训管理制度(doc 6页).doc
- 山东省对外经济贸易明达公司人事管理培训工作细则（DOC 7页）.doc
- 人力资源开发与培训管理制度.doc
- 永泰鑫公司员工培训手册（DOC 27页）.doc
- 员工培训计划表.doc
- 美的集团空调事业部人力资源开发与培训制度.doc
- 内部培训评估表7.7.doc
- 康佳集團培訓管理辦法.doc
- 培训需求调查表7.7.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
