2014-02-24 56 views
0

我有这个谷歌地图,通过经纬度和长期在其他版本中很好。这个版本能够正确显示标记,这意味着在地图内存在这些值。但是,当我点击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> 

做一些价值需要返回,存储或者其他是否正确地将它传递给按钮?

感谢您的阅读。

回答

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

b。 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> 
+0

OMG,谢谢。看了一百万次,但我忽略了这一点。奇迹般有效! – michelito