Question

我有一张地图从我的数据库中拉出lat和long并制作自定义标记。一切正常，只需单击我的更多按钮即可链接到指示。

这是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <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" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<title>Map</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">

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

    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
    var glat = 35.658517;
    var glong = 139.700712;
    function foundLocation(position){
        glat = position.coords.latitude;
        glong = position.coords.longitude;
        var latlong = new google.maps.LatLng(glat, glong);
        map.setCenter(latlong);

    }
    function noLocation(){
        var glat = 35.658517;
        var glong = 139.700712;
    }

    map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(glat, glong),
    zoom: 15,
    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 infoWindow = new google.maps.InfoWindow;

  var latInput = document.getElementById('lat');
  var lngInput = document.getElementById('lng');

  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml_gnt_bar.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));

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

      //https://maps.google.com/maps?saddr=&daddr=35.658157,139.697174&sensor=TRUE

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      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() {}

function directionsClick(){
            //var myURL = 'https://maps.google.com/maps?saddr=&daddr=' + lat + ',' + lng + '&sensor=TRUE';
            var myURL = 'https://maps.google.com/maps?saddr=&daddr=';
            var latInput = "lat";
            var lngInput = "lng";
            var endURL = '&sensor=TRUE';
            var comma = ",";
            window.open(myURL+latInput+comma+lngInput+endURL);
}



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

基本上我正在尝试拉入lat和long到该按钮注入此URL：

https://maps.google.com/maps?saddr=&daddr=35.65,139.69&sensor=TRUE

所以：https://maps.google.com/maps?saddr=&daddr= + lat +，+ long +＆amp; sensor = TRUE

Answer 1

将“lat，lng”字符串传递给你的directionsClick函数：

  var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));

  var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='javascript:directionsClick(\""+point.toUrlValue()+"\");'><img src='http://goodnitetokyo.com/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';
        window.open(myURL);
 }

Google地图将lat和long从infowindow传递到路线网址

1 个答案: