顯示使用地理定位在HTML5

對於一個小的學校項目在谷歌地圖座標的列表我需要的東西完全一樣擺弄顯示使用地理定位在HTML5

所以我創建了一個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>

來源

2014-10-28 asdfkjasdfjk

在控制檯中拋出什麼錯誤？ – charlietfl 2014-10-28 15:43:41

ReferenceError：google沒有定義 – asdfkjasdfjk 2014-10-28 15:47:20

您是否包含庫腳本？ ...谷歌地圖一個jQuery – charlietfl 2014-10-28 15:48:42

附上jQuery庫您的網頁上：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

附上地圖API：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

這兩個腳本由的jsfiddle加載（只在定義框架&擴展和外部資源）在側欄。

接下來，將代碼包裝在一個函數中，並在DOM準備就緒時調用該函數。

<script type="text/javascript"> 

function initialize() { 

    // your code goes here 
} 

$(function() { 

    // Call the initialize function defined above 
    initialize(); 
}); 

</script>

把所有這些放在你的html頁面的底部，在<body></body>標籤內。

來源

2014-10-28 15:50:56 MrUpsidown

後添加這些腳本我得到這個錯誤在控制檯「ReferenceError：$未定義」，它說，在這一行導致的錯誤地圖=新google.maps.Map（$（'＃map' ）[0]，myOptions）; – asdfkjasdfjk 2014-10-28 15:59:24

你必須將它們放在與我的答案中給出的順序相同的順序。 1. jQuery 2.谷歌地圖3.你的代碼 – MrUpsidown 2014-10-28 16:01:22

太棒了！它的工作現在完美。我不得不添加jquery庫也。謝謝 – asdfkjasdfjk 2014-10-28 16:01:50

顯示使用地理定位在HTML5

回答

相關問題