JavascriptでGoogleMapAPIを使い現在地を表示

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}

kei344

2016/12/04 09:00

watchPositionを使ったコードを追記ください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

successFunc関数で new google.maps.Map() を実行していますが、それ以前にマップ／マーカーを作成しておき、map.panTo( latlng ); marker.setPosition( latlng ); だけ successFunc関数で実行すれば再描画がそこまで頻繁にはならないのでは。

【panTo() - Mapクラスのメソッド | Google Maps JavaScript API v3 日本語リファレンス】
https://syncer.jp/google-maps-javascript-api-matome/map/method/panto/

【setPosition() - Markerクラスのメソッド | Google Maps JavaScript API v3 日本語リファレンス】
https://syncer.jp/google-maps-javascript-api-matome/marker/method/setposition/

投稿2016/12/04 12:03

kei344

総合スコア69398