在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>

使得以那不進行任何更改顯示我的地圖:(

來源

2012-07-05 farha

什麼具體不工作？您用來加載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%時遇到了麻煩。

來源

2012-07-05 18:55:59

我的地圖顯示很好的方式。我試着改變我的身高，並將其設置爲你的建議。地圖在地圖上仍然顯示，但沒有着色：/ – farha 2012-07-06 13:11:26

我在風格上加了一點我的問題。 – farha 2012-07-06 13:15:52

事實證明，製圖庫不是與Google Maps API V3結合使用，而是僅用於V2，所以我將不得不使用其他方法。

謝謝反正。

來源

2012-07-08 19:08:00 farha

在Google Maps API V3中使用Choropleth

回答

相關問題