对于一个小型学校项目，我需要一些完全像这个小提琴的东西
http://jsfiddle.net/b9qud/2/
所以我创建了一个html文件test.html并添加了如下所示的小提琴的所有代码。 但是当我在浏览器中打开html页面时，我没有得到任何输出。 我怎样才能做到这一点？ 提前致谢。
<div id="map"></div> <script> var map; var elevator; var myOptions = { zoom: 12, center: new google.maps.LatLng(-33.950198, 151.259302), mapTypeId: 'terrain' }; map = new google.maps.Map($('#map')[0], myOptions); var markers = []; var beaches = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var bounds = new google.maps.LatLngBounds(); for (x in beaches) { var data = beaches[x]; console.log(data) var lat = beaches[x][1]; var lng = beaches[x][2] var latLng = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ map: map, position: latLng }); markers.push(marker); bounds.extend(latLng); } map.fitBounds(bounds) new google.maps.Rectangle({ bounds: bounds, fillColor: '#000000', map: map }) var centerBounds = new google.maps.Marker({ map: map, position: bounds.getCenter(), icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|FF0000|000000' }); </script>For a small school project I need something exactly like this fiddle
http://jsfiddle.net/b9qud/2/
So I created a html file test.html and added all the code of the fiddle like below. But when I open the html page in the browser I do not get any output. How can I make this work? Thanks in advance.
<div id="map"></div> <script> var map; var elevator; var myOptions = { zoom: 12, center: new google.maps.LatLng(-33.950198, 151.259302), mapTypeId: 'terrain' }; map = new google.maps.Map($('#map')[0], myOptions); var markers = []; var beaches = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var bounds = new google.maps.LatLngBounds(); for (x in beaches) { var data = beaches[x]; console.log(data) var lat = beaches[x][1]; var lng = beaches[x][2] var latLng = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ map: map, position: latLng }); markers.push(marker); bounds.extend(latLng); } map.fitBounds(bounds) new google.maps.Rectangle({ bounds: bounds, fillColor: '#000000', map: map }) var centerBounds = new google.maps.Marker({ map: map, position: bounds.getCenter(), icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|FF0000|000000' }); </script>最满意答案
在页面上包含jQuery库 ：
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>包含Maps API ：
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>这两个脚本由侧栏中的jsfiddle（它们在Frameworks＆Extensions和External Resources中定义）加载。
接下来，将代码包装在函数中，并在DOM准备好时调用该函数。
<script type="text/javascript"> function initialize() { // your code goes here } $(function() { // Call the initialize function defined above initialize(); }); </script>将所有内容放在html页面底部的<body></body>标记内。
Include the jQuery library on your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Include the Maps API:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>These 2 scripts are loaded by jsfiddle (they are defined in Frameworks & Extensions and External Resources) in the side bar.
Next, wrap your code in a function and call that function when the DOM is ready.
<script type="text/javascript"> function initialize() { // your code goes here } $(function() { // Call the initialize function defined above initialize(); }); </script>Put all that at the bottom of your html page, within the <body></body> tags.
更多推荐
发布评论