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

时间:2017-11-08 18:33:20

标签: javascript php wordpress google-maps google-street-view

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

我在我的页面上 -

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

然后输出这样的东西 -

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

2 个答案:

答案 0 :(得分:6)

好的,我明白了。

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

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

然后我只使用以下谷歌嵌入代码(用您自己的替换令牌密钥)---

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

这是为了添加街景地图,我想要两个,但我做的是创建两个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

答案 1 :(得分:-1)

如果您获得坐标,您将拥有准确的位置。这些天浏览器可以请求权限,移动设备可以附带GPS。使用地址并不精确。

如果你得到用户的话,对于简单地询问数据的可用性论点是什么?首先同意吗?