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)
  });

  .....
}

文档： 谷歌地图标记