javascript 如何根据地址动态生成谷歌Map?

wooyq4lh  于 2023-01-07  发布在  Java
关注(0)|答案(6)|浏览(161)

详情

  • 我想打印基于<span>中存储的any地址的Map
  • 我的地址是:410 walker street Lowell MA 01851
  • 我的<span>Address: <span id="address" > 410 walker street Lowell MA 01851 </span>
  • 我想使用Google Map API来实现这一点

我所尝试的

Address: <span id="address" > 410 walker street Lowell MA 01851 </span>

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

<!-- "Highlight a place or an address" -->
<iframe 

width="600" height="450" frameborder="0" style="border:0"
src="

https://www.google.com/maps/embed/v1/place?q=

410+walker+street+Lowell+MA+01851

&key=*****

">

</iframe>

这是我的结果

到目前为止一切顺利,一切正常,之所以正常,是因为我手动输入了地址,如?q = 410+walker+street+Lowell+MA+01851
但我不想手动输入地址。我如何动态地做这件事?我需要一些建议-请。

我的方法

  • 我想知道是否可以将地址存储在变量$address
  • $地址="410 walker street Lowell MA 01851";
  • 最后在HTML属性src=""的一部分中将它们打印出来,显示为"410 + walker + street + Lowell + MA +01851"。

问题

  • 我完全不确定这种方法是否是最佳做法。
  • 有可能吗?怎么可能?
  • 有谁能帮我解释一下吗?
5rgfhyps

5rgfhyps1#

我也做过类似的事。
如果你在iframe url中找到了?pb=,那就意味着它被缓存在某个地方了,如果你把自己的地址放进去,记住它需要被地理定位(lat,lng),而iframe本身不会为你做这些。

    • 没有API密钥**也可以执行此工作,您可以尝试执行以下操作:
$(document).ready( function(){
    var addr = 'Any Street 670, Any City';
    function(){  

        var embed= "<iframe width='425' height='350' frameborder='0'  
        scrolling='no' marginheight='0' marginwidth='0'    
        src='https://maps.google.com/maps?&amp;q="+   
        encodeURIComponent( addr ) +  
        "&amp;output=embed'></iframe>";  

        $('.place').html(embed);
    });
});

对我来说效果很好。
要使用坐标,请查看this SO问题。

9o685dep

9o685dep2#

使用$.text()检索地址,对其进行编码(通过encodeURIComponent),然后设置iframe的src-属性(通过使用编码后的地址):

<span id="address"> 410 walker street Lowell MA 01851 </span>
<iframe id="map" width="600" height="450"></iframe>
<script  type="text/javascript">
jQuery(
  function($)
  {
       var q=encodeURIComponent($('#address').text());
       $('#map')
        .attr('src',
             'https://www.google.com/maps/embed/v1/place?key=***&q='+q);

  }
);
</script>

演示:http://jsfiddle.net/doktormolle/pkjq1hrb/

klsxnrf1

klsxnrf13#

<?php $address = 'Any Street 670, Any City' ; /* Insert address Here */

echo '<iframe width="100%" height="170" frameborder="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=' . str_replace(",", "", str_replace(" ", "+", $address)) . '&z=14&output=embed"></iframe>';
                            ?>
w1jd8yoj

w1jd8yoj4#

你想显示基于地址的位置,用户输入?也许这将帮助你,但在限制有关数据存储在谷歌的地方服务器。试试这个代码片段,可能是一个小的帮助你。
我已经修改了我的答案,因为你没有使用jquery。如果你使用jquery,看看我以前的修订版。

var map_options = {
    center: new google.maps.LatLng(-2.548926, 118.0148634),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

var input = document.getElementById("keyword");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo("bounds", map);

var marker = new google.maps.Marker({
    map: map,
    zoom: 14,
    animation: google.maps.Animation.BOUNCE
});

google.maps.event.addListener(autocomplete, "place_changed", function () {
    var place = autocomplete.getPlace();

    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(15);
    }

    marker.setPosition(place.geometry.location);
});

google.maps.event.addListener(map, "click", function (event) {
    marker.setPosition(event.latLng);
});
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:530px; height:250px"></div>
<label for="keyword">Location :</label>
<input type="text" name="keyword" id="keyword">
ma8fv8wu

ma8fv8wu5#

根据你想完成什么,如果目标是向访客展示企业的最近位置到他们当前的位置,那么可以使用IP英特尔(城市网络)和他们的GPS位置的组合,在移动的上做到这一点.
我不知道你自己会如何从头开始做这件事,但我知道在Personyze这样的个性化软件服务上,有一个小部件,你只需上传位置,访问者就会自动显示离他们最近的位置。你也可以向他们提供附近的其他位置,等等。如果你是这样的用户,值得一试。

xkrw2x1b

xkrw2x1b6#

如果有人需要一个react解决方案,我创建了这个子组件:

export default function Map(props) {
    const address = `${props.winery.address} ${props.winery.city}, ${props.winery.state} ${props.winery.zip}`;
    const src     = `https://maps.google.com/maps?&q="+${address}"&output=embed`;
    const Embed = () => { 
        return(
            <div>
                <iframe 
                    width="100%" 
                    height="450"
                    allowFullScreen="" 
                    loading="lazy" 
                    referrerPolicy="no-referrer-when-downgrade" 
                    src={src}
                >
                </iframe>
            </div>
        );
    }

    return(
        <>
            <Embed />
        </>
    )
}

你可能需要调整 prop ,我传递的对象有所有必要的数据。

相关问题