使用html5中的地理位置在谷歌地图中显示坐标列表

Show list of co-ordinates in google map using geolocation in html5

本文关键字：显示 坐标 谷歌地图 列表 地理位置 html5 使用      更新时间：2023-09-26

对于一个小型学校项目，我需要一个完全像这个小提琴的东西

http://jsfiddle.net/b9qud/2/

所以我创建了一个html文件test.html，并添加了fiddle的所有代码，如下所示。但是当我在浏览器中打开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>

在页面上包含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加载（它们在Frameworks&Extensions和ExternalResources中定义）。

接下来，将代码封装在一个函数中，并在DOM就绪时调用该函数。

<script type="text/javascript">
function initialize() {
    // your code goes here
}
$(function() {
    // Call the initialize function defined above
    initialize();
});
</script>

把所有这些放在html页面的底部，<body></body>标记中。

相关文章：