0

私はjquery-ui-map 3.0 RCを使用して、jsonを使用してjavascript api v3を使用してGoogleマップにマーカーを配置するプロセスを簡素化しています。

html ファイルを使用してプロトタイプを作成したところ、問題なく動作しました。MVC4 プロジェクト内で埋め込みコードを使用し、iis express を使用してデバッグを開始すると、Google Chrome 開発者ツールで「Uncaught TypeError: Object [object Object] has no method 'gmap'.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYBROWSERAPIKEYISHERE&sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.map.js"></script>
<script type="text/javascript" src="../../Scripts/gmap3.js"></script>
<script type="text/javascript">


$(document).ready(function () {
    initialize();
});

function getMarkers() {
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON('../../Data/Australia-WA-Perth.json', function (data) {
        $.each(data.markers, function (i, marker) {
            $('#map_canvas').gmap('addMarker', {
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'bounds': true
            }).click(function () {
                $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
}

function initialize() {
    var pointCenter = new google.maps.LatLng(-31.95236980, 115.8571791);

    var myMapOptions = {
        zoom: 17,
        center: pointCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP  //TERRAIN
    };

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

    google.maps.event.addListenerOnce(map, 'idle', function () {
        getMarkers();
    });

}
</script>
4

3 に答える 3

2

gmap3 をインクルードしていますが、 を呼び出してい.gmap(...)ます。gmap3 ドキュメントの例では、.gmap3(...).

google.mapsまた、標準API でマップを初期化し、gmap3 でマーカーなどを追加できるという証拠は見つかりません。

私が知る限り、少なくともあなたが試みている方法では、2 つの API を混在させるメカニズムはありません。

このように 2 つの API を混在させる仕組みがあれば、何らかの形で gmap3 に がmap返す変数を通知する必要がありそうですnew google.maps.Map(...);。それ以外の場合、gmap3 には既に確立されているマップに対処する手段がないと思います。

そのため、1 つの API を 100% 使用するか、別の API を 100% 使用するようにコードを書き直してみてください。

于 2012-10-19T02:24:03.540 に答える
0

同じ問題が発生し、複数の jquery 参照が原因であることがわかりました。

私の _layout.cshtml は、本文セクションの次の行を介して jquery をロードしていました: @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)

これは、私の見解で持っていた参照を効果的に上書きしていたようです。参照を 1 か所だけにロードすることが望ましいため、ビューから削除しましたが、jQuery が定義されていないというエラーが発生しました。@Scripts.Render を body セクション (nuget によってそこに配置) からセクションに移動する必要があり、すべてが正常に機能しました。

したがって、同じエラーが発生した場合は、ページを表示して「ソースを表示」を実行してください。複数の jquery スクリプト参照があるかどうかを確認します。

このスレッドは私に手がかりを与えました： GoogleのマップAPIを使用する場合、「gmapは関数ではありません」

于 2012-12-11T01:11:26.927 に答える
0

問題は、Google マップがまだ準備できていない可能性があります。jQuery 対応の関数を使用しましたが、代わりに両方を組み合わせて使用​​することをお勧めします。

さらに調査できるように、フィドルまたは例を投稿してください

于 2012-10-19T00:37:28.460 に答える