2013-02-06 62 views
2

我正在通过JSON提取标记数据。 当我发展我的本地副本我在一个JS文件了这一点,并说这就是用获取JSON以使用Google Maps API 3

<script src="assets/js/locations.js"></script> 

我现在移动网站到CMS(ExpressionEngine),也因为标记数据是动态的,我有一个JS现在拥有JSON数据的模板。

我现在必须包括该文件作为(注意,没有文件扩展名)

<script src="http://domain.com/map/locations"></script> 

这里是JSON我有一个例子。

var locations = [ 

    [2, 51.39006, -0.02976, 'telecommunications', 'Test 2', '<div><img src="http://localhost/map/assets/graphics/info_window/default.jpg" alt="Test 2" width="105" height="70" style="float:right;"> <p>fdgj fdh uhfj bfd nibjdfjb ndfjn fd vfn vbjdc&nbsp; ifs n ei klmvf.cx fi fskn d</p></div>', '<a href="http://www.yahoo.com" target="_blank">Read more</a>' ], 
    [1, 51.51400, -0.12002, 'transport', 'Test map marker', '<div><img src="{image:url:thumb}" alt="Test map marker" width="{image:width:thumb}" height="{image:height:thumb}" style="float:right;"> <p>eubnglrsk nekfldb jndklvcbv jdnfhl kvbmd klbndvl kbjn dkbnm lkd nbmfljeb ygdjfjn</p></div>', '<a href="http://www.google.com" target="_blank">Read more</a>' ] 

]; 

这是地图

var markers = []; 

    // Looping through the JSON data 
    for (var i = 0; i < locations.length; i++) { 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      title: locations[i][4], 
      icon: iconSrc[locations[i][3]] 
     }); 
     markers.push(marker); 


     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent("<div class='cont_box' id='" + locations[i][0] + "'>" + "<h2>" +locations[i][4] + "</h2>" + "<div class='cont'>" + locations[i][5] + "</div><div style='clear:both;'></div><div class='link'>" + locations[i][6] + "</div></div>"); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

    }// END for loop 

显然错误,当我引用由CMS提供的JSON数据我得到的标记环是::

的ReferenceError:位置不是定义

该URL是有效的,只是它似乎并没有像当我使用JS文件时被拉入。

我不知道在地图JS代码本身内调用文件是否会更好。

我如何能做出这样的工作将是巨大的

+0

请发布一个链接,看起来这里的问题与你的内容管理系统比谷歌地图更相关,如果不知道你的CMS创建了什么,就不可能回答。 –

+0

@ Dr.Molle我认为这可能是我没有调用实际的文件扩展名。我不认为这与CMS或谷歌地图有什么关系,这就是为什么我想看看其他方式拉动JSON – zizther

+0

@Dr。Molle我明天会为你举个例子 – zizther

回答

0

我有两个想法。

    在脚本标签
  1. 声明的类型(你知道,如果你的整个页面是HTML5?):
<script type="text/javascript" src="http://domain.com/map/locations"></script> 

我的另一个想法是加载代码数据:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://domain.com/map/locations', true); 
xhr.onload = function() {load you markers here} 
}; 
xhr.send(); 
0

确保,在你的HTML的脚本,你采购的“locations.js”脚本,你来源,创建映射脚本之前任何建议。使用Firebug或Chrome控制台,确保两个脚本都正确地被浏览器加载。

查看加载这些脚本的html代码段会很有帮助。

而且,你的意思写:

<script src="http://domain.com/map/locations.js"></script> 

上面,而不是:

<script src="http://domain.com/map/locations"></script> 
+0

感谢你的回复,我在地图JS之前加载了位置JSON。脚本的前后标签是正确的,CMS不会为模板生成扩展,所以为JS文件生成的URL是http://domain.com/map/locations(最后没有.js) – zizther