HTML5+Javascript+CSS3でGoogleMapのようなアプリを作ろうとしています。
geolocationで現在地を取得してGoogleMapAPIで表示させていますが、watchPositionを使うと細かく現在地情報を取得してマップを再描写するので画面が絶えずちらついてしまいます。
これってどうにかなりませんか?
アプリのGoogleMapみたいに自分が移動したら自分の位置は中心にあってマップがちらつかずスムーズに移動できるようにしたいです。
ちなみに以下のコードです。
まだまだ初心者なものでコードが雑ですみません。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<link href="css.css" rel="stylesheet" type="text/css"> 7<script type="text/javascript" src="/js.js"></script> 8<title>Map</title> 9</head> 10 11<body> 12 13<div id="map"></div> 14 15<script type="text/javascript" src="js.js"></script> 16 17<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFbzMe65sBcQwDf0RnX5FLJnmc4c-xNRs&callback=initMap"></script> 18 19</body> 20 21</html>
JavaScript
1var poslat; 2var poslon; 3 4// Geolocation APIに対応しているかどうかの判断 5 if( navigator.geolocation ) 6 { 7 // 現在位置を取得できる場合の処理 8 alert( "Notify the location Ver 0.1" ) ; 9 } 10 // Geolocation APIに対応していない 11 else 12 { 13 // 現在位置を取得できない場合の処理 14 alert( "あなたの端末では、現在位置を取得できないため、このアプリは利用できません。" ) ; 15 } 16 17 //ユーザーの現在の位置情報を取得 18 19 20/***** ユーザーの現在の位置情報を取得 *****/ 21 22function successFunc(position) { 23 24 25 poslat = position.coords.latitude; 26 poslon = position.coords.longitude; 27 28 map = new google.maps.Map(document.getElementById('map'), { 29 center: {lat: poslat, lng: poslon}, 30 zoom: 18 31 }); 32 33 var marker = new google.maps.Marker({ 34 position: {lat:poslat,lng:poslon}, 35 map: map, 36 //animation: google.maps.Animation.DROP, 37 icon: '1.png', 38 }); 39} 40 41/***** 位置情報が取得できない場合 *****/ 42function errorFunc(error) { 43 var err_msg = ""; 44 switch(error.code) 45 { 46 case 1: 47 err_msg = "位置情報の利用が許可されていません"; 48 break; 49 case 2: 50 err_msg = "デバイスの位置が判定できません"; 51 break; 52 case 3: 53 err_msg = "タイムアウトしました"; 54 break; 55 } 56 document.getElementById("map").innerHTML = err_msg; 57 58} 59 60 61var map; 62function initMap() { 63 64navigator.geolocation.watchPosition(successFunc, errorFunc); 65 66} 67
CSS
1html,body{ 2 width:100%; 3 height:100%; 4 margin: 0; 5 padding: 0; 6} 7 8#map { 9 height: 100%; 10}
回答1件
あなたの回答
tips
プレビュー