我正在使用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
答案 0 :(得分：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.
确保您确实替换了正确的线条。这里很容易出错。
可能该文件存在，但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问题。