8

我认为自己是一名普通的 PHP 编码员，但我几乎无法编辑我网站上需要的少量 JavaScript 代码。我在 PHP 变量中有一个地址，我希望在我的网页上显示一个带有该地址的简单地图。我在互联网上进行了一些研究，发现了很多操作地理编码，将地址转换为 Google API 可以理解的位置，但我完全迷路了。没有可以嵌入变量的简单代码吗？

4

7 回答 7

29

您可以使用 iframe 并将地址作为 URL 参数传递。

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q=<?php echo $yourAddress; ?>&output=embed"></iframe>
于 2012-08-25T16:23:37.343 回答
3

您必须使用Geocoder API。

给你（原件可以在这里找到）：

<head>
...
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();

    var mapOptions = {
      zoom: 12, //Change the Zoom level to suit your needs
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    //map_canvas is just a <div> on the page with the id="map_canvas"
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    //Your Variable Containing The Address
    var address = "<?php echo $AddressVariable; ?>"; 
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        //places a marker on every location
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });

  }

</script>
...
</head>

将此添加到页面的开始body标记以初始化地图：

<body onload="initialize()">

这是该课程的文档Geocoder。

于 2012-08-25T21:18:09.827 回答
1

更新的代码 - 现在需要 API 密钥。您可能需要对地址进行 urlencode，但如果没有它，它甚至应该可以工作：

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q=<?php echo $address; ?>" allowfullscreen>
</iframe>

来源：https ://developers.google.com/maps/documentation/embed/get-started

于 2021-01-18T10:43:06.710 回答
0 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<?php 
 $address = str_replace(" ", "+",$address_variable);
?>
<iframe style="width:100%;height:50%;" frameborder="0" id="cusmap" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q=<?php echo $address; ?>&output=embed"></iframe>
于 2016-03-11T08:06:32.183 回答
0

这里还有另一个例子：

<div class="container rounded border shadow-sm info-property mt-4 pt-4 pl-5 pr-5 pb-2 bg-white">
    <div class="row mt-3">
        <div class="col-12">
            <h6 class="info-property-title">Mapa:</h6>
        </div>
        <div class="col-12">
            <iframe width="100%" height="100%" 
                src="https://maps.google.it/maps?q=<?php echo $map_address; ?>&output=embed"
                frameborder="0" 
                style="border:0;" 
                allowfullscreen="" 
                aria-hidden="false" 
                tabindex="0"
                scrolling="no" 
                marginheight="0" 
                marginwidth="0"
                >
            </iframe>
        </div>
    </div>
</div>
于 2020-08-28T18:53:13.490 回答
0

嵌入 Gmap

谷歌地图的不同模式：https ://developers.google.com/maps/documentation/embed/embedding-map 这里

选择地图模式

您可以在请求 URL 中指定以下地图模式之一：

  1. place：在特定地点或地址（例如地标、商业、地理特征或城镇）显示地图图钉。

  2. view：返回没有标记或方向的地图。

  3. 方向：显示地图上两个或多个指定点之间的路径，以及距离和旅行时间。

  4. 街景：显示指定位置的交互式全景视图。

  5. search：显示整个可见地图区域的搜索结果。

     <div id="maps"></div>

     $(document).ready(function() {   
        var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';
        var lat = '54.320889726653014';
        var lon = '-130.30591155093268';
        var addr = '<?php echo sanitize($restaurant_details['address']); ?>';  
        var width = 350;
        var height = 350;    

        var embed= "<iframe width='"+width+"' height='"+height+"' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'src='https://www.google.com/maps/embed/v1/view?key="+key+"&zoom=18&center="+lat+","+lon+"'></iframe>";

    $('#maps').html(embed);
});
于 2021-01-31T10:59:27.830 回答
-1

这些链接对您来说是完整的..不是确切的链接，而是它的完整使用:) tc..

1)从谷歌地图 iframe 中删除地址气泡

2)谷歌地图

于 2013-06-11T08:04:35.930 回答