2

我正在尝试让 google maps api v3 正常工作，而且确实如此！但仅当我将显示地图的 div 设置为具有“map_canvas”的 id 时。需要那个身份证吗？如果您想在一页上显示多个地图怎么办？

我在我的 js 和 html 标记中都设置了 id

它完美地像这样工作：

JS

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

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="map_canvas"></div>
 </div>

它根据萤火虫加载地图，但当我这样做时不显示任何内容：

JS

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

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="anyotherid"></div>
 </div>

更新

我上传了一个示例页面，该页面在以下位置重现了我的问题：http://www.athleteaustin.com/spots/test 上的 示例

One peculiarity that I have noticed is that when I edit the id attribute with firebug from map_test to map_canvas on the div that displays the map, it suddenly appears even though the id is still defined as map_test in the JS in the head.

4

2 回答 2

2

Is that Id required?

No.

What if you want to display multiple maps on one page?

You use multiple unique ids for the divs.

Here is an example from the documentation that uses "map" If it isn't working for you, you are doing something wrong. I don't see it in the snippets you have posted. Do you have a live link or a jsfiddle that exhibits the issue?

于 2012-08-27T05:52:38.570 回答
1

There is a semicolon missing in 

<div style="width:100% height:100%" id="anyotherid"></div>

it should be

<div style="width:100%; height:100%" id="anyotherid"></div>

(semicolon after width:100%;), but that semicolon is also missing in your map_canvas snippet, so it is probably not the issue, unless you copy/paste'd wrongly.

于 2012-08-27T07:11:56.503 回答