Fatal编程技术网
  • javascript/
  • Javascript 如何使用php<；在模式加载上加载google地图；？php$row['；address'；]？>；从MySQLi数据库中提取的地址

Javascript 如何使用php<；在模式加载上加载google地图；？php$row['；address'；]？>；从MySQLi数据库中提取的地址

javascript php html

Javascript 如何使用php<；在模式加载上加载google地图；？php$row['；address'；]？>；从MySQLi数据库中提取的地址,javascript,php,html,Javascript,Php,Html,我有一个模式，弹出客户姓名、地址和其他信息，包括一个显示在模式上的带有谷歌地图的框。我想能够弹出模式与谷歌地图加载的客户地址显示与标记pin 当前地图已加载，但不是客户地址的位置。我必须单击一个更新按钮，以便将地图更改为带有标记pin的客户地址，这确实有效，但我希望它自动加载，而不必单击更新按钮 提前谢谢你的帮助 //This is in the <head> section of index.php // Google Maps API *************

我有一个模式，弹出客户姓名、地址和其他信息，包括一个显示在模式上的带有谷歌地图的框。我想能够弹出模式与谷歌地图加载的客户地址显示与标记pin

当前地图已加载，但不是客户地址的位置。我必须单击一个更新按钮，以便将地图更改为带有标记pin的客户地址，这确实有效，但我希望它自动加载，而不必单击更新按钮

提前谢谢你的帮助

    //This is in the <head> section of index.php

    // Google Maps API ******************************************* -->
    <script async defer src="https://maps.googleapis.com/maps/api/js? 
            key=YOURKEY=initMap"></script>

     // Google Maps ------>
     <script type="text/javascript" src="./js/GoogleMaps.js"></script>

    //Here is javascript file: GoogleMaps.js
    <script>
     function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
          });
    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });
  }

  function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address').value;
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + 
      status);
      }
    });
  }
   </script>


   //In the <body> I have the following display box for the map
   <div id="map" style="width: 300px; height: 160px; border-radius: 6px;"> 
    </div>


  // In the modal-footer I have the following button that currently updates the map with the 
     Customers address:

  <button style="margin-top: 2px;" id="submit" type="button" class="btn btn-primary" 
   value="address">Save changes</button>

//这在index.php的部分中
//谷歌地图API***********************************************************************-->
//谷歌地图------>
//下面是javascript文件：GoogleMaps.js
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：{纬度：-34.397，液化天然气：150.644}
});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
地理编码地址（地理编码器、地图）；
});
}
函数geocodeAddress（geocoder，resultsMap）{
var address=document.getElementById（'address'）。值；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
如果（状态=='OK'）{
resultsMap.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：结果地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（'地理代码未成功，原因如下：'+
地位）；
}
});
}
//在中，我有以下地图显示框
//在模式页脚中，我有以下按钮，该按钮当前使用
客户地址：
保存更改
PHP代码在JavaScript代码中不活动

这里

{“地址”：
地址的值不变。

我无法使您的地图（在您提供的小提琴中）正常工作，因此我使用了一个前不久为类似问题准备的示例。在我的示例中，我通过html中的数据属性将
lat/lng
传递给javascript

演示：

很接近，但除非它存储为JS转义字符串，并在其周围加上引号，否则这不会起作用solution@KevinLynch我创造了一把小提琴，我从来没有创造过一把b/4。。但是我看到我在参考地图时出错了。不确定是什么原因造成的。这是小提琴。。我制作的程序与我的主程序非常相似，太大了，无法加载。好的，第三次是一种魅力。。模态工作，但我仍然从地图脚本中得到一个错误，我相信。。。我没有在谷歌脚本中输入我的密钥。。。有没有办法使用临时密钥来共享此信息？这里是jfiddle:@KevinLynch好的，我修复了地图问题，一切正常，你需要为谷歌脚本添加一个密钥。感谢您的关注-这是最新的小提琴： 
{ 'address': <?php echo $row['OfficeAddress']; ?>}

  // Re-init map before show modal
  $('#myModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    initializeGMap(button.data('lat'), button.data('lng'));
    $("#location-map").css("width", "100%");
    $("#map_canvas").css("width", "100%");
  });