在Google Maps API V3中使用Choropleth

问题描述：

我目前正试图在我的地图中使用简单的等值线地图（使用google maps api v3）。我稍后将使用xml或json来检索我的数据，但此刻我只是想使用硬编码数据。它适用于V2 API谷歌地图，但不适用于V3。我不知道我做错了什么。我的代码如下：在Google Maps API V3中使用Choropleth

<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和制图库。

感谢

此外：

风格IVE使用连同股利如下：

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

使得以那不进行任何更改显示我的地图:(

什么具体不工作？您用来加载Google地图API的网址是什么？ – 2012-07-05 18:49:06

我使用了教程中的v3 api。 cholorpleth的着色不起作用 – farha 2012-07-06 23:26:39

答

我请注意，您正在将的DIV属性设置为包含地图100%。尝试使用具体高度。如Map DOM Elements section of the Developer's Guide中所述，如果地图DIV位于较大的DIV内，则应为包含地图或整个容器DIV的DIV提供具体的尺寸规则规则。

我已经使用CSS width: 100%有很好的效果，但在使用height: 100%时遇到了麻烦。

我的地图显示很好的方式。我试着改变我的身高，并将其设置为你的建议。地图在地图上仍然显示，但没有着色：/ – farha 2012-07-06 13:11:26

我在风格上加了一点我的问题。 – farha 2012-07-06 13:15:52

答

事实证明，制图库不是与Google Maps API V3结合使用，而是仅用于V2，所以我将不得不使用其他方法。

谢谢反正。

在Google Maps API V3中使用Choropleth

相关推荐