Question

我正在使用livecode和google maps api获得2个标记和距标记的距离。 html文件在本地特殊文件夹（ios-android）上。当应用程序打开时，地图显示正确，在html文件中存在一行计算数据<body onload="calculateDistances(); "> 但我想从特定的<div id="outputDiv"></div>获取数据（calculateDistances RESULTS），但没有成功。当我把波纹管代码我得不到任何东西

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

Answer 1

为了确保我们以正确的方式做事，我制作了一个简单的测试脚本。将以下脚本放入新堆栈的卡脚本中。使用内部/外部写权限和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)。这似乎有效。您现在可以使用

替换部分HTML

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.

确保您确实替换了正确的线条。这里很容易出错。

可能该文件存在，但URL不正确。我们假设您的URL中的文件路径的格式为/mnt/volume/directory/directory/file.html。您可能必须添加http:///才能创建可在浏览器中加载的有效URL。

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

似乎在最后一行之后，将URL放入变量theURL，没有其他任何事情发生。没有用于加载URL的代码。

更新：另一个可能非常重要的事情是应用程序权限，您可以在独立应用程序设置的Android窗格中设置它。如果您还没有这样做，可能有助于选择Write External Storage和Internet。您还可以选择Fine Locations和Coarse Location选项。

我已将未经修改的HTML代码保存到文件中，并在Windows中的Firefox上打开它。这非常有效。然后我在我的MacBook（Firefox，OSX 10.6.8）上做了同样的事情并且没有用。当我在我的Android设备上尝试相同时，它再次无法正常工作。显然，这不是LiveCode问题，而是谷歌Mpas / Html问题。

从livecode中的html文件中获取数据

1 个答案: