Fatal编程技术网
  • jquery/
  • JQuery和Google Maps JS api不在一起工作

JQuery和Google Maps JS api不在一起工作

jquery google-maps-api-3

JQuery和Google Maps JS api不在一起工作,jquery,google-maps-api-3,spring-roo,google-fusion-tables,Jquery,Google Maps Api 3,Spring Roo,Google Fusion Tables,我真的很难在同一块中同时使用谷歌地图API和JQuery API。。我的页面是jspx（Spring），我需要JQuery，以便获取和解析google fusion表数据 但是，当我同时声明这两个库时，map div将不会加载（如果我单独加载GoogleMaps，所有映射都可以正常工作） 以下是相关代码： <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"/>

我真的很难在同一块中同时使用谷歌地图API和JQuery API。。我的页面是jspx（Spring），我需要JQuery，以便获取和解析google fusion表数据

但是，当我同时声明这两个库时，map div将不会加载（如果我单独加载GoogleMaps，所有映射都可以正常工作）

以下是相关代码：

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"/>
                    <script src="http://maps.googleapis.com/maps/api/js?v=3key=MYKEY&amp;sensor=false" type="text/javascript">
                        <jsp:text/>
                    </script>
                    <script type="text/javascript">
        //<![CDATA[ 
            var map;

function initialize() {
         var mapDiv = document.getElementById('map_canvas');
         var geocoder = new google.maps.Geocoder();
         retrieveDeprivationFigure();
          if (geocoder) {
             geocoder.geocode({ 'address': '${property.postcode}' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng())
                var mapOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                  };

                map = new google.maps.Map(document.getElementById('map_canvas'),
                        mapOptions); 
}

        function retrieveDeprivationFigure(){
                var postcode = '${property.postcode}'.split(' ').join('');
                var url = "https://www.googleapis.com/fusiontables/v1/query?sql=SELECT LSOA FROM XXXXXXXX WHERE Postcode='"+ postcode +"'&key=AIzaSyBQaHw1aSWtIjQzAiriBPC3hvm7Bs1R35U&jsonCallback=?";
                var localIMDS;
                console.log("this far");
                $.getJSON(url,
                        function retrieveIMDS(){
                    console.log(url);

                });
         };

  google.maps.event.addDomListener(window, 'load', initialize);   
         // ]]>
</script>   


//
任何指针或想法都会对我有很大帮助，我甚至尝试在单独的JS块中通过JQuery检索剥夺状态，但是尽管我做了很多努力，在页面加载时没有调用该函数。

您缺少第一个脚本的结束标记，包括：
应该是：

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" ></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
（任何一个订单都应该有效，并且在没有版本规范和&key=MYKEY的情况下也应该有效，只是注意到您也缺少&before key=MYKEY）

感谢指导人员，但是我通过创建一个head并在head文件中声明jQuery来对冲突和问题进行排序，把谷歌src留在原来的地方

 <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
 <script type="text/javascript">

 </script>
 </head>
再次感谢

检查您的控制台是否有错误，并尝试将其输入到…@adeneo中。我已经检查了控制台中的错误，它显示“未捕获引用错误：未定义google”，并指向行“google.maps.event.addDomListener（窗口，‘加载’，初始化）..我还通过fiddle运行了我的代码，它说我的javascript都是有效的..一个正在运行的JSFIDLE会让我们看看为什么会出现这个错误。api中的“”包含标记的目的是什么？老实说，我不记得为什么我把它放在那里了，但是没有它，更不管用：lI更改了两个api调用的顺序，但是现在我得到了错误“未捕获引用错误：$未定义“ 
 <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
 <script type="text/javascript">

 </script>
 </head>