晴れ時々Tizen調査チームの千原です。こんにちは。
Tizenパッケージビルドはなかなかうまく行かないので、Tizen2.0SDKで何か出来ないかと模索した結果、WebアプリケーションとNativeアプリケーションを作成してみることにしました。
TizenのWebアプリケーションはHTML5+JavaScriptです。NativeアプリケーションはC++になります。
HTML5であれば、Google Maps JavaScript API v3が簡単に利用できるみたいです。
また、Tizenのエミュレーターにはまだ地図アプリが入っていないので、地図アプリを作成してみました！
まず一番シンプルなProjectを作成します。
Tizen Web ProjectのBasicのBlank Applicationを選択します。
index.html、style.css、main.jsを書き換えていきます。
style.css
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="A Tizen Web UI FW single-page template generated by Tizen Web IDE"/>
<title>MapViewer Test</title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&sensor=true&language=ja"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>※GOOGLE_API_KEYは個別に取得して設定する必要があります。
main.js
var map;
var markerA;
var markerB;
var imageA;
var imageB;
var directionRenderer;
var directionService;
function route() {
// マーカーが2つあるときにルート検索
if (markerA && markerB) {
var request = {
origin: markerA.getPosition(),
destination: markerB.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
optimizeWaypoints: true,
avoidHighways: false,
avoidTolls: false
};
directionsService.route(request, function(response, status) {
if (google.maps.DirectionsStatus.OK == status) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
}
});
}
}
function dragAction(event) {
route();
}
function clickAction(event) {
// 両方のマーカーがあるときは、マーカーとルートを初期化する
if (markerA && markerB) {
markerA.setMap(null);
markerA = null;
markerB.setMap(null);
markerB = null;
directionsDisplay.setMap(null);
}
// マーカーAがあるときはマーカーBの設定
if (markerA && !markerB) {
var option = {
position: event.latLng,
draggable: true,
map: map,
icon: imageB
};
markerB = new google.maps.Marker(option);
//マーカードラッグイベントの登録
google.maps.event.addListener(markerB, 'dragend', dragAction);
}
// マーカーAの設定
else {
var option = {
position: event.latLng,
draggable: true,
map: map,
icon: imageA
};
markerA = new google.maps.Marker(option);
//マーカードラッグイベントの登録
google.maps.event.addListener(markerA, 'dragend', dragAction);
}
// ルート検索を実施
route();
}
function initialize() {
// 地図の生成
var styles = [{stylers: [{hue: "#003388"}, {saturation: -40}]},
{
featureType: "road",
elementType: "labels",
stylers: [{visibility: "off"}]
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{saturation: -40}]
}];
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
// 初期位置は東京駅を中心に設定
var option = {
center: new google.maps.LatLng(35.681111, 139.766667),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
scaleControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// マーカーのアイコンを読み込む
imageA = {
url: 'WebContent/icon1.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 32)
};
imageB = {
url: 'WebContent/icon2.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 32)
};
// ルート検索サービスの設定
var polylineOption = {
strokeColor: "#ff4422",
strokeWeight: 5,
strokeOpacity: 0.6
}
var renderOption = {
draggable: true,
preserveViewport: false,
suppressMarkers: true,
polylineOptions: polylineOption
};
directionsDisplay = new google.maps.DirectionsRenderer(renderOption);
directionsService = new google.maps.DirectionsService();
// イベントリスナー登録
google.maps.event.addListener(map, 'click', clickAction);
}Googleのサンプルコードを参考にして作りました。
不要なコードでエラーになっていて、ルートが表示できないところで少しハマりましたが、結構簡単に作成できました。
ルート結果から距離とか時間も取れるようなので、カスタマイズすれば実用レベルのものになりそうです！
地図のスタイルはデフォルトから変更して、青系に変えてあります。（Tizenのイメージカラーが青なので）
マーカーのアイコンも変更してあります。（猫が好きなので・・・）
ルートが蛇行しているのは、寄り道ポイントを設定しているからで、ルート検索がバグっている訳ではありません(・ω・)
プロフィール
PR:無料HP
米沢ドライビングスクール
請求書買取 安全
ＩＴ 専門学校
18インチタイヤを探す
タイヤ 選ぶなら
タイヤ 軽カー
東京 専門学校
22インチ ホイール
マラカイト
心理学部 大学
株マイスター 悪徳
プリウス 中古
バイアグラ 効果