Google地图将lat和long从InfoWindow传递到URL

时间：2014-02-24 10:09:57

标签： javascript html google-maps google-maps-api-3

我有这个谷歌地图传递lat和很长的其他版本。此版本可以正常显示标记，这意味着在地图中存在这些值。但是，当我单击map_more_button.png时，它不会将链接发送到指定的URL。

这是工作版本：

http://goodnite.jp/tokyo/map/android_map_mobile.html

这是需要更新的地图：

http://goodnite.jp/tokyo/map/android_map_mobile_single.html

以下是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!--<meta http-equiv="content-type" content="text/html; charset=utf-8"/>-->
    <meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<title>GOODNITE TOKYO ~ Locations Map (MOBILE)</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"
        type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

    var map ;

     var customIcons = {
  club: {
    icon: 'http://goodnite.jp/tokyo/map/marker_small_club.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  bar: {
    icon: 'http://goodnite.jp/tokyo/map/marker_small_bar.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  karaoke: {
    icon: 'http://goodnite.jp/tokyo/map/marker_small_karaoke.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

    var styles = [{"stylers": [{ "invert_lightness": true }]}];

function load() {
        //hideAddressBar();
        var name ="";      
    var address = "";
    var type = "";
    var lat = "0.0";
    var lng = "0.0";

        var Url=window.location.href;//如果想获取框架顶部的url可以用 top.window.location.href
        var u,g,StrBack='';
        if(arguments[arguments.length-1]=="#")
        u=Url.split("#");
        else
        u=Url.split("?");
        if (u.length==1) g='';
        else g=u[1];

        if(g!=''){
        var gg=g.split("&");
        var MaxI=gg.length;
        str = "lat=";
        //for(xm=0;xm<MaxI;xm++){
    if(gg[0].indexOf(str)==0) {
        lat=gg[0].replace(str,"");
    }

    str="lng="
    if(gg[1].indexOf(str)==0) {
        lng=gg[1].replace(str,"");
    }

    str="name="
    if(gg[2].indexOf(str)==0) {
        name=decodeURI(gg[2].replace(str,""));
    }

    str="address="
    if(gg[3].indexOf(str)==0) {
        address=decodeURI(gg[3].replace(str,""));
    }

    str="type="
    if(gg[4].indexOf(str)==0) {
        type=gg[4].replace(str,"");
    }
    //}
        }

        var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

    map = new google.maps.Map(document.getElementById("map"), {
    center: point,
    zoom: 17,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    //var html = "<b>" + name + "</b> <br/>" + address + "<br><span id='move_span'><a href='javascript:proMoreShow();'><img src='http://goodnitetokyo.com/mobile/images/map_more_button.png' width='48' height='16' /></a></span><span id='more_info' style='display:none;'>LAT: "+lat+"   >LNG: "+lng+"</span>";


    var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='javascript:directionsClick(\"" + point.toUrlValue() + "\");'><img src='http://goodnite.jp/tokyo/mobile/images/map_more_button.png' width='48' height='16' /></a>";

    var icon = customIcons[type] || {};

    var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
    });


    var infoWindow = new google.maps.InfoWindow;
    bindInfoWindow(marker, map, infoWindow, html);

    function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
    }

    function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
        }
    };

    request.open('GET', url, true);
    request.send(null);
 }

function doNothing() {}

//var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='javascript:directionsClick(\"" + point.toUrlValue() + "\");'><img src='http://goodnite.jp/tokyo/mobile/images/map_more_button.png' width='48' height='16' /></a>";

 function directionsClick(latlng){
    var myURL = 'https://maps.google.com/maps?saddr=&daddr=' + latlng + '&sensor=TRUE';
    //var myURL = 'comgooglemaps://?saddr=&daddr=' + latlng + '&sensor=TRUE';
    //var myURL = 'geo:' + latlng + '?z=15';
    window.open(myURL,"_blank");
}


  function hideAddressBar()
  {

    if(!window.location.hash)
        {
    if(document.height < window.outerHeight)
    {
        document.body.style.height = (window.outerHeight + 50) + 'px';
    }
    setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
    }

    };
}
function proMoreShow()
    {
        $("#move_span").css({display:"none"});
        $("#more_info").css({display:"block"});
    }   
  </script>

  <link href="css/style.css" rel="stylesheet" type="text/css">

  </head>

  <body onLoad="load()">
    <div id="map" style="width: 100%; height: 100%"></div>
  </body>
</html>

是否需要返回，存储某些值或将其正确传递给按钮？

感谢阅读。

1 个答案:

答案 0 :(得分：0)

我已经从您的示例中创建了一个有效的JSFiddle

我发现您发布的Javascript存在以下问题：

一个。 load（）函数没有关闭括号}所以我修改了代码如下：

    ...
    var infoWindow = new google.maps.InfoWindow;
    bindInfoWindow(marker, map, infoWindow, html);
    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
        });
    }
}

湾hideAddressBar()函数定义不明确（它有一个额外的};）。我删除了这个函数是：

function hideAddressBar() {
    if (!window.location.hash) {
        if (document.height < window.outerHeight) {
            document.body.style.height = (window.outerHeight + 50) + 'px';
        }
        setTimeout(function () {
            window.scrollTo(0, 1);
        }, 50);
    }
}

完整的代码是：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--<meta http-equiv="content-type" content="text/html; charset=utf-8"/>-->
    <meta http-equiv="content-type" content="text/html; charset = UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!-- this is the part responsible for hidding the bottom bar -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>GOODNITE TOKYO ~ Locations Map (MOBILE)</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[

        var map;

        var customIcons = {
            club: {
                icon: 'http://goodnite.jp/tokyo/map/marker_small_club.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            bar: {
                icon: 'http://goodnite.jp/tokyo/map/marker_small_bar.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            karaoke: {
                icon: 'http://goodnite.jp/tokyo/map/marker_small_karaoke.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
        };

        var styles = [{
            "stylers": [{
                "invert_lightness": true
            }]
        }];

        function load() {
            //hideAddressBar();
            var name = "";
            var address = "";
            var type = "";
            var lat = "0.0";
            var lng = "0.0";

            var Url = window.location.href; //??????????url??? top.window.location.href
            var u, g, StrBack = '';
            if (arguments[arguments.length - 1] == "#") u = Url.split("#");
            else u = Url.split("?");
            if (u.length == 1) g = '';
            else g = u[1];

            if (g != '') {
                var gg = g.split("&");
                var MaxI = gg.length;
                str = "lat=";
                //for(xm=0;xm<MaxI;xm++){
                if (gg[0].indexOf(str) == 0) {
                    lat = gg[0].replace(str, "");
                }

                str = "lng="
                if (gg[1].indexOf(str) == 0) {
                    lng = gg[1].replace(str, "");
                }

                str = "name="
                if (gg[2].indexOf(str) == 0) {
                    name = decodeURI(gg[2].replace(str, ""));
                }

                str = "address="
                if (gg[3].indexOf(str) == 0) {
                    address = decodeURI(gg[3].replace(str, ""));
                }

                str = "type="
                if (gg[4].indexOf(str) == 0) {
                    type = gg[4].replace(str, "");
                }
                //}
            }

            var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            map = new google.maps.Map(document.getElementById("map"), {
                center: point,
                zoom: 17,
                mapTypeControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var styledMap = new google.maps.StyledMapType(styles, {
                name: "Styled Map"
            });
            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');

            //var html = "<b>" + name + "</b> <br/>" + address + "<br><span id='move_span'><a href='javascript:proMoreShow();'><img src='http://goodnitetokyo.com/mobile/images/map_more_button.png' width='48' height='16' /></a></span><span id='more_info' style='display:none;'>LAT: "+lat+"   >LNG: "+lng+"</span>";


            var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='javascript:directionsClick(\"" + point.toUrlValue() + "\");'><img src='http://goodnite.jp/tokyo/mobile/images/map_more_button.png' width='48' height='16' /></a>";

            var icon = customIcons[type] || {};

            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
            });


            var infoWindow = new google.maps.InfoWindow;
            bindInfoWindow(marker, map, infoWindow, html);
        }

        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);
        }

        function doNothing() {}

        //var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='javascript:directionsClick(\"" + point.toUrlValue() + "\");'><img src='http://goodnite.jp/tokyo/mobile/images/map_more_button.png' width='48' height='16' /></a>";

        function directionsClick(latlng) {
            var myURL = 'https://maps.google.com/maps?saddr=&daddr=' + latlng + '&sensor=TRUE';
            //var myURL = 'comgooglemaps://?saddr=&daddr=' + latlng + '&sensor=TRUE';
            //var myURL = 'geo:' + latlng + '?z=15';
            window.open(myURL, "_blank");
        }


        function hideAddressBar() {

            if (!window.location.hash) {
                if (document.height < window.outerHeight) {
                    document.body.style.height = (window.outerHeight + 50) + 'px';
                }
                setTimeout(function() {
                    window.scrollTo(0, 1);
                }, 50);
            }

        }

        function proMoreShow() {
            $("#move_span").css({
                display: "none"
            });
            $("#more_info").css({
                display: "block"
            });
        }
    </script>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body onLoad="load()">
    <div id="map" style="width: 100%; height: 100%"></div>
</body>

</html>
相关问题
最新问题