谷歌地图V3 API不在localhost工作

我从谷歌地图文档复制下面的JavaScript代码，但它不起作用，它只显示一个白色的空白页面，没有加载。谷歌地图V3 API不在localhost工作

<!DOCTYPE html> 
    <html> 
<head> 
    <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 

<!-- 
Include the maps javascript with sensor=true because this code is using a 
sensor (a GPS locator) to determine the user's location. 
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor 
--> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 

<script type="text/javascript"> 
    var map; 

    function initialize() { 
    var myOptions = { 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     myOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

     var infowindow = new google.maps.InfoWindow({ 
      map: map, 
      position: pos, 
      content: 'Location found using HTML5.' 
     }); 

     map.setCenter(pos); 
     }, function() { 
     handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 
    } 


    function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
     var content = 'Error: The Geolocation service failed.'; 
    } else { 
     var content = 'Error: Your browser doesn\'t support geolocation.'; 
     } 

     var options = { 
     map: map, 
     position: new google.maps.LatLng(60, 105), 
     content: content 
     }; 

     var infowindow = new google.maps.InfoWindow(options); 
     map.setCenter(options.position); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id="map_canvas"></div> 
</body> 
    </html>

既然v3需要api key有什么问题呢？我检查了谷歌Chrome和Firefox，但没有线索。

来源

2011-11-26 Isuru

看起来你错过了一个关闭html标签，除非这是一个错字。

在页面底部添加此</html>。

来源

2011-11-26 02:37:00

对不起我的错......当我剪切和粘贴它省略。不，这不是它不工作的原因。 – Isuru

您需要提供一个center位置创建您的map。在您的initialize()功能更改地图选项，包括你想开始位置：

var myCenter = new google.maps.LatLng(60.0,105.0); 
var myOptions = { 
    zoom: 6, 
    center: myCenter, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
};

当（或如果）你从地理定位服务中心将通过您的代码进行更改的位置。

来源

2011-11-26 22:18:27

老问题，将在万一别人的土地，无论如何回答这里。

最后我用一个稍微不同的实现来得到这个工作：

<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = {zoom: 8, center: new google.maps.LatLng(-34.397, 150.644)}; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
            mapOptions); 
    } 

    function loadScript() { 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp'+ 
       '&key={{API_KEY}}&sensor=false&callback=initialize'; 
    document.body.appendChild(script); 
    } 

    window.onload = loadScript(); 
</script>

，我不得不添加让它从这个其他（几乎相同）版本工作的一部分，是（）在loadScript（）的末尾。隐式函数调用根本没有发生。

您将需要更换{{API_KEY}}用自己的。我不确定这是否是必需的，但这是导致我实施工作的一部分。

如果没有，请按照下列步骤列出here

来源

2014-05-14 08:53:36 Rosseyn

谷歌地图V3 API不在localhost工作

回答

相关问题