Gmap3 Google Maps 使用地理编码位置将地图居中答案

【问题标题】：Gmap3 Google Maps using a geocoded location to center the mapGmap3 Google Maps 使用地理编码位置将地图居中
【发布时间】：2014-05-09 14:54:04
【问题描述】：

我正在使用 Gmap3 http://gmap3.net/ 从产品的库存商处计算客户位置。我可以使用 php 将供应商的地址从 mysql db 中提取出来，但我不确定如何使用第一部分中的地理编码地址将地图居中放在该位置。

地理编码标记很好地出现在地图上，但我不确定如何将地图居中。

我尝试的是 center:latLng，但这似乎不起作用。

    <script type="text/javascript">

      $(function(){

        $('#test1').gmap3({
            getlatlng:{
    address:  "Paris, France",
    callback: function(results){
      if ( !results ) return;
      $(this).gmap3({
        marker:{
          latLng:results[0].geometry.location,
                 }
      });
    }
  },
          map:{
            options:{
              center:[52.9045147,-2.1685132],
              zoom: 6
            }
          },
          marker:{
            values:[
                <?php
    include '../connect.php';
$sql = <<<SQL
SELECT * FROM `suppliers`
SQL;
if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
while($row = $result->fetch_assoc()){
echo '{address:"'.$row['address'].'", data:"'.$row['name'].'"},';
    }
    ?>

            //  {address:"66000 Perpignan, France", data:"Perpignan ! <br> GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
            ],
            options:{
              draggable: false
            },
            events:{
              mouseover: function(marker, event, context){
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.open(map, marker);
                  infowindow.setContent(context.data);
                } else {
                  $(this).gmap3({
                    infowindow:{
                      anchor:marker, 
                      options:{content: context.data}
                    }
                  });
                }
              },
              mouseout: function(){
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
              }
            }
          }
        });
      });
    </script>

【问题讨论】：

Google Map API v3 - Centre Map on Markers的可能重复
那个答案谈到了将地图放在标记上的问题，我只想在初始化时将地图放在地理编码位置的中心，另外就是谷歌地图 api，因为这是 gmap3 一个使用的 jquery 脚本google maps api，但也有自己的命令。

标签： php jquery mysql google-maps jquery-gmap3

【解决方案1】：

这似乎有效：

          $(function(){

            $('#test1').gmap3({
                            getlatlng:{
        address:  "Paris, France",
        callback: function(results){
          if ( !results ) return;
          $(this).gmap3({
               map:{
                options:{
                  center:results[0].geometry.location,
                  zoom: 6
                }
              },
                     marker:{
              latLng:results[0].geometry.location,  
                     }
          });
        }
      },

              marker:{
                values:[
                    <?php
        include '../connect.php';
    $sql = <<<SQL
    SELECT * FROM `suppliers`
    SQL;
    if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
    while($row = $result->fetch_assoc()){
    echo '{address:"'.$row['address'].'", data:"'.$row['name'].'"},';
        }
        ?>

                //  {address:"66000 Perpignan, France", data:"Perpignan ! <br> GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
                ],
                options:{
                  draggable: false
                },
                events:{
                  mouseover: function(marker, event, context){
                    var map = $(this).gmap3("get"),
                      infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                      infowindow.open(map, marker);
                      infowindow.setContent(context.data);
                    } else {
                      $(this).gmap3({
                        infowindow:{
                          anchor:marker, 
                          options:{content: context.data}
                        }
                      });
                    }
                  },
                  mouseout: function(){
                    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                      infowindow.close();
                    }
                  }
                }
              }
            });
          });

【讨论】：