具有不同地址的 Google 地图位置 onclick答案

【问题标题】：Google Maps location with different address onclick具有不同地址的 Google 地图位置 onclick
【发布时间】：2017-01-10 08:16:30
【问题描述】：

我为 Google 地图位置编写了一些 HTML。

在页面中，我创建了两个不同的地址，按钮为View on map，因此当我单击按钮时，它会重定向到另一个页面，在该页面中它应该只使用该地址来获取 Google 地图位置。

但是，在结果页面上，它只显示了一个地址的谷歌地图位置。该脚本可以使用任何地址，但我需要它来处理onClick 事件。

以下是链接：

（此页面链接将向您显示两个带有各自按钮的地址）

http://happy1.studioscue.in/hello.html

...另一个链接将向您显示应显示 Google 位置的结果页面。只有一张澳大利亚谷歌地图，那是因为我在身体标签和页面下使用澳大利亚。链接是：

http://happy1.studioscue.in/google.html

【问题讨论】：

您从未将任何地图参数或坐标传递给 google.html
这个问题的链接已经失效，任何依赖外部链接的问题都有风险。这确实意味着它需要关闭。请尽量让您的问题保持独立，以限制所需的关闭和删除量。

标签： javascript php jquery html

【解决方案1】：

正如@Devs 在上面的评论中提到的，您必须将一些地图参数（地名或坐标）传递给 google.html 页面。我将您的 hello 页面修改为：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>

    <body>
        <address>
            Sector 75-Noid...
        </address>
        <a href="google.html?q=France"><button type="button">view on map</button></a>

        <address>Delhi</address>
        <a href="google.html?q=Delhi"><button type="button">view on map</button></a>
    </body>
</html>

如您所见，google.html 链接现在具有“q”查询字符串参数，将在 google.html 页面中使用：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
        <meta charset=utf-8 />
        <title>Welcome to JS Bin</title>
        <meta name="viewport" content="width=device-width">
        <link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
        <script type="text/javascript">
            $(document).ready(function() {
                $("address").each(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( getParameterByName('q') ) +"&amp;output=embed'></iframe>";
                    $(this).html(embed);       
                });

                function getParameterByName(name, url) {
                    if (!url) {
                        url = window.location.href;
                    }
                    name = name.replace(/[\[\]]/g, "\\$&");
                    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                    if (!results) return null;
                    if (!results[2]) return '';
                    return decodeURIComponent(results[2].replace(/\+/g, " "));
                }
            });
        </script>
    </head>
    <body>
        <address>Australia</address>
    </body>
</html>

您可以尝试工作演示here

【讨论】：

你好，我检查了你的演示，但第一个地址是扇区 75-noida，但点击它显示法国地图位置&我在代码中看到你为两个地址编写代码，但会有很多地址，所以他们都必须手动在ancher标签中编写代码？ & 是否可以使用动态地址，请尽快回复我，谢谢和问候