NaviInfo_xyxyshow
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>交通信息展現</title>
<style type="text/css">
body{
margin:0;
height:80%;
width:80%;
position:absolute;
}
#mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
#tip{
height:45px;
background-color:#fff;
padding-left:10px;
padding-right:10px;
border:1px solid #969696;
position:absolute;
font-size:12px;
right:10px;
bottom:30px;
border-radius:3px;
line-height:45px;
}
#tip input[type='button']{
height:28px;
line-height:28px;
outline:none;
text-align:center;
padding-left:5px;
padding-right:5px;
color:#FFF;
background-color:#0D9BF2;
border:0;
border-radius: 3px;
margin-top:8px;
margin-left:5px;
cursor:pointer;
margin-right:10px;
}
</style>
<script type="text/javascript" src="http://www.trafficeye.com.cn/WebtAPI/wapi.js"></script>
<script>
//頁面加載完成後初始化地圖
var map;
window.onload = function(){
//實例化地圖對象
map = new WebtAPI.WMap($("mapWrapper"));
//設置地圖初始位置
var lonlat = new OpenLayers.LonLat(116.4074, 39.9046);
map.setCenterByLonLat(lonlat);
}
//繪製矢量線
function drawLine(){
//生成隨機點座標
var lon1 = 116.4074 + Math.random() / 10;
var lat1 = 39.9046 + Math.random() / 50;
var lonlat1 = new OpenLayers.LonLat(lon1, lat1);
var lon2 = 116.4074 - Math.random() / 10;
var lat2 = 39.9046 - Math.random() / 50;
var lonlat2 = new OpenLayers.LonLat(lon2, lat2);
//矢量線座標點數組
//var linePoints = [lonlat1, lonlat2];
var linePoints = new Array();//創建線覆蓋物節點座標數組
linePoints.push(lonlat1);
linePoints.push(lonlat2);
//矢量樣式
var busLine_style = WebtAPI.style["line"];
//矢量特徵對象
//WebtAPI.LineFeature(lonlatArr, lineStyle);
//lonlatArr : 座標點數組
//lineStyle ： 矢量圖形的樣式
var lineFeature = new WebtAPI.LineFeature(linePoints, busLine_style);
//把矢量特徵添加到地圖上
//map.dynamicVectorLayer爲默認地圖矢量圖層
map.dynamicVectorLayer.addFeatures(lineFeature);
}
//清空矢量特徵
function clearLines(){
map.dynamicVectorLayer.removeAllFeatures();
}
</script>
</head>
<body>
<div id="mapWrapper" style="height:80%; width:80%"></div>
<input type="button" value="繪製一條矢量線" οnclick="drawLine()">
<input type="button" value="移除所有矢量線" οnclick="clearLines()">
<script type="text/javascript">
function diag()
{
/* var str=prompt("隨便寫點兒啥吧","比如我叫啥");
if(str)
{
alert("您剛輸入的是："+ str)
}*/
alert("您剛輸入的是："+ document.getElementById("inputtxt").value);
var linePoints = new Array();//創建線覆蓋物節點座標數組
var list = document.getElementById("inputtxt").value.split(",");
for(var i=0; i<list.length; i++){
linePoints.push( new OpenLayers.LonLat( list[i], list[++i] ) );
}
//矢量樣式
var busLine_style = WebtAPI.style["line"];
//矢量特徵對象
//WebtAPI.LineFeature(lonlatArr, lineStyle);
//lonlatArr : 座標點數組
//lineStyle ： 矢量圖形的樣式
var lineFeature = new WebtAPI.LineFeature(linePoints, busLine_style);
//把矢量特徵添加到地圖上
//map.dynamicVectorLayer爲默認地圖矢量圖層
map.dynamicVectorLayer.addFeatures(lineFeature);
}
</script>
<p>
<input type="submit" value="經緯度畫線" name="Su1" οnclick="diag()" />
<input type="text" id="inputtxt" value="輸入經緯度 x,y,x,y">
</p>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章