0

我目前正在尝试在我的地图中实现一个简单的等值线地图（使用谷歌地图 api v3）。稍后我将使用 xml 或 json 来检索我的数据，但目前我只是尝试使用硬编码数据。它适用于 V2 API 谷歌地图，但不适用于 v3。我不确定我做错了什么。我的代码如下：

    <script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.500152, -0.126236);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map"), myOptions);


  var cartographer = Cartographer( map, { colorize:"#000", colorizeAlpha:.3 } );
cartographer.choropleth([
  {region:"US-MN",val:6},
  {region:"US-IA",val:10},
  {region:"US-WI",val:8},
  {region:"US-SD",val:7},
  {region:"US-ND",val:9},
  {region:"US-MI",val:12}
], { colorScheme:"BuPu"});

    }

     function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
    }

    </script>
    </head>
    <body onload="initialize()">
    <input id="address" type="textbox" value="London">
    <input type="button" value="Search" onclick="codeAddress()">
<div id="map" style="height:100%;top:0px"></div>
   </body>

如果您知道我可以使用的替代方法（但以 google maps API v3 作为背景），请告诉我我愿意研究并尝试一下。

我已经在代码中导入了 raphael 和制图库。

谢谢

添加：

与 div 一起使用的样式如下：

   <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 100% }
</style>

对此进行任何更改都不会显示我的地图:(

4

2 回答 2

0

事实证明，制图库并未与 Google Maps API V3 一起使用，而仅与 V2 一起使用，因此我将不得不使用不同的方法。

不管怎么说，多谢拉。

于 2012-07-08T19:08:00.493 回答
0

我注意到您正在将包含地图的height属性设置为. 尝试使用特定的高度。正如开发人员指南的Map DOM Elements部分所述，如果您的地图位于较大的.DIV100%DIVDIVDIVDIV

我使用 CSS 取得了不错的效果width: 100%，但在使用height: 100%.

于 2012-07-05T18:55:59.133 回答