使用文本地址与谷歌地图的街景地图 [英] Street View Map with Google Maps Using Text Address
问题描述
我在我的wordpress单个帖子页面上有一个Google地图，它从2个自定义字段中获取地址。它工作正常，但现在我试图添加街景视图链接/选项。
我在我的页面上 -
< iframe宽度=100％height =350frameborder =0scrolling =nomarginheight =0marginwidth =0src =https://www.google.com/maps/embed/v1/place如果（！empty（$ terms）&& amp; amp; amp; amp; amp; id = 0;< php + echo $ add;？>，％20<？php $ terms = wp_get_post_terms（get_the_ID（），'city-type' &！is_wp_error（$ terms））{
foreach（$ terms as $ term）{
if（$ term-> parent == 0）//只检查父项
echo''。$ term-> name。';
}
}？>& zoom = 17& key = mytoken>< / iframe>
然后输出这样的内容 -
< iframe width =100％height =350frameborder =0scrolling =nomarginheight =0marginwidth =0src =https ：//www.google.com/maps/embed/v1/place？q = 100 las vegas ave，％20Las Vegas，NV& zoom = 17& amp; key = mytoken>< / iframe>
有没有办法在不使用坐标的情况下添加街景视图？
我尝试获取坐标，但它们略微偏离 -
<？php
函数getCoordinates（$ address）{
$ address = str_replace（，+，$ address）; //用+符号替换所有空格以匹配谷歌搜索模式
$ url =https://maps.google.com/maps/api/geocode/json?sensor=假放;地址= $地址;
$ response = file_get_contents（$ url）;
$ json = json_decode（$ response，TRUE）; //从web的响应中生成数组对象
$ b $ return（$ json ['results'] [0] ['geometry'] ['location'] ['lat']。， 。$ JSON [ '结果'] [0] [ '几何'] [ '位置'] [ 'LNG']）;
$ terms = wp_get_post_terms（get_the_ID（），'city-type'）;
if（！empty（$ terms）&&！is_wp_error（$ terms））{
foreach（$ terms as $ term）{
if（$ term-> parent = = 0）//仅检查父项
echo getCoordinates（$ add，$ term-> name，$ property_pin）;
}
} else {
echo getCoordinates（$ add，$ term-> name，$ property_pin）;
}
？>
我已经在使用地理编码来尝试获取坐标。例如，地理编码为我提供了这些坐标 - 34.0229995，-118.4931421 ，但我正在寻找的坐标是 - 34.050217，-118.259491
$ b $ 地址的坐标 - <？php
//函数将地址转换成坐标
函数getCoordinates（$ address）{
$ address = str_replace（，+，$ address）; //用+符号替换所有空格以匹配谷歌搜索模式
$ url =https://maps.googleapis.com/maps/api/geocode/json?address= $地址和放大器;关键= YOUR_TOKEN_KEY;
$ response = file_get_contents（$ url）;
$ json = json_decode（$ response，TRUE）; //从web的响应中生成数组对象
$ b $ return（$ json ['results'] [0] ['geometry'] ['location'] ['lat']。， 。$ JSON [ '结果'] [0] [ '几何'] [ '位置'] [ 'LNG']）;
}
//这是我从我的习俗分类I.E.纽约，纽约
$ terms = wp_get_post_terms（get_the_ID（），'city-type'）;
if（！empty（$ terms）&&！is_wp_error（$ terms））{
foreach（$ terms as $ term）{
if（$ term-> parent = = 0）//仅检查父项术语
// $从我的自定义字段中添加ADDRESS IE 1460 BROADWAY
$ the_address = getCoordinates（$ add，$ term-> name）;
}
}; ？>
然后我简单地使用下面的谷歌嵌入代码（用你自己的代替标记键）---
< iframe width =100％height =350frameborder =0style =border：0
src =https://www.google.com/maps/embed/v1/streetview?location=<?php echo $ the_address;？>& heading = 165& pitch = 0& key = YOUR -TOKEN-KEYallowfullscreen>< / iframe>
这是为了添加街景地图，我想都是这样，所以我做的是创建两个div，一个为每个地图，然后只是使用点击功能来显示/隐藏它们 - $ /
pre $ j $ j $ jQuery（document）.ready（function（ ）{
$（＃sv-link）。click（function（）{
$（＃rv-box）。slideToggle（fast）;
$（点击（功能（）{
$（＃sv-box）。slideToggle（）;
}）;
$（＃rv-link ）.slideToggle（fast）;
$（＃rv-box）。slideToggle（）;
}）;
}）;
我知道这可能不是最好的解决方案，我可以深入挖掘，但这是我所需要的。我遇到了一个问题，有几个地址有一个位置有多个图像/视角。我试图弄清楚，使用地址1460 broadway的时代平方英尺，是一个完美的例子。除此之外，它似乎工作正常。
I have a google map on my wordpress single post page that grabs the address from 2 custom fields. It works fine, but now I'm trying to add a street view link/option.
I have on my page --
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=<?php echo $add; ?>,%20<?php $terms = wp_get_post_terms(get_the_ID(), 'city-type');
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
foreach ( $terms as $term ) {
if ($term->parent == 0) //check for parent terms only
echo '' . $term->name . '';
}
} ?>&zoom=17&key=mytoken"></iframe>
Which will then output something like this --
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=100 las vegas ave,%20Las Vegas, NV&zoom=17&key=mytoken"></iframe>
Is there a way to add street view without using coordinates?
I tried getting the coordinates but they were slightly off --
<?php
function getCoordinates($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "https://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);
}
$terms = wp_get_post_terms(get_the_ID(), 'city-type');
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
foreach ( $terms as $term ) {
if ($term->parent == 0) //check for parent terms only
echo getCoordinates($add, $term->name, $property_pin);
}
} else {
echo getCoordinates($add, $term->name, $property_pin);
}
?>
I'm already using geocode to try and get the coordinates before hand. For example the geocode gives me these coordinates -- 34.0229995,-118.4931421 but the coordinates I'm looking for is -- 34.050217,-118.259491
Ok, I figured it out.
I used the code from my question to get the coordinates of the address --
<?php
// FUNCTION TO CONVERT ADDRESSES INTO COORDINATES
function getCoordinates($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "https://maps.googleapis.com/maps/api/geocode/json?address=$address&key=YOUR_TOKEN_KEY";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);
}
// THIS GETS MY TOP TERM FROM MY CUSTOM TAXONOMY I.E. NEW YORK, NY
$terms = wp_get_post_terms(get_the_ID(), 'city-type');
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
foreach ( $terms as $term ) {
if ($term->parent == 0) //check for parent terms only
// $ADD IS FROM MY CUSTOM FIELD FOR THE ADDRESS I.E. 1460 BROADWAY
$the_address = getCoordinates($add, $term->name);
}
}; ?>
Then I simply used the following google embed code (replace token key with your own) ---
<iframe width="100%" height="350" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/streetview?location=<?php echo $the_address; ?>&heading=165&pitch=0&key=YOUR-TOKEN-KEY" allowfullscreen></iframe>
That's for adding the street view map, I wanted both though so what I did was create two divs, one for each map and then just use click functions to show/hide them --
jQuery(document).ready(function(){
$("#sv-link").click(function(){
$("#rv-box").slideToggle("fast");
$("#sv-box").slideToggle();
});
$("#rv-link").click(function(){
$("#sv-box").slideToggle("fast");
$("#rv-box").slideToggle();
});
});
I know it's probably not the best solution and I can probably dig deeper but this is all I needed. I did run into a issue with a couple addresses that had multiple images/perspectives for one location. I'm trying to figure that out, times square footlocker using the address 1460 broadway, is a perfect example.
Besides that it seems to work fine.
这篇关于使用文本地址与谷歌地图的街景地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
