2

大家好，我正在构建一个移动应用程序，我必须在其中放置地图并显示用户位置并显示用户可以去的其他一些地方但是当我将其插入它时不起作用，所以这是我的工作代码链接http://jsfiddle .net/yV6xv/1066/和地图工作 maprkers 工作和地理定位也工作但是当我http://jsfiddle.net/yV6xv/1067/它不起作用我认为这是一个很小的错误，我很抱歉问你这个但是你能纠正我的代码吗我确定这是一件小事：/

function initialize() {

    var locations = [
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.6911, 12.5939],
        ['<b>Cafee Nzsikvo</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.6883, 12.5597],
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.6832, 12.5714],
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.678272, 12.503643,],
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.713207, 12.526474,]
        ];


    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,

        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var geolocpoint = new google.maps.LatLng(latitude, longitude);
                map.setCenter(geolocpoint );
            var mapOptions = {
                zoom: 8,
                center: geolocpoint,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            // Place a marker
            var geolocation = new google.maps.Marker({
                position: geolocpoint,
                map: map,
                title: 'Your geolocation',
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
            });
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);



kastelet.openInfoWindowHtml(
    'Hello, <strong>World!</strong>'
);​
4

1 回答 1

1

我可以在这里看到两个问题：

  1. 您没有为地图设置中心，根据文档需要它：https ://developers.google.com/maps/documentation/javascript/reference#Map

  2. 您的#mapdiv 在#page4其中height未正确设置为显示地图画布

    • 设置to的高度#page4和内容，一切都会好的#page4100%
    • 这将等同html, body { height: 100% }于 Google 的 SimpleMap 示例中的定义

请参见此处： http: //jsfiddle.net/dJYRJ/（转到配置文件选项卡，即#page4）

注意：然后您需要稍微调整 CSS 以使地图正确显示

于 2012-12-21T11:23:10.697 回答