javascript 如何根据地址动态“生成”谷歌地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27877741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically `generate` a google map base on an address ?
提问by iori
Details
细节
- I want to print a map base on
anyaddress that are stored in my<span> - My address is :
410 walker street Lowell MA 01851 - My
<span>isAddress: <span id="address" > 410 walker street Lowell MA 01851 </span> - I want to use Google Map API for that
- 我想根据
any存储在我的地址中的地址打印地图<span> - 我的地址是 ：
410 walker street Lowell MA 01851 - 我的
<span>是Address: <span id="address" > 410 walker street Lowell MA 01851 </span> - 我想为此使用 Google Map API
What I have tried
我试过的
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>
Here is my result
这是我的结果
So far so good, everything is working, and it's work because I input the address manually
like this ?q = 410+walker+street+Lowell+MA+01851
到目前为止一切都很好，一切正常，并且可以正常工作，因为我像这样手动输入地址 ?q = 410+walker+street+Lowell+MA+01851
but I don't want the input the address manually. How do I do this dynamically ? I need some suggestions - please.
但我不想手动输入地址。我如何动态地做到这一点？我需要一些建议 - 请。
My Approach
我的方法
I was wondering if I can store my address in a variable
$address$address = "
410 walker street Lowell MA 01851";and finally print them back out as "410+walker+street+Lowell+MA+01851" in part of my HTML attribute
src="".
我想知道是否可以将我的地址存储在变量中
$address$地址 = "
410 walker street Lowell MA 01851";最后在我的 HTML 属性的一部分中将它们打印为“410+walker+street+Lowell+MA+01851”
src=""。
Questions
问题
- I am not sure at all that this approach is the best practice for this.
- Is it possible ? How ?
- Can anyone help shed the light on this ?
- 我完全不确定这种方法是否是最佳实践。
- 是否可以 ？如何 ？
- 任何人都可以帮助阐明这一点吗？
回答by Evhz
I was doing similar stuff.
我正在做类似的事情。
If you find ?pb=within the iframe url, it means that it's cached somewhere. In case you put your own address, have in mind that it needs to be geolocated (lat, lng) and the iframe itself doesn't do that for you.
如果您?pb=在 iframe url 中找到，则表示它已缓存在某处。如果您输入自己的地址，请记住它需要进行地理定位（lat、lng）并且 iframe 本身不会为您执行此操作。
Also explained here, it is possible to do the work without API Keyyou could try to do something like:
还解释了here，可以在没有 API Key 的情况下完成工作，您可以尝试执行以下操作：
$(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?&q="+
encodeURIComponent( addr ) +
"&output=embed'></iframe>";
$('.place').html(embed);
});
});
It is working nicely for me.
它对我来说很好用。
For working also with coordinates, have a look at thisSO question.
对于坐标的工作，看看这个SO question。
回答by Dr.Molle
Use $.text()to retrieve the address, encode it(via encodeURIComponent), and then set the src-attribute of the iframe(by using the encoded address):
使用$.text()检索地址，编码它（通过encodeURIComponent），并且然后设置src的iframe -attribute（通过使用编码的地址）：
<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>
回答by Designerhill
<?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>';
?>
回答by Eko Junaidi Salam
you wanna show location based on address that user input ? may be this will help you, but in limitation about data storing on google place server. try this code snippet, may be a little help for you.
您想根据用户输入的地址显示位置吗？可能这会帮助你，但在谷歌地方服务器上存储数据的限制。试试这个代码片段，可能对你有一点帮助。
I've edited my answer, because you're not using jquery. If you're using jquery, look at my previous revision..
我已经编辑了我的答案，因为您没有使用 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">回答by Riley
Depending on what you want to accomplish, if the goal is to show the visitor the nearest location of a business to their current location, then it's possible to do this using a combination of IP intel (city network) and their GPS location, on mobile.
根据您想要完成的任务，如果目标是向访问者展示离他们当前位置最近的企业位置，那么可以在移动设备上使用 IP 英特尔（城市网络）和他们的 GPS 位置的组合来实现这一点.
I'm not sure how you would do this yourself from scratch, but I do know that on personalization software services like Personyze, there is a widget for it, you simply upload locations and the visitor is automatically shown the location that is closest to them. You can also offer them alternative locations nearby, etc. Worth checking out, if that's your use case.
我不确定你会如何从头开始自己做这件事，但我知道在像 Personyze 这样的个性化软件服务上，有一个小部件，你只需上传位置，访问者就会自动显示离他们最近的位置. 您还可以为他们提供附近的替代位置等。如果这是您的用例，那么值得一试。
