将javascript代码插入html地理位置地图时不起作用

Question

嗨，大家好，我正在构建一个移动应用程序，我必须在其中放置地图并显示用户位置，并显示用户可以去的其他地方，但是当我将其插入其中时不起作用，所以这是我的工作代码链接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>'
);​

Answer 1

我在这里看到两个问题：

1. 您没有为地图设置中心，而是根据doc进行设置： https : //developers.google.com/maps/documentation/javascript/reference#Map

2. 您的#map div位于#page4 #map内部，其height未正确设置以显示地图画布

   • 设置的高度#page4和内容#page4至100%一切都会好起来
   • 这相当于Google的SimpleMap示例中的html, body { height: 100% }定义

参见此处： http : //jsfiddle.net/dJYRJ/ （转到配置文件标签，即＃page4）

注意 ：然后您需要对CSS进行一些调整，以使地图正确显示