Javascript 谷歌地图API V3-从下拉列表中选择融合表层_Javascript_Google Maps Api 3

Javascript 谷歌地图API V3-从下拉列表中选择融合表层

javascript google-maps-api-3

Javascript 谷歌地图API V3-从下拉列表中选择融合表层,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我计划显示一个带有下拉列表的空白地图，允许用户从希望显示的融合表中选择图层。在网上，我没有找到这方面的示例代码。我现在的代码如下 <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var center = n

我计划显示一个带有下拉列表的空白地图，允许用户从希望显示的融合表中选择图层。在网上，我没有找到这方面的示例代码。我现在的代码如下

<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: &nbsp;' + 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: &nbsp;' + 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: &nbsp;' + 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>

有人有这个功能的示例代码吗

最好的，达科

为了清楚起见，我没有使用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: &nbsp;' + 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: &nbsp;' + 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: &nbsp;' + 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>

1我使用onchange=selectChange事件作为SELECT标记，下面是代码

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: &nbsp;' + 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: &nbsp;' + 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: &nbsp;' + 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>

看看这个。截图：

希望您能理解。

我更改了上面的代码，也就是说，我在上面的代码中添加了实现下拉列表的尝试。我将jquery.min.js库添加到代码中，但仍然没有结果。@Darko我很高兴我能提供帮助。