iframe Google Map 在 url 中传递地理位置答案

【问题标题】：Iframe Google Map Passing the Geolocation in the urliframe Google Map 在 url 中传递地理位置
【发布时间】：2016-02-08 13:59:08
【问题描述】：

我正在使用此代码来绘制和谷歌地图。它可以工作，但我想添加一个调整，而不是让弹出窗口来获取我想在 url 中传递它的地理位置。

这里是html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HTML5 Geo Location API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myApiKeyHere&sensor=true"></script>




    <style>
        div.location {
             width: 100%;
             height: 400px;
        }
    </style>    
</head>
<body>
    <div id="page">
        <div class="location"></div>
    </div>
    <!-- [/page] -->
    <script> 

        (function ( $ ) {
            $.fn.GeoLocation = function( options ) {
                var settings = $.extend({
                    home: { latitude: 52.89770, longitude: -1.15596 },
                }, options );

                var home = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);

                return this.each(function() {   
                    var element = $(this);
                    element.text('Attempting to find your location');

                    function displayCurrentPosition(data) {
                        element.html('<div class="map-canvas"></div>');

                        var current = new google.maps.LatLng(data.coords.latitude, data.coords.longitude);

                        var options = {
                            center: current,
                            mapTypeId: google.maps.MapTypeId.HYBRID,
                            zoom: 10,
                        };

                        var map = new google.maps.Map(element[0], options);

                        var directions = {
                            origin: current,
                            destination: home,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        };

                        display = new google.maps.DirectionsRenderer({ map: map });

                        service = new google.maps.DirectionsService();
                        service.route(directions, function(response, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                display.setDirections(response);
                            }
                            else
                                alert ('failed to get directions');
                        });
                    }

                    function onError(error) {
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                element.text('Access to location API denied by user');
                                break;
                            case error.POSITION_UNAVAILABLE:
                                element.text('Unable to determine location');
                                break;
                            case error.TIMEOUT:
                                element.text('Unable to determine location, the request timed out');
                                break;
                            case error.UNKNOWN_ERROR:
                                element.text('An unknown error occurred!');
                                break;
                        }
                    }

                    if(navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(displayCurrentPosition, onError);
                    } else {
                        element.text('Geolocation is not supported by this browser, please upgrade to a more recent version');
                    }
                });

            };

        }( jQuery ));

        jQuery(document).ready(function() {
            jQuery('div.location').GeoLocation();
        });

    </script>

</body>
</html>

我是这样称呼它的：

<iframe src="mywebsiteurlhere/map.html" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

我该怎么做？

【问题讨论】：

相关问题：How can I get query string values in JavaScript?

标签： javascript jquery google-maps

【解决方案1】：

如果我正确理解您的问题，您可以简单地将参数传递到 iframe，如下所述：How to pass parameters through iframe from parent html?

<iframe src="mywebsiteurlhere/map.html?param=geolocation" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

【讨论】：