Добрый день, форумчане.
Возникла очередная проблема. Есть html-файл для вывода карты Google maps:
<!DOCTYPE html>
<html>
<head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="mapControl.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script>
initMap();
</script>
</body>
</html>
Функция initMap определена в файле "mapControl.js" и все нормально, т.е. инициализация проходит и карта отображается. В файле js также есть функция setMarker которая устанавливает маркер по координатам latitude и longitude. И если вызов идет из html или же из функции initMap(), то маркер устанавливается, но если вызов происходит из файла main.qml, то пишет:
|
Код:
|
RefferenceError: google is not defined |
Вот mapControl.js:
var map;
//----------------
function initMap()
{
var latlng = new google.maps.LatLng(48.145938, 33.591423);
var mapOptions =
{
center: latlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: true,
zoomControl: true,
scaleControl: true
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
//--------------------------
function setMarker(lat, lng)
{
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
Вот main.qml:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtWebKit 3.0
import QtQuick.Layouts 1.1
import QtLocation 5.3
import QtPositioning 5.3
import "mapControl.js" as MAP
//---------------
ApplicationWindow
{
id: applicationWindow1
title: qsTr("Google Map")
width: 640
height: 480
visible: true
color: "white"
WebView
{
id: mapview
anchors.bottomMargin: 150
anchors.fill: parent
url: "index.html"
}
TextInput
{
id: textLatitude
width: 80
height: 20
text: "Широта"
font.family: "Arial"
horizontalAlignment: Text.AlignHCenter
anchors.left: layoutControlPanel.left
anchors.leftMargin: 25
anchors.top: layoutControlPanel.top
anchors.topMargin: 25
font.pixelSize: 14
}
TextInput
{
id: textLongitude
y: 419
width: 80
height: 20
text: "Долгота"
horizontalAlignment: Text.AlignHCenter
anchors.bottom: layoutControlPanel.bottom
anchors.bottomMargin: 25
anchors.left: layoutControlPanel.left
anchors.leftMargin: 25
font.pixelSize: 12
}
Button
{
id: buttonSetMarker
y: 410
text: qsTr("Установить маркер")
anchors.verticalCenterOffset: 0
anchors.verticalCenter: textLongitude.verticalCenter
anchors.left: textLatitude.right
anchors.leftMargin: 25
onClicked:
{
MAP.setMarker(textLatitude.text, textLongitude.text);
}
}
}
Подскажите пожалуйста, как можно настроить взаимодействие между html-js-qml. Спасибо.
