Question

我目前正在尝试在我的地图中实施一个简单的等值区域图（使用谷歌地图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>

如果你知道我可以使用的另一种方法（但以谷歌地图API v3为背景），请告诉我，我愿意调查一下并尝试一下。

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

由于

附加：

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

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

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

Answer 1

我注意到您正在将包含地图的height的{{1}}属性设置为DIV。尝试使用特定的高度。正如Map DOM Elements section of the Developer's Guide中所述，如果您的地图100%位于较大的DIV内，则应为包含地图的DIV或整个容器DIV提供特定的大小调整样式规则{1}}。

我使用CSS DIV取得了不错的效果，但在使用width: 100%时遇到了麻烦。

Answer 2

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

非常感谢。

将Choropleth与Google Maps API V3结合使用

2 个答案: