Google地图标记不是从JSON填充的

时间:2013-11-13 08:05:32

标签: javascript jquery json google-maps google-maps-api-3

我正在尝试使用JSON脚本中的多个标记填充Google地图。地图效果很好,但是我很想让标记显示出来。

我尝试了同样的结果:Google Maps - Multiple marker from extern json

我的JSON:

{"markers":[ { "latitude":57.7973333, "longitude":12.0502107, "title":"Angered", 
"content":"Representing :)" }, { "latitude":57.6969943, "longitude":11.9865, 
"title":"Gothenburg", "content":"Swedens second largest city" } ]}

我的HTML:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        $('.w-map-h').gMap().bind('init', function() {
            // This URL won't work on your localhost, so you need to change it
            // see http://en.wikipedia.org/wiki/Same_origin_policy
            $.getJSON( 'js/mapData.json', function(data) {
                $.each( data.markers, function(i, marker) {
                    $('#w-map-h').gMap('addMarker', {
                        'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                        'bounds': true
                    }).click(function() {
                            $('.w-map-h').gMap('openInfoWindow', { 'content': marker.content }, this);
                        });
                });
            });
        });
    });
</script>
<div class="w-map">
     <div class="w-map-h" style="height: 300px;">
 </div>
 </div>

jQuery附加在页面上。

如果我能做任何其他事,请告诉我。

感谢。

0 个答案:

没有答案