javascript - 未捕获的 TypeError : $(. ..).dialog 不是函数

Question

每当我调用 markicons() 函数来打开谷歌地图时，它都会显示未捕获的类型错误:.dialog 不是函数。我不知道错误在哪里。请帮助我。我从过去 3 小时开始尝试，但是没有得到任何解决方案。

 <link href="../PurpleStyle/css/style.css" rel="stylesheet" />
 <script src="../assets/js/jquery-2.0.3.min.js"></script>
  <script src="../assets/js/jquery-ui-1.10.3.full.min.js"></script>
<link href="../assets/css/jquery-ui-1.10.3.full.min.css" rel="stylesheet"     />
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
  <script src="../PurpleStyle/js/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">    
 var map = null; var infowindow;
    function InitializeMap() {
        debugger;
        var latlng = new google.maps.LatLng(0.0, 0.0);
        if (!map) {
            var myOptions = {
                zoom: 14,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), myOptions);
        }
        else {
            map.setCenter(latlng);
        }
    }
    function markicons(listString) {

        debugger;
        InitializeMap();
        var locations = [];
        var ltlng = listString.split('~');


        for (var i = 0; i < ltlng.length; i++) {
            var loc = ltlng[i].split(",")
            var lat = parseFloat(loc[0])
            var lng = parseFloat(loc[1])
            locations.push(new google.maps.LatLng(lat, lng));
        }
        debugger;
        map.setCenter(locations[0]);
        for (var i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: locations[i]
            });

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);

        }
        var dil = $("#map").dialog({
            autoOpen: false,
            minHeight: 500,
            minWidth: 600,
            height: 500,
            width: 600,
            closeOnEscape: true,
            modal: true,
            buttons: {
                "CLOSE": function () {
                    $(this).dialog("close");
                    //$("#map").style.display = "none";
                }
            }
        });
        dil.dialog('open');
    }
   </script>

Answer 1

问题是你加载了两次 jQuery:

<script src="../assets/js/jquery-2.0.3.min.js"></script>
<script src="../PurpleStyle/js/jquery.js" type="text/javascript"></script>

加载 jQuery-UI 时，它使用第一个版本的 jQuery。但是当你的脚本运行时，它是在加载第二个版本的 jQuery 之后。所以它的 $ 变量引用了第二个 jQuery 定义，但是 jQuery-UI 更新了第一个 jQuery 定义。

如果您确实需要加载两个版本的 jQuery，则需要使用 jQuery.noConflict() 来解决您何时使用哪个版本。