0

divページ上に常にマップコンテナーがあります。

<div id="map_canvas"></div>

最初は、これを ajax コールバックでも DOM に追加しようとしていましたが、問題があったため、今のところ静的にすることにしました。

jquery ajaxコールバックからマップを初期化しようとしています

...
complete: function(data) {
    // build the map
    $.getScript("http://maps.google.com/maps/api/js?v=3&libraries=geometry&sensor=false&region=uk&async=2&callback=MapApiLoaded", function () {});     
    running = false;

    if(running) return false;
    running = true;
    setMarkers();
    flightPath.setMap(null); // Remove polyline
    flightPathProgress.setMap(null); // Remove polyline

    setTimeout(function() {
        flightPath.setMap(map);
        flightPathProgress.setMap(map);
        flightPathProgress.setOptions({
            strokeOpacity: 0
    });

    var progress = 0;
    var intvl = setInterval(function(){
        progress += 0.01;
        if(progress > 1) { 
            clearInterval(intvl);
            running = false;
         } else {

         }

         // Calc progress
         var progressLatLng = google.maps.geometry.spherical.interpolate(userlatlng, serverlatlng, progress);
         // Update polyline
         flightPathProgress.setOptions({
             strokeOpacity: progress,
             path: [userlatlng, progressLatLng]
         });
     }, 50);
     }, 1000);
 }

また、ドキュメント準備機能の外に次のものがあります

var map;
var serverlatlng;
var userlatlng;
var servermarker;
var usermarker;
var flightPath;
var flightPathProgress;
var running;

function MapApiLoaded() {
    serverlatlng = new google.maps.LatLng(34.0625, -118.123);
    userlatlng = new google.maps.LatLng(54.167, -4.48211);
    var centerlatlng = new google.maps.LatLng(44.0835, -61.241055);

    // Create the map
    var myOptions = {
        center: centerlatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        panControl: false,
        zoomControl: false,
        streetViewControl: false,
        mapTypeControl: false
     };

     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     // Centre map on user and server locations
     var bounds = new google.maps.LatLngBounds();
     bounds.extend(serverlatlng);
     bounds.extend(userlatlng);
     map.fitBounds(bounds);

     // The grey outline path
     flightPath = new google.maps.Polyline({
         path: [userlatlng,serverlatlng],
         strokeColor: "#666",
         strokeOpacity: 0.5,
         strokeWeight: 4,
         geodesic: true,
         zIndex: 1
      });

      // The red progress path
      flightPathProgress = new google.maps.Polyline({
          path: [userlatlng,userlatlng],
          strokeColor: "#ff0000",
          strokeOpacity: 0,
          strokeWeight: 4,
          geodesic: true,
          zIndex: 2
      });
}

function setMarkers() {
    if(servermarker != undefined) servermarker.setMap(null); // Remove marker if exists
    servermarker = new google.maps.Marker({
    position: serverlatlng, 
    map: map, 
    title:"Server",
    animation: google.maps.Animation.DROP,
    icon: 'images/marker.png'
});  

    if(usermarker != undefined) usermarker.setMap(null); // Remove marker if exists
    usermarker = new google.maps.Marker({
        position: userlatlng, 
        map: map, 
        title:"User",
        animation: google.maps.Animation.DROP,
        icon: 'images/marker.png'
    }); 
}

表示されるエラー メッセージはUncaught TypeError: Cannot read property 'Marker' of undefined.

完全な拡張メッセージは次のとおりです。

Uncaught TypeError: Cannot read property 'Marker' of undefined     
www.domain.co.uk/:345
setMarkers www.domain.co.uk/:345
$.ajax.complete www.domain.co.uk/:242
fire jquery.js:3064
self.fireWith jquery.js:3176
done jquery.js:8259

コールバック`

4

5 に答える 5

5

どうやらこれは、新しい Google マップの更新のバグです。新しいバージョンのマップを持っているユーザーにのみ影響があるようです。それらの場合、Google API コード サンプルでもマーカーは表示されません: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

開発者コンソールには Uncaught TypeError: Type エラーが表示されます

Google からログアウトして同じページにアクセスすると、マーカーが表示される可能性が最も高くなります。

于 2013-06-01T05:54:17.630 に答える
5

API が読み込まれる前に、Google Maps API コンストラクターを google.maps.Marker に使用しようとしています。

更新: setMarkers 関数は、API が読み込まれる前に実行されています。

于 2013-05-29T14:15:12.490 に答える
5

このURLの最後からジオメトリが欠落していたため、これを解決しました

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?    v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>
于 2014-08-01T18:13:06.550 に答える
1

ビジネス アカウントを持っていない場合は、サーバーの次の応答に起因する次のエラーが発生する可能性もあります。

{
 "error_message" : "You have exceeded your rate-limit for this API.",
 "results" : [],
 "status" : "OVER_QUERY_LIMIT"
}

つまり、1 日に API をロードする回数が多すぎるか、集中しすぎているか、多くのアドレスをロードしようとしています。サーバーの応答を確認し、それが得られるかどうかを確認します。

この特定の応答によっても、このエラーが発生します。

Uncaught TypeError: Cannot read property 'geometry' of undefined

ここでは、役立つヒントをいくつか見つけることができます。https://developers.google.com/maps/documentation/business/articles/usage_limits

于 2015-10-09T10:19:22.133 に答える
0

$.getScript を使用するのではなく、「script」タグを使用して JS Google マップ API をロードする必要があると思います。

jQuery API ドキュメント ( http://api.jquery.com/jQuery.getScript/ ) によると、getScript は GET HTTP 要求を使用してサーバーから JavaScript ファイルをロードし、それを実行します。

これはおそらく、Gmaps JS API をロードする正しい方法ではありません。GMaps API のドキュメントには、「スクリプト タグに含まれる URL は、Google Maps API を使用するために必要なすべてのシンボルと定義をロードする JavaScript ファイルの場所です。このスクリプト タグは必須です .. [JS API を非同期に読み込む] には、window.onload イベントまたは関数呼び出しに応答して独自のタグを挿入できますが、Maps JavaScript API ブートストラップに、Maps JavaScript API ブートストラップに、Maps が終了するまでアプリケーション コードの実行を遅らせるように指示する必要があります。 JavaScript API コードが完全に読み込まれました. API の読み込みが完了したときに実行する関数を引数として取るコールバック パラメータを使用して行うことができます."

ここで gmaps API ドキュメントを見ることができます: https://developers.google.com/maps/documentation/javascript/tutorial

私の場合は、次のようにしました。これを機能させるには、コールバック パラメータが必要であることに注意してください。

function initializeGmaps() {}
$(document).ready(function() {
  $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGmaps"><\/script>'); 
});
于 2013-10-24T23:48:27.137 に答える