JavaScript上的函数不会加载到PHP上

Question

我有一个功能代码，用于显示我的js文件上的标记，地图和路线，但是当我点击我的php文件中的按钮时，当有按钮用于调用该功能时，它将不会加载。之前，我将所有代码分组到一个文件php，当我点击它的按钮工作时（1个php文件包含所有代码），但是当我将它移动到php文件时，这是另一个项目的一部分（网站php链接到file.js和config.php）按钮不起作用，帮我解决这个问题

这是我的javascript文件中的函数代码：

    var lat = 18.35827827454; //default latitude
    var lng = 121.63744354248; //default longitude
    var lat2 = 18.35827827454; //default latitude
    var lng2 = 121.63744354248; //default longitude
    var ren, ser;

    var homeLatlng = new google.maps.LatLng(lat, lng); //set default coordinates
    var homeLatlng2 = new google.maps.LatLng(lat2, lng2); //set default coordinates
    

    var homeMarker = new google.maps.Marker({ //set marker
      position: homeLatlng, //set marker position equal to the default coordinates
      map: map, //set map to be used by the marker
      icon: 'seru a.png',
    });

    // google.maps.event.addListener(marker, 'click', (function(homeMarker, i) {
    //       return function() { 
    //     var id= homeLatlng[i][0];
  
    //     $.ajax({
    //       url : "places_config.php",
    //       data : "idlokasi=" +id ,
    //       success : function(data) {
    //           infowindow.setContent(data);
    //           infowindow.open(map, homeMarker);
    //       }
    //     });
    //   }
    // })(homeMarker, i));

    var homeMarker2 = new google.maps.Marker({ //set marker
      position: homeLatlng2, //set marker position equal to the default coordinates
      map: map, //set map to be used by the marker
      icon: 'seru b.png',
      // draggable: true //make the marker draggable
    });


    
    //PETA AWAL
    var myOptions = {
      center: new google.maps.LatLng(-7.8707131,112.5255514), //set map center
      zoom: 14, //set zoom level to 17
      mapTypeId: google.maps.MapTypeId.ROADMAP //set map type to road map
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions); //initialize the map



    //if the position of the marker changes set latitude and longitude to 
    //current position of the marker
    
    google.maps.event.addListener(homeMarker, 'position_changed', function(){
      var lat = homeMarker.getPosition().lat(); //set lat current latitude where the marker is plotted
      var lng = homeMarker.getPosition().lng(); //set lat current longitude where the marker is plotted
    });
    google.maps.event.addListener(homeMarker2, 'position_changed', function(){
      var lat2 = homeMarker2.getPosition().lat(); //set lat current latitude where the marker is plotted
      var lng2 = homeMarker2.getPosition().lng(); //set lat current longitude where the marker is plotted
    });     
    
    //if the center of the map has changed
    google.maps.event.addListener(map, 'center_changed', function(){
      var lat = homeMarker.getPosition().lat(); //set lat to current latitude where the marker is plotted
      var lng = homeMarker.getPosition().lng(); //set lng current latitude where the marker is plotted     
    });

    google.maps.event.addListener(map, 'center_changed', function(){
      var lat2 = homeMarker2.getPosition().lat(); //set lat to current latitude where the marker is plotted
      var lng2 = homeMarker2.getPosition().lng(); //set lng current latitude where the marker is plotted
    });



    //SEARCH BY GOOGLE
    var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
    var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete

    autocomplete.bindTo('bounds', map); //bias the results to the maps viewport
    
    //executed when a place is selected from the search field
    google.maps.event.addListener(autocomplete, 'place_changed', function(){
        
        //get information about the selected place in the autocomplete text field
        var place = autocomplete.getPlace(); 
        
        if (place.geometry.viewport){ //for places within the default view port (continents, countries)
          map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the locationd
        } else { //for places that are not on the default view port (cities, streets)
          map.setCenter(place.geometry.location);  //set map center to the coordinates of the location
          map.setZoom(17); //set a custom zoom level of 17
        }

        homeMarker.setMap(map); //set the map to be used by the  marker
        homeMarker.setPosition(place.geometry.location); //plot marker into the coordinates of the location 
        homeMarker2.setMap(map); //set the map to be used by the  marker
        homeMarker2.setPosition(place.geometry.location); //plot marker into the coordinates of the location 
  
    });


  $('#plot_marker').click(function(e){ //used for plotting the marker into the map if it doesn't exist already
      e.preventDefault(); 
      homeMarker.setMap(map); //set the map to be used by marker
      // homeMarker.setPosition(map.getCenter()); //set position of marker equal to the current center of the map
      homeMarker2.setMap(map); //set the map to be used by marker
      // homeMarker2.setPosition(map.getCenter()); //set position of marker equal to the current center of the map
      map.setZoom(16);

      // window.location.reload();
      
      $('input[type=text], input[type=hidden]').val('');
  });


$('#refresh').click(function(e){
window.location.reload();
$('input[type=text], input[type=hidden]').val('');
  });


  // CARI LOKASI TERSIMPAN
  $('#search_ex_places').blur(function(){//once the user has selected an existing place
      
      var place = $(this).val();
      //initialize values
      var exists = 0;
      var lat = 0; 
      var lng = 0;
      var lat2 = 0; 
      var lng2 = 0;

      $('#saved_places option').each(function(index){ //loop through the save places
        var cur_place = $(this).data('place'); //current place description
        

        //if current place in the loop is equal to the selected place
        //then set the information to their respected fields
        if(cur_place == place){ 
          exists = 1;
          $('#place_id').val($(this).data('idlokasi'));
          lat = $(this).data('lat');
          lng = $(this).data('lng');
          lat2 = $(this).data('lat2');
          lng2 = $(this).data('lng2');
          $('#n_nama').val($(this).data('nama'));
          $('#n_description').val($(this).data('description'));
        }
      });
      
      if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
        $('input[type=text], input[type=hidden]').val('');
        
      }else{
        //set the coordinates of the selected place
        var position = new google.maps.LatLng(lat, lng);
        var position2 = new google.maps.LatLng(lat2, lng2);
        
        //set marker position
        homeMarker.setMap(map);
        homeMarker.setPosition(position);

        homeMarker2.setMap(map);
        homeMarker2.setPosition(position2);

        //set the center of the map
        map.setCenter(homeMarker.getPosition());
        map.setZoom(17);

        map.setCenter(homeMarker2.getPosition());
        map.setZoom(17);

      ser = new google.maps.DirectionsService,
      ren = new google.maps.DirectionsRenderer({
      map: map
      });

      ser.route({
      origin: position,
      destination: position2,
      travelMode: google.maps.TravelMode.DRIVING
      }, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
        ren.setDirections(response);
        } else {
        window.alert('Directions request failed due to ' + status);
          }      
        });


//menampilkan INFOWINDOW
            // var contentString = 
            // '<div id="content">'+
            // '<div id="siteNotice">'+
            // '</div>'+
            // '<h3 id="firstHeading" class="firstHeading">AKHIR</h3>'+
            // '<div id="bodyContent">'+
            // '<p>menampilkan informasi</p>'+
            // '<p>Web <a href="Facebook">'+
            // 'www.facebook.com</a> .</p>'+
            // '</div>'+
            // '</div>';
 
            // var infowindow = new google.maps.InfoWindow({
            //   content: contentString
            // });
 
            // google.maps.event.addListener(homeMarker2, 'click', function() {
            //   infowindow.open(map,homeMarker2);
            // });      

      }
    });


    // SIMPAN LOKASI
    $('#btn_save').click(function(){
      var nama   = $.trim($('#n_nama').val());
      var description = $.trim($('#n_description').val());
      var lat = homeMarker.getPosition().lat();
      var lng = homeMarker.getPosition().lng();
      var lat2 = homeMarker2.getPosition().lat();
      var lng2 = homeMarker2.getPosition().lng();
      
      $.post('save_place.php', {'nama' : nama, 'description' : description, 'lat' : lat, 'lng' : lng, 'lat2' : lat2, 'lng2' : lng2}, 
        function(data){
          var idlokasi = data;
          var new_option = $('<option>').attr({'data-id' : idlokasi, 'data-place' : nama, 'data-lat' : lat, 'data-lng' : lng, 'data-lat2' : lat2, 'data-lng2' : lng2, 'data-description' : description}).text(place);
          new_option.appendTo($('#saved_places'));
        }
      );
      
      $('input[type=text], input[type=hidden]').val('');
    });

#map {
  border: 1px solid #DDD; 
  width:600px;
  height: 300px;
  float:left;  
  margin: 0px 0 0 10px;
  -webkit-box-shadow: #AAA 0px 0px 15px;
}

          	#map img { 
  max-width: none;
}

#map label { 
  width: auto; display:inline; 
} 

<?
require_once('places_config.php');
$places = $db->query("SELECT * FROM lokasi");
?>

<style>
#map_container{ 
  width: 630px;
  height: 330px;
  float: left;
}
#map_canvas{
  width: 95%;
  height: 90%;
  margin-left:10px;
  border: 5px solid darkgrey;
}
</style>


<legend> <h3> <center> Daftar Jalur Rawan Kecelakaan </center> </h3> </legend>

<div class='row'>
  <div class="span8">


  <div id="map"></div>
</div> <!--end -f span-->
<div class="span8 ">

<div id="map_container">
  <div id="map_canvas"></div>
</div>

<form   method="POST" id="form1" action="lokasi/map_view.php" class='form-horizontal'>
<br>


   <div class="control-group">
    <label class="control-label" for="search_new_places">Cari Lokasi Tempat</label>
    <div class="controls">
      <input type="text" placeholder="Search New Places" id="search_new_places" autofocus>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="search_ex_places">Cari Lokasi Tersimpan</label>
    <div class="controls">
      <input type="text" placeholder="Search Saved Places" id="search_ex_places" list="saved_places">
    </div>
  </div>  

<input type="hidden" name="idlokasi" id="idlokasi"/>

<center>

<div class="control-group">
  <div class="control"> 
    <input type="button" class="btn btn-success" id="plot_marker" value="Cari tempat"/>
  </div>
</div>

<div class="control-group">
  <div class="control"> 
<input type="button" class="btn btn-primary" id="refresh" value="Refresh"/> 
  </div>
</div>


</center>

<!-- <br>
<p>
<label for="place"><b><u>INPUT TEMPAT BARU</b></u></label>
</p>

<p>
<label for="place">Nama</label>
<input type="text" name="n_nama" id="n_nama"/>  
</p>

<p>
<label for="description">Description</label>
<input type="text" name="n_description" id="n_description"/>  
</p>

<p>
  <input type="button" id="btn_save" value="Simpan tempat"/>
</p>
</form> -->

<datalist id="saved_places">
<!--loop through the places saved in the database and store their data into each of the data attribute in the options-->  
<?php while($row = $places->fetch_object()){ ?> 
  <option value="<?php echo $row->nama; ?>" 
    data-id="<?php echo $row->idlokasi; ?>" 
    data-id="<?php echo $row->gambar; ?>"
    data-id="<?php echo $row->description; ?>"
    data-lat="<?php echo $row->lat; ?>" 
    data-lng="<?php echo $row->lng; ?>"
    data-lat2="<?php echo $row->lat2; ?>" 
    data-lng2="<?php echo $row->lng2; ?>"  
    data-place="<?php echo $row->nama; ?>" >
    <?php echo $row->nama; ?>
  </option>
<?php } ?>  
</datalist>

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?&sensor=false&libraries=places">
</script>

<script src="js/map.js"></script>