Q&A
回答の通り表示してからの移動としてみたところスムーズに表示されるようになりました。ありがとうございます(*´ڡ`●)
Google Maps JavaScript API V3を使用して
以下のコードでWEB上にgoogle mapを表示させたのですが、
スマートフォンでの表示に20秒程要してしまいます。
何が問題なのでしょうか。
javascript
1if ("geolocation" in navigator) { 2 navigator.geolocation.getCurrentPosition(function(geo){ 3 var opts = { 4 zoom: 20, 5 center: new google.maps.LatLng(geo.coords.latitude , geo.coords.longitude) , 6 styles : 7 [{ "stylers": 8 [ 9 {"hue": "#000000"}, 10 {"gamma": 0.07}, 11 {"lightness": -3}, 12 {"saturation": -100} 13 ], 14 "elementType": "all", 15 "featureType": "all" 16 }] 17 }; 18 var map = new google.maps.Map(document.getElementById("map"), opts); 19 var latlng = new google.maps.LatLng(geo.coords.latitude , geo.coords.longitude); 20 }) 21 } else { 22 console.log('no') 23 }
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Style-Type" content="text/css"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=no"> 7 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 8 </head> 9 <body> 10 <div id="map"> 11 </div> 12 </body> 13 <script type="text/javascript" src="welcome.js"></script> 14 <script async defer 15 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJ6RkLB1-ecNEaWO-y7cZeO_WDfOZEdjI&callback=run"> 16 </script> 17</html>
回答2件
0
html
1<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
この行は不要でしょう。
投稿2017/02/05 05:50
総合スコア4267
0
ベストアンサー
試しに navigator.geolocation.getCurrentPosition のコールバックではなく表示してから移動してみては？
どこで時間がかかっているかを計測するのが良いと思います。
【Map.setCenter() - 位置座標をセットする】
https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/setCenter/
【Map.panTo() - 位置座標を絶対的に移動する】
https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/panTo/
投稿2017/02/05 05:32
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/02/05 05:56