使用TGOS所提供的路徑規劃API 查詢後卻無法照常跑出結果

tgos asp.net c# google map

zo6fm035gp6 2021-09-11 15:04:32 ‧ 1352 瀏覽

分享至

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!--程式碼範例-->
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>TGOS MAP API 主題資料檢索</title>
<script type="text/javascript" src="http://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=x+JLVSx85Lk=&APIKey=in8W74q0ogpcfW/STwicK8D5QwCdddJf05/7nb+OtDh8R99YN3T0LurV4xato3TpL/fOfylvJ9Wv/khZEsXEWxsBmg+GEj4AuokiNXCh14Rei21U5GtJpIkO++Mq3AguFK/ISDEWn4hMzqgrkxNe1Q==" charset="utf-8"></script>
 <!--下載後請將yourID及yourkey取代為您申請所取得的APPID及APIKEY方能正確顯示服務-->
<script type="text/JavaScript" src="city.js"></script>
<script type="text/javascript"> 
var pOMap = null;
var pMap = null;
var markers = new Array();  //建立空陣列, 作為載入標記點物件的容器使用
var PhoneNums = new Array(); //建立空陣列, 作為之後存入查詢結果的電話號碼使用
var Adds = new Array();  //建立空陣列, 作為之後存入查詢結果的地址使用
var Query = new TGOS.TGAttriQuery(); //建立TGAttriQuery物件, 準備執行屬性查詢使用
var img = new TGOS.TGImage('https://api.tgos.tw/TGOSMAPAPI/images/PointPosition.png'); //建立圖示物件
var infoWindow = new TGOS.TGInfoWindow(); //建立空的訊息視窗備用
function InitWnd() {
 pOMap = document.getElementById("TGMap");
 var mapOptions = {
  disableDefaultUI: true  //關閉所有地圖介面控制項
 };
 pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826, mapOptions); //宣告TGOnlineMap地圖物件並設定坐標系統
}
function AttriQuery() {
 if (markers.length > 0) {  //假設地圖上已存在查詢後得到的標記點, 則先行移除
  for (var i = 0; i < markers.length; i++) {
   markers[i].setMap(null);
  }
  markers = [];
  PhoneNums = [];
  Adds = [];
  infoWindow.close();
 } 
 var list = document.getElementById("ResultList"); //取得右側查詢結果清單物件
 list.options.length = 0; //每次查詢先清空結果選單
 
 var city = document.getElementById("CityName"); //取得直轄市下拉選單物件
 var dist = document.getElementById("DistName"); //取得行政區下拉選單物件
 if (city.value == 0) {   //若使用者未選取行政區就進行查詢
  alert('請選擇直轄市');       //則跳出警示視窗並離開函式
  return;
 }
 var CN = city.options[city.selectedIndex].text; //取得使用者選取的直轄市名稱
 var DN = dist.options[dist.selectedIndex].text; //取得使用者選取的行政區名稱
 if (DN == '全選')  //如果使用者未選擇行政區, 則不指定行政區名稱進行全市搜尋
  DN = '';
 var KW = document.getElementById("keyword").value; //取得使用者輸入的關鍵字
 var queryRequst = {  //設定屬性查詢參數
  county: CN,
  town: DN,
  keyword: KW
 };
 //進行屬性查詢
 Query.identify(TGOS.TGMapServiceId.POLICEDEPARTMENT, TGOS.TGMapId.POLICEDEPARTMENT, queryRequst, TGOS.TGCoordSys.EPSG3826, function(result, status){
  if (status == TGOS.TGQueryStatus.ZERO_RESULTS) { //加入判斷式對查詢結果先做一次過濾
   alert('查無結果');
   return;
  } else {
   var minX = 400000;  //設定一組上下左右邊界極限值, 作為之後定位的參考
   var minY = 3000000;
   var maxX = 0;
   var maxY = 0;
   var locations = result.position; //取得圖徵坐標陣列
   var attris = result.fieldAttr;  //取得圖徵屬性陣列
   
   //-----------------------繪製查詢結果-----------------------
   for (var i = 0; i < locations.length; i++) {
    var marker = new TGOS.TGMarker(pMap, locations[i], attris[i][0], img); //將查詢結果作成標記點顯示在圖面上
    var phone = attris[i][3]; //取得標記點的電話號碼並存入陣列
    PhoneNums.push(phone);
    var add = attris[i][4]; //取得標記點的地址並存入陣列
    Adds.push(add);
    markers.push(marker);  //將所有標記點加入陣列markers
    list.options[i] =new Option(attris[i][0],""); //將查詢後的單位名稱寫入網頁右側的結果清單內
    
    //-----------------------於標記點加上滑鼠點擊事件監聽器-----------------------
    TGOS.TGEvent.addListener(marker, "click", function (event) {
     var MarkerTitle = event.target.getTitle();   //點擊事件發生後利用target取得被綁定的標記點(TGMarker), 再利用方法getTitle()來取得標記點的標題
     for (var j = 0; j < list.options.length; j++) { //使用迴圈比對被點擊的標記點的標題名稱與右側列表的所有點位名稱
      if (list.options[j].text == MarkerTitle) {  //若比對一致, 則反白右側選單內的該項目
       list.options[j].selected = true;
       
       //-----------------------開啟訊息視窗-----------------------
       var infoOptions = {
        position: event.target.getPosition(),
        maxWidth: 250,
        pixelOffset: new TGOS.TGSize(5, -30)
       };
       infoWindow.setOptions(infoOptions);
       infoWindow.setContent(MarkerTitle + '<br>電話: ' + PhoneNums[j] + '<br>地址: ' + Adds[j]);
       infoWindow.open(pMap);
       break;
      }
     }     
    });
    
    if (locations[i].x < minX) {minX = locations[i].x;}  //取出所有結果點位集合的上下左右邊界值,
    if (locations[i].x > maxX) {maxX = locations[i].x;}  //與先前設定的邊界極限值做比較.
    if (locations[i].y < minY) {minY = locations[i].y;}  //之後得到所有結果點位的邊界最大最小值
    if (locations[i].y > maxY) {maxY = locations[i].y;}
   }
   pMap.fitBounds(new TGOS.TGEnvelope(minX, maxY, maxX, minY)); //以所有結果點位的邊界值進行地圖縮放
   pMap.setZoom(pMap.getZoom()-1);
  }
 });
}
function Select() {
 var list = document.getElementById("ResultList");  //取得右側查詢結果清單物件
 var SelectText = list.options[list.selectedIndex].text;//取得選取項目的文字字串
 for (i = 0; i < markers.length; i++) {
  if (markers[i].getTitle() == SelectText) {   //以選取的文字和每個標記點的title做比對
   pMap.setCenter(markers[i].getPosition());  //若文字一致則以該標記點進行地圖平移縮放
   pMap.setZoom(13);
   //-----------------------開啟訊息視窗-----------------------
   var infoOptions = {
    position: markers[i].getPosition(),
    maxWidth: 250,
    pixelOffset: new TGOS.TGSize(5, -30)
   };
   infoWindow.setOptions(infoOptions);
   infoWindow.setContent(markers[i].getTitle() + '<br>電話: ' + PhoneNums[i] + '<br>地址: ' + Adds[i]);
   infoWindow.open(pMap);
   break;
        }
 }
}
</script>            
</head>
<body style="margin:0px" onload="InitWnd();">
 <div id="TGMap" style="width:640px; height:480px; border: 1px solid #C0C0C0;"></div>
 <select id="ResultList" size="15" style="position:absolute; height:480px; width:180px;top:0px; left:645px;" onchange="Select();"></select>
 <form name="CodeForm">
  直轄市：<select id="CityName" name=type size=1 onChange="CityList(this.options[this.options.selectedIndex].value);">
   <option value="0">請選擇...</option>
   <option value="1">臺北市</option>
           <option value="2">新北市</option>
           <option value="3">臺中市</option>
           <option value="4">臺南市</option>
           <option value="5">高雄市</option>
  </select>
  市轄區：<select id="DistName" name=subtype size=1>
   <option value="0">全選</option>
  </select>
  電器行關鍵字：<input type="text" id="keyword" size=5/>
  <input type="button" value="查詢" onclick="AttriQuery();"/>
 </form>
</html>

以上是照著TGOS MAP API寫出來的CODE
但放在VS的Webform表單卻無法查詢成功
看不出來是程式出錯?還是不能裝在VS裡?