Question

当用户选择不同的城市时，我需要更改谷歌地图的初始化坐标。当我选择一个选项时，地图的初始坐标需要改变。

我的加价：

<select class='form-control' id='id_district' type='text' name="district">
    <option value='' disabled selected>District *</option>
    <option value="Limassol">Limassol</option>
    <option value="Nicosia">Nicosia</option>
    <option value="Paphos">Paphos</option>
    <option value="Larnaca">Larnaca</option>
    <option value="Ammoxostos">Ammoxostos</option>
</select>

和脚本：

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
    geocoder.geocode({
        latLng: pos
    }, function(responses) {
        if (responses && responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
        } else {
            updateMarkerAddress('Cannot determine address at this location.');
        }
    });
}

function updateMarkerStatus(str) {
    document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
    document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()].join(', ');
    jQuery("#info_1").val([latLng.lat()]);
    jQuery("#info_2").val([latLng.lng()]);
}

function store_coordinates(latLng) {
    document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()]
}

function updateMarkerAddress(str) {
    document.getElementById('address').innerHTML = str;
}

function initialize() {
    var latLng = new google.maps.LatLng(35.155560129479596, 33.34708248242191);

    var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 8,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latLng,
        title: 'Point A',
        map: map,
        draggable: true
    });
    updateMarkerPosition(latLng);
    geocodePosition(latLng);
    google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
    });
    google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });
    google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

这个函数需要用jQuery改变

Answer 1

当选择发生变化时，您需要调用地理编码器（而不是反向地理编码器）：

BasicObject.methods.include? :send # => true
BasicObject.methods.include? :call # => false
Object.methods.include? :call # => false

def foo
  puts 'text'
end

Object.send :foo # => text
Object.call :foo # => NoMethodError: undefined method `call' for Object:Class

proof of concept fiddle

代码段

＆＃13;

<select class='form-control' id='id_district' type='text' name="district" onchange="geocodeAddress(this.value);">

function geocodeAddress(address) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0].geometry.viewport) {
        map.fitBounds(results[0].geometry.viewport);
      } else if (results[0].geometry.bounds) {
        map.fitBounds(results[0].geometry.bounds);
      } else {
        map.setCenter(results[0].geometry.location);
      }
      if (marker && marker.setMap) {
        marker.setMap(null);
      }
      marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

＆＃13;

var map, marker;
var geocoder = new google.maps.Geocoder();

function geocodeAddress(address) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0].geometry.viewport) {
        map.fitBounds(results[0].geometry.viewport);
      } else if (results[0].geometry.bounds) {
        map.fitBounds(results[0].geometry.bounds);
      } else {
        map.setCenter(results[0].geometry.location);
      }
      if (marker && marker.setMap) {
        marker.setMap(null);
      }
      marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()].join(', ');
  jQuery("#info_1").val([latLng.lat()]);
  jQuery("#info_2").val([latLng.lng()]);
}

function store_coordinates(latLng) {
  document.getElementById('info').innerHTML = [latLng.lat(), latLng.lng()]
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(35.155560129479596, 33.34708248242191);

  map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true
  });
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#mapCanvas {
  height: 100%;
}

＆＃13;

如何在选择时更改javascript值

1 个答案: