2014-09-02 67 views
1

我使用livecode和google地图api获取2个标记和距标记的距离。 html文件位于本地特殊文件夹(ios-android)。当应用程序打开时,地图显示正确,在html文件上存在一行来计算数据<body onload="calculateDistances(); "> 但我想获取数据(calculateDistances结果)来自特定<div id="outputDiv"></div>没有成功。 当我把娄代码我得到什么从livecode中的html文件中提取数据

put url theURL into tMap 

,或者如果我把娄代码我得到的文件路径

put url "url",theURL into tMap 

这里是代码livecode部分

global myarray 
Global browserID 
Global theUrl 
global tTitles 
global thehtmlFile 
global theData 

on preopencard 
     if the environment is not "mobile" then exit preopencard 
       -- Create our browser control and store the id 
          mobileControlCreate "browser" 
    put the result into BrowserID 
    mobileControlSet browserID, "rect", the rect of group "tbrowser" 
    mobileControlSet browserID, "visible", "true" 
    mobileControlSet BrowserID, "url", theURL 
    set the text of fld "content" to theData 


end preOpenCard 

on closeCard 
    put empty into fld "lat" of card drecords 
    put empty into fld "long" of card drecords 

   if the environment is not "mobile" then 
          exit closeCard 
   end if 
   -- Destroy the control, if we fail to do this native UIViews 
   -- will just accumulate 
          mobileControlDelete BrowserID 
    delete URL("file:" & thehtmlFile) 

end closeCard 

这里是我正在使用的html代码

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- <title>Distance Matrix service</title> --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&language=el&sensor=false"></script> 
    <style> 
     html, body { 
     height: 100%; 
    margin: 0; 
    padding: 0; 
      } 
     #map-canvas { 
    height: 99%; 
    width: 100%; 
     } 
     #content-pane { 
    width: 100%; 
     } 
     #outputDiv { 
    font-size:smaller; 
    position: relative; 
    bottom: 60px; 
     } 
    </style> 
    <script> 
var map; 
var geocoder; 
var bounds = new google.maps.LatLngBounds(); 
var markersArray = []; 
var origin1 = new google.maps.LatLng(38.078459, 23.734718); 
var destinationA = new google.maps.LatLng(38.078833, 23.736843); 
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|FF0000|000000'; 
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=M|FFFF00|000000'; 
function initialize() { 
    var opts = { 
    center: origin1, 
    zoom: 10, 
    disableDefaultUI: true 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), opts); 
    geocoder = new google.maps.Geocoder(); 
} 
function calculateDistances() { 
    var service = new google.maps.DistanceMatrixService(); 
    service.getDistanceMatrix(
    { 
     origins: [origin1,], 
     destinations: [destinationA,], 
     travelMode: google.maps.TravelMode.WALKING, 
     unitSystem: google.maps.UnitSystem.METRIC, 
    }, callback); 
} 

function callback(response, status) { 
    if (status != google.maps.DistanceMatrixStatus.OK) { 
    alert('Error was: ' + status); 
    } else { 
    var origins = response.originAddresses; 
    var destinations = response.destinationAddresses; 
    var outputDiv = document.getElementById('outputDiv'); 
    outputDiv.innerHTML = ''; 
    deleteOverlays(); 
    for (var i = 0; i < origins.length; i++) { 
     var results = response.rows[i].elements; 
     addMarker(origins[i], false); 
     for (var j = 0; j < results.length; j++) { 
     addMarker(destinations[j], true); 
     outputDiv.innerHTML += origins[i] + ' to ' + destinations[j] 
      + ': ' + results[j].distance.text + ' in ' 
      + results[j].duration.text + '<br>'; 
     } 
    } 
    } 
} 

function addMarker(location, isDestination) { 
    var icon; 
    if (isDestination) { 
    icon = destinationIcon; 
    } else { 
    icon = originIcon; 
    } 
    geocoder.geocode({'address': location}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     bounds.extend(results[0].geometry.location); 
     map.fitBounds(bounds); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     icon: icon 
     }); 
     markersArray.push(marker); 
    } else { 
     alert('Geocode was not successful for the following reason: ' 
     + status); 
    } 
    }); 
} 

function deleteOverlays() { 
    for (var i = 0; i < markersArray.length; i++) { 
    markersArray[i].setMap(null); 
    } 
    markersArray = []; 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="content-pane"> 
     <div id="inputs"> 
     </div> 
    <body onload="calculateDistances(); "> 
     </div> 
    <div id="map-canvas"></div> 
    <div id="outputDiv"></div> 
    </body> 
</html> 

我已更新代码以显示文件如何加载到特殊文件夹中。

global myarray 
Global browserID 
Global theUrl 
global tTitles 
global thehtmlFile 
global theData 


on opencard 
    dbArrayToCard myarray 
        # quit if we are not on a mobile device 
        if the environment is not "mobile" then exit opencard 

    #Store Location 
    put fld"lat"& comma & fld"long" into Store_lng 
    if fld"lat"or fld"long" is empty then 
    //if store_lng is empty then 
    answer error "No Gps Data" 
    Answer "NOT able to track GPS location" 
    end if 
      
    #current location 
    //wait 2000 millisecs 
    put mobileCurrentLocation() into tLocation 
    put tLocation["latitude"] into fld "Dlat" 
    put tLocation["longitude"] into fld "Dlong" 
    put fld"Dlat"& comma & fld"Dlong" into lat_lng 


    if lat_lng is empty then 
    answer error "NOT able to track GPS location" 
    end if 


    put specialFolderPath("documents") & "/navi2.html" into documentFilePath 
         if there is not a file documentFilePath then 
              put specialFolderPath("engine") & "/navi2.html" into engineFilePath 
              put URL ("binfile:" & engineFilePath) into URL ("binfile:" & documentFilePath) 
         end if 

    put specialFolderPath("documents") & "/navi2.html" into thehtmlFile 
            put URL("file:" & thehtmlFile) into theData 
            
    put "var origin1 = new google.maps.LatLng(" & lat_lng & ");" into line 30 of theData 
    put "var destinationA = new google.maps.LatLng(" & Store_lng & ");" into line 31 of theData 
    put "zoom:17," into line 37 of theData 

    put theData into URL ("file:" & thehtmlFile) 
      put "file://" & specialFolderPath("documents") & "/navi2.html" into theURL 
            replace space with "%20" in theURL 

end OpenCard 
+0

您的LiveCode脚本不包含任何尝试从HTML文件获取数据的语法。你的意思是你想要在浏览器控件中加载一个本地文件吗? – Mark 2014-09-02 22:54:28

+0

一边的问题。你为什么不在'fld'和字段名称之间加空格?例如。 'fld“Lat”'而不是'fld“Lat”'? – Mark 2014-09-03 12:20:06

+1

该代码是暂时的格式尚未;) – johnnyB 2014-09-03 13:20:26

回答

0

为了确保我们正确地做事情,我做了一个简单的测试脚本。将以下脚本放入新堆栈的卡片脚本中。使用内部/外部写入权限和Internet权限保存堆栈(只是为了确保我们可以访问它;我甚至不知道这个测试是否真的有必要)。

global gBrowserID 

on openCard 
    put "<html><body>it works</body></html>" into myHtml 
    put specialFolderpath("documents") & "/test.html" into myFile 
    put myHtml into url ("binfile:" & myFile) 
    put the result into rslt 
    if rslt is not empty then 
      beep 
      answer rslt 
    else 
      put "file:///" & myFile into myUrl 
      if there is a file myFile then 
       mobileControlCreate "browser" 
       put the result into gBrowserID 
       mobileControlSet gBrowserID,"rect",the rect of this cd 
       mobileControlSet gBrowserID,"visible",true 
       mobileControlSet gBrowserID,"url",myUrl 
      else 
       beep 
       answer "Can't find" && myFile 
      end if 
    end if 
end openCard 

现在将其安装在您的Android设备上或在仿真器中运行堆栈。它应该显示一个带有“it works”字样的浏览器。如果它不起作用,您应该看到一条错误消息。

测试此示例后,我将HTML代码存储在自定义属性中,并将put myHtml into url ("binfile:" & myFile)替换为put the cMapHtml of this stack into url ("binfile:" & myFile)。这似乎工作。现在,您可以使用

put the cMapHtml of this stack into myHtml 
put "var origin1 = new google.maps.LatLng(" & lat_lng & ");" into line 30 of myHtml 
put "var destinationA = new google.maps.LatLng(" & Store_lng & ");" into line 31 of myHtml 
put "zoom:17," into line 37 of myHtml 
put specialFolderpath("documents") & "/test.html" into myFile 
put myHtml into url ("binfile:" & myFile) 
// etc. 

只要确保你真正取代正确的行替换HTML的部分。在这里犯错很容易。


可能是文件存在,但URL不正确。假设您的URL中的文件路径格式为/mnt/volume/directory/directory/file.html。您可能需要添加http:///才能创建可在浏览器中加载的有效网址。

on preopencard 
    if the environment is not "mobile" then exit preopencard 
    if there is a file theURL then 
    repeat until char 1 to 3 of theURL is "///" 
     put "/" before theURL 
    end repeat 
    put "http:" before theURL 
    mobileControlCreate "browser" 
    put the result into BrowserID 
    mobileControlSet browserID, "rect", the rect of group "tbrowser" 
    mobileControlSet browserID, "visible", "true" 
    mobileControlSet BrowserID, "url", theURL 
    else 
    answer error "Can't find file" 
    end if 
    set the text of fld "content" to theData 
end preOpenCard 

该处理程序首先检查文件是否存在,然后调整URL使其成为有效的URL。如果该文件不存在,则显示错误消息。

你更新的代码包含

put "file://" & specialFolderPath("documents") & "/navi2.html" into theURL 
replace space with "%20" in theURL 

几乎在最后。

尝试使用3斜杠而不是2.我不确定您是否真的需要用%20替换空间。有时候,这会被编码为%2520。我会再次尝试,无论是有没有替换空格。

put "file:///" & specialFolderPath("documents") & "/navi2.html" into theURL 
replace space with "%20" in theURL 

看来,这最后的线,把网址为可变后theURL,没有什么事情发生。没有代码来加载URL。

更新:另外一个其他可能很重要的事情是应用程序的权限,你可以在独立的应用程序设置了Android窗格中设置。如果您还没有选择Write External StorageInternet,可能会有帮助。还有选项和Coarse Location,您可能也希望包含这些选项。


我已将未修改的HTML代码保存到文件并在Windows中的Firefox中打开它。这工作完美。然后我在我的MacBook(Firefox,OSX 10.6.8)上也做了同样的事情,但是这并没有奏效。当我在我的Android设备上尝试相同的功能时,它又无法工作。显然,这不是一个LiveCode问题,而是一个谷歌的Mpas/Html问题。

+0

嗨马克,感谢您的时间..我在模拟器上“无法找到文件”。我有**更新**我的代码上面如何加载我的文件该设备(模拟器) – johnnyB 2014-09-03 11:51:56

+0

我已经更新了我的答案。请尝试再次更新您的代码。 – Mark 2014-09-03 12:30:23

+0

我已经测试过了,如果我在URL中删除'用%20替换空间'那么我会得到空的地图,我已经用3替换了2个斜线,结果仍然是一样的:(我包括照片我没有改变我的代码。底部的黑色字母是我想从服务器获取的信息[链接](http://i60.tinypic.com/28k0cg5.png) – johnnyB 2014-09-03 13:15:45