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

debugcn 发表于 Dev

asdfkjasdfjk

对于一个小型学校项目，我需要像这样的小提琴

因此，我创建了一个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>

先生先生

在页面上包含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>标记内。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。