javascript - Jquery 通过选择选项数据值设置标记位置

Question

我想问一下我有一个谷歌地图搜索功能，然后我想添加使用选择选项设置标记位置的功能。

这里是我的函数

var map = null;
var marker = null;
$('#pilih_customer').on('change', function() {
  lati = $(this).find(':selected').attr("data-latitude");
  lngi = $(this).find(':selected').attr("data-longitude");
  name = $(this).find(':selected').attr("data-name");

  bindDataToForm(name, lati, lngi);
  map.setCenter(new google.maps.LatLng(lati, lngi));
  map.setZoom(17);
  marker.setPosition(place.geometry.location);
})

function initialize() {
  var latlng = new google.maps.LatLng(-6.189623, 106.835454);
  var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 17
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    draggable: true,
    anchorPoint: new google.maps.Point(0, -29)
  });
  var input = document.getElementById('location');
  // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var geocoder = new google.maps.Geocoder();
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);
  var infowindow = new google.maps.InfoWindow();
  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(20);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    bindDataToForm(place.formatted_address, place.geometry.location.lat(), place.geometry.location.lng());
    infowindow.setContent(place.formatted_address);
    infowindow.open(map, marker);

  });
  // this function will work on marker move event into map 
  google.maps.event.addListener(marker, 'dragend', function() {
    geocoder.geocode({
      'latLng': marker.getPosition()
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          bindDataToForm(results[0].formatted_address, marker.getPosition().lat(), marker.getPosition().lng());
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);
        }
      }
    });
  });
}

function bindDataToForm(address, lat, lng) {
  document.getElementById('location').value = address;
  document.getElementById('lat').value = lat;
  document.getElementById('lng').value = lng;

  $('#calculate').attr('disabled', false);

}

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

<select class="form-control" id="pilih_customer" style="border-radius: 5px;" name="id_customer" required="">
  <option value=""> *select </option>
  <option value="817" data-latitude="-8.16837" data-longitude=" 113.45152" data-name="A`A Frozen Food"> A`A Frozen Food </option>
  <option value="861" data-latitude="-8.16836" data-longitude=" 113.45156" data-name="AA Frozen Food "> AA Frozen Food </option>
</select>

我现在的问题是如何根据我选择的选择选项移动标记？

我应该更改什么才能使我的代码正常工作？这里我使用数据纬度和数据经度

Answer 1

删除 initialize() 标记上的 var 这将仅在该函数上启动。

$('#pilih_customer').on('change', function() {
  /*
      - Add + before $(this) to convert the value from string to number
      - You can pass object (LatLngLiteral) on setPosition
  */
  var lati = +$(this).find(':selected').attr("data-latitude");
  var lngi = +$(this).find(':selected').attr("data-longitude");
  var name = $(this).find(':selected').attr("data-name");

  .....

  marker.setPosition({lat: lati,lng: lngi});
})

function initialize() {
  .....

  /*
      - Remove var. Do not initiate the marker variable again
  */
  marker = new google.maps.Marker({
    map: map,
    position: latlng,
    draggable: true,
    anchorPoint: new google.maps.Point(0, -29)
  });

  .....
}

文档:Google Map Marker