[英]Google Maps JS APi v3 fusion table layer is not working in Chrome
[英]Google Maps API V3 - Select Fusion Table layer from drop-down list
我計划顯示一個帶有下拉列表的空白地圖,這將允許用戶選擇希望顯示的圖層(來自Fusion Tables)。 在網上我找不到這個示例代碼。 我目前的代碼如下。
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var center = new google.maps.LatLng(-40.979898,173.305662);
var infowindow = new google.maps.InfoWindow();
function init() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var street_address1 = new google.maps.FusionTablesLayer({
query: {
select: 'street_address_Auckland_000001_080000',
from: '1WoKvD3GvX8Rif7TFmHGEvvbtpbYWFs-K-DeF7WU'
},
suppressInfoWindows: true
});
google.maps.event.addListener(street_address1, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
infoWindowContent = infowindow.setContent(
'<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Street Address'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> ID: ' + e.row['id'].value
+ '</a>') ;
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
var street_address2 = new google.maps.FusionTablesLayer({
query: {
select: 'street_address_Auckland_080000_160000',
from: '1dlsTxt8kyA92pq3jwODwQtaEcWxn8dax0slrULM'
},
suppressInfoWindows: true
});
google.maps.event.addListener(street_address2, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
infoWindowContent = infowindow.setContent(
'<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Street Address'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> ID: ' + e.row['id'].value
+ '</a>') ;
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
var street_address3 = new google.maps.FusionTablesLayer({
query: {
select: 'street_address_Auckland_160000_240000',
from: '1bb-M9LcG_dFS3ejYzT3hnpOQUzMMBT2GR8VH5hY'
},
suppressInfoWindows: true
});
google.maps.event.addListener(street_address3, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
infoWindowContent = infowindow.setContent(
'<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Street Address'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> ID: ' + e.row['id'].value
+ '</a>') ;
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
$('#street_address').select(function(){
if ($(this).is('1'))
street_address1.setMap(map);
else
street_address1.setMap(null);
});
$('#street_address').removeAttr('disabled');
$('#street_address').select(function(){
if ($(this).is('2'))
street_address2.setMap(map);
else
street_address2.setMap(null);
});
$('#street_address').removeAttr('disabled');
$('#street_address').select(function(){
if ($(this).is('3'))
street_address3.setMap(map);
else
street_address3.setMap(null);
});
$('#street_address').removeAttr('disabled');
}
</script>
</head>
<body id="body" onload="init();">
<div id="list" style="position:absolute; left:25; top:5px; width:100px; height:25px;">
<select name="street_address" id="street_address">
<option value="1">Layer 1</option>
<option value="2">Layer 2</option>
<option value="3">Layer 3</option>
</select>
</div>
<div id="map_canvas" style="position:absolute; left:25; top:35px; width:1000px; height:760px"></div>
</body>
</html>
有沒有人有這個功能的示例代碼?
最好的,Darko
為了清楚起見,我沒有使用jQuery 。
(1)我在SELECT
標簽上使用onchange="selectChange()"
事件,下面是代碼。
function selectChange(){
var value = document.getElementById("street_address").value;
if (value =='1')
street_address1.setMap(map);
else if (value =='2')
street_address2.setMap(map);
else if (value =='3')
street_address2.setMap(map);
else
street_address1.setMap(null);
document.getElementById("street_address").removeAttribute("disabled");
};
在這里,我優化了你的if..else..
語句。
(2) onload="init();"
是一小段代碼,因此簡單。
function init() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
保留所有相同,這里是刪除jQuery的完整源代碼。
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var center = new google.maps.LatLng(-40.979898,173.305662);
var infowindow = new google.maps.InfoWindow();
function init() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
var street_address1 = new google.maps.FusionTablesLayer({
query: {
select: 'street_address_Auckland_000001_080000',
from: '1WoKvD3GvX8Rif7TFmHGEvvbtpbYWFs-K-DeF7WU'
},
suppressInfoWindows: true
});
google.maps.event.addListener(street_address1, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
infoWindowContent = infowindow.setContent(
'<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Street Address'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> ID: ' + e.row['id'].value
+ '</a>') ;
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
var street_address2 = new google.maps.FusionTablesLayer({
query: {
select: 'street_address_Auckland_080000_160000',
from: '1dlsTxt8kyA92pq3jwODwQtaEcWxn8dax0slrULM'
},
suppressInfoWindows: true
});
google.maps.event.addListener(street_address2, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
infoWindowContent = infowindow.setContent(
'<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Street Address'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> ID: ' + e.row['id'].value
+ '</a>') ;
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
var street_address3 = new google.maps.FusionTablesLayer({
query: {
select: 'street_address_Auckland_160000_240000',
from: '1bb-M9LcG_dFS3ejYzT3hnpOQUzMMBT2GR8VH5hY'
},
suppressInfoWindows: true
});
google.maps.event.addListener(street_address3, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
infoWindowContent = infowindow.setContent(
'<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Street Address'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> ID: ' + e.row['id'].value
+ '</a>') ;
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
</script>
</head>
<body id="body" onload="init();">
<div id="list" style="position:absolute; left:25; top:5px; width:100px; height:25px;">
<select name="street_address" id="street_address" onchange="selectChange()">
<option value="1">Layer 1</option>
<option value="2">Layer 2</option>
<option value="3">Layer 3</option>
</select>
</div>
<div id="map_canvas" style="position:absolute; left:25; top:35px; width:1000px; height:760px"></div>
</body>
</html>
檢查這個JSFiddle 。 截圖:
希望你能理解。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.