0
날씨지도 코드를 사용자 정의 Google지도 (API v3)에 넣을 위치를 찾는 데 도움이 필요합니다. 모든 입력을 크게 높이 평가할 수 있습니다.이 사용자 정의지도에 Weather Layer를 추가 할 위치는 어디입니까?
맞춤 Google지도를 만들었습니다. 우리는 간단한 토글 (toggle)을 가진 2 개의 Fusion Table 레이어를 가지고 있습니다. 이 사이트에 여기에서 찾을 것을 개발자 문서에서, 그리고, 나는 코드의이 비트 추가해야 볼 수 있습니다
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
을하지만 난 때마다 나는,이를 배치하는 위치에 관해서는 완전히 우둔입니다 코드를 추가하고 F12 콘솔 창에 모든 종류의 오류가있는 빈 페이지가 표시됩니다.
어디에서 추가해야할까요? 어떻게 토글에 추가 할 수 있습니까? 여기에 우리가 일하고있는 것이 있습니다 :
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var map;
var layer1;
var tableid = '';
var layer2;
var tableid2 = 'xxxxx';
var layer3;
var tableid3 = 'xxxxx';
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(31.499, -111.202),
zoom: 10,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});
var styledMapType = new google.maps.StyledMapType({
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer1 = new google.maps.FusionTablesLayer({
query: {
select: '',
from: tableid
},
map: map
});
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'LOC',
from: tableid2
},
map: map
});
layer3 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableid3
},
suppressInfoWindows:true,
map: map
});
}
function changeMap(layerNum) {
if (layerNum == 2) {
update(layer2);
}
if (layerNum == 3) {
update(layer3);
}
}
function update(layer) {
var layerMap = layer.getMap();
if (layerMap) {
layer.setMap(null);
} else {
layer.setMap(map);
}
}
</script>
<style type="text/css">
#toggle_box {
position: absolute;
top: 7px;
right: 7px;
padding: 3px;
border: 1px solid #707735;
background: #DED9C6;
font-family: 'Coda', cursive;
}
body {
margin: 0px;
padding: 0px;
font-family: 'Coda', cursive;
}
#map_canvas {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
font-family: 'Coda', cursive;
}
</style>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
<div id="toggle_box"><input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />REFERENCE POINTS
<input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />AZ COUNTIES</div>
</body>
</html>