Question

我正在尝试分配我的下拉菜单的功能，所以当你点击所选择的县时，它将会在该县上展开。我已经通过研究写下了我的内容，因为我对这一切都是新手，但我不确定如何将它们联系在一起。我知道我没有附加谷歌地图，但我在整页中这样做，只是这部分我在尝试连接时遇到了麻烦。

<!doctype html>
  <html>
  <head>

<script type="text/javascript">

document.getElementById('counties').addEventListener('click', function(e)  {alert(this.value); e.preventDefault();}, false);
$('bedfordshire').click(function(){
alert(this.value);
});
$('buckinghamshire').click(function(){
alert(this.value);
});
$('cambridgeshire').click(function(){
alert(this.value);
});
$('hertfordshire').click(function(){
 alert(this.value);
});
$('northamptonshire').click(function(){
alert(this.value);
});

//bedfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.33, -0.05));
    bounds.extend(new google.maps.LatLng(51.8, -0.8));
map.fitBounds(bounds);

//buckinghamshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.21, -0.33));
bounds.extend(new google.maps.LatLng(51.47, -1.33));
map.fitBounds(bounds);

//cambridgeshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.75, -0.55));
bounds.extend(new google.maps.LatLng(51.99, -0.53));
map.fitBounds(bounds);

//hertfordshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.09, -0.35));
bounds.extend(new google.maps.LatLng(51.59, -0.80));
map.fitBounds(bounds);

//northamptonshire
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(52.67, -0.33));
bounds.extend(new google.maps.LatLng(51.94, -1.35));
map.fitBounds(bounds);


</script>

</head>
<body>
<select id="Counties" >
<option value="">Select County</option>
    <option value="bedfordshire">Bedfordshire</option>
    <option value="buckinghamshire">Buckinghamshire</option>
    <option value="cambridgeshire">Cambridgeshire</option>                       
    <option value="hertfordshire">Hertfordshire</option>
    <option value="northamptonshire">Northamptonshire</option>
 </select>

 </body>
</html>

Answer 1

一个选项是在关联数组中定义边界对象，然后使用它来根据HTML选择的值获取正确的边界。

var countyBounds = [];
countyBounds["bedfordshire"] = //bedfordshire
  new google.maps.LatLngBounds(new google.maps.LatLng(51.8, -0.8),new google.maps.LatLng(52.33, -0.05));
countyBounds["buckinghamshire"] = //buckinghamshire
  new google.maps.LatLngBounds(new google.maps.LatLng(51.47, -1.33),new google.maps.LatLng(52.21, -0.33));
countyBounds["cambridgeshire"] = //cambridgeshire
  new google.maps.LatLngBounds(new google.maps.LatLng(52.75, -0.55),new google.maps.LatLng(51.99, -0.53));
countyBounds["hertfordshire"] = //hertfordshire
  new google.maps.LatLngBounds(new google.maps.LatLng(51.59, -0.80),new google.maps.LatLng(52.09, -0.35));
countyBounds["northamptonshire"] = //northamptonshire
  new google.maps.LatLngBounds(new google.maps.LatLng(51.94, -1.35),new google.maps.LatLng(52.67, -0.33));

document.getElementById('Counties').addEventListener('click', changeFunction, false);

function changeFunction(e) {
    map.fitBounds(countyBounds[this.value])
    e.preventDefault();
}

proof of concept fiddle

代码段

var geocoder;
var map;
var countyBounds = [];
countyBounds["bedfordshire"] = //bedfordshire
  new google.maps.LatLngBounds(
    new google.maps.LatLng(51.8, -0.8),
    new google.maps.LatLng(52.33, -0.05));
countyBounds["buckinghamshire"] = //buckinghamshire
  new google.maps.LatLngBounds(
    new google.maps.LatLng(51.47, -1.33),
    new google.maps.LatLng(52.21, -0.33));
countyBounds["cambridgeshire"] = //cambridgeshire
  new google.maps.LatLngBounds(
    new google.maps.LatLng(52.75, -0.55),
    new google.maps.LatLng(51.99, -0.53));
countyBounds["hertfordshire"] = //hertfordshire
  new google.maps.LatLngBounds(
    new google.maps.LatLng(51.59, -0.80),
    new google.maps.LatLng(52.09, -0.35));
countyBounds["northamptonshire"] = //northamptonshire
  new google.maps.LatLngBounds(
    new google.maps.LatLng(51.94, -1.35),
    new google.maps.LatLng(52.67, -0.33));


function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var kmlLayer = new google.maps.KmlLayer({
    map: map,
    url: "http://nemezisproject.co.uk/download/google-maps-playground/England.kmz"
      // "http://www.geocodezip.com/geoxml3_test/final_map_original_wales1c.xml"
  })
  google.maps.event.addListener(kmlLayer, 'status_changed', function() {
    document.getElementById('status').innerHTML = kmlLayer.getStatus();
  });
  document.getElementById('Counties').addEventListener('click', changeFunction, false);
  document.getElementById('Counties').addEventListener('cjange', changeFunction, false);


  function changeFunction(e) {
    map.fitBounds(countyBounds[this.value])
    e.preventDefault();
  }











}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="Counties">
  <option value="">Select County</option>
  <option value="bedfordshire">Bedfordshire</option>
  <option value="buckinghamshire">Buckinghamshire</option>
  <option value="cambridgeshire">Cambridgeshire</option>
  <option value="hertfordshire">Hertfordshire</option>
  <option value="northamptonshire">Northamptonshire</option>
</select>
<div id="status"></div>
<div id="map_canvas"></div>

Answer 2

我设法解决了我的问题，我想我会在下面向其他可能需要帮助的人展示。

< div id = "menu"
style = " position: absolute; margin: 45px 89px;" >

  <
  select id = "counties" >
  <
  option value = "" > Select County < /option> <
option value = "bedfordshire" > Bedfordshire < /option> <
option value = "buckinghamshire" > Buckinghamshire < /option> <
option value = "cambridgeshire" > Cambridgeshire < /option>                        <
option value = "hertfordshire" > Hertfordshire < /option> <
option value = "northamptonshire" > Northamptonshire < /option> < /
select > <
  /div>

<
script type = "text/javascript" >
  $("#counties").on("change", function() {
    var cnt = $(this).val();
    var bounds = new google.maps.LatLngBounds();
    switch (cnt) {
      case "bedfordshire":
        bounds.extend(new google.maps.LatLng(
          52.22, -0.41));
        bounds.extend(new google.maps.LatLng(51.8797, -0.4176));
        break;
      case "buckinghamshire":
        bounds.extend(new google.maps.LatLng(52.18, -0.83));
        bounds.extend(new google.maps.LatLng(51.9206978, -0.6529431));
        break;
      case "cambridgeshire":
        bounds.extend(new google.maps.LatLng(52.29, -0.13));
        bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
        break;
      case "hertfordshire":
        bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
        bounds.extend(new google.maps.LatLng(51.8031689, -0.208661));
        break;
      case "northamptonshire":
        bounds.extend(new google.maps.LatLng(52.492298, -0.684233));
        bounds.extend(new google.maps.LatLng(52.09, -1.03));
        break;
    }
    map.fitBounds(bounds);

  })

<
/script>

尝试将功能分配给我的下拉菜单中的边界

2 个答案: