使用文本地址的谷歌地图街景地图

Posted

技术标签:

【中文标题】使用文本地址的谷歌地图街景地图【英文标题】:Street View Map with Google Maps Using Text Address 【发布时间】:2018-04-21 13:56:20 【问题描述】:

我的 wordpress 单个帖子页面上有一个谷歌地图,它从 2 个自定义字段中获取地址。它工作正常,但现在我正在尝试添加街景链接/选项。

我的页面上有 --

<iframe   frameborder="0" scrolling="no" margin margin 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>

然后会输出这样的东西 --

<iframe   frameborder="0" scrolling="no" margin margin src="https://www.google.com/maps/embed/v1/place?q=100 las vegas ave,%20Las Vegas, NV&amp;zoom=17&amp;key=mytoken"></iframe>

有没有办法在不使用坐标的情况下添加街景?

我尝试获取坐标,但它们有点偏离 --

<?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);


?>

我已经在使用地理编码来尝试事先获取坐标。例如,地理编码给了我这些坐标——34.0229995,-118.4931421,但我正在寻找的坐标是——34.050217,-118.259491

【问题讨论】:

不,遗憾的是仍然没有办法先通过地理编码来做到这一点:***.com/questions/387942/google-street-view-url?rq=1 有什么替代方案? 检查另一个问题 :-) 如果你想拥有街景,你需要纬度/经度,你可以得到地理编码。 在我的问题中,我说我尝试使用地理编码,但坐标偏离了一小部分。 【参考方案1】:

好的,我想通了。

我使用问题中的代码来获取地址的坐标--

<?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);    
     
  ; ?>

然后我简单地使用了以下 google 嵌入代码(将令牌密钥替换为您自己的)---

<iframe   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>

那是为了添加街景地图,虽然我想要两者,所以我所做的是创建两个 div,每个地图一个,然后只需使用点击功能来显示/隐藏它们 --

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();
);

);

我知道这可能不是最好的解决方案,我可能可以更深入地挖掘,但这就是我所需要的。我确实遇到了几个地址的问题,这些地址在一个位置有多个图像/视角。我试图弄清楚,使用百老汇 1460 号地址的时代广场储物柜就是一个很好的例子。

除此之外,它似乎工作正常。

Google Maps

【讨论】:

这是否也解决了准确性问题?很高兴你解决了它。 :D 准确性问题是由于我错过了地址中的城市。

以上是关于使用文本地址的谷歌地图街景地图的主要内容,如果未能解决你的问题,请参考以下文章

为啥手机上不能用谷歌地图

如何使用地形地图类型设置基于云的谷歌地图样式?

如何在 Global Mapper中打开谷歌卫星地图

缩放控制和街景没有显示在我的 Google 地图上?

使用片段的谷歌地图

html 街景和常规视图iframe谷歌地图代码