简体   繁体   English

Google Api地图以及使用javascript的路线

[英]Google Api map with directions using javascript

  (function(){
window.onload =function(){
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer();
    document.getElementById("lat").style.visibility = "hidden";
    document.getElementById("longi").style.visibility = "hidden";
    document.getElementById("number").style.visibility = "hidden";
    document.getElementById("addressone").style.visibility = "hidden";
    document.getElementById("city").style.visibility = "hidden";
    document.getElementById("countie").style.visibility = "hidden";
    document.getElementById("postcode").style.visibility = "hidden";
    var mapDiv = document.getElementById('map');
    var latitude = document.frmOne.lat.value;
    var longitude = document.frmOne.longi.value;
    var number = document.frmOne.number.value;
    var addressone = document.frmOne.addressone.value;
    var city = document.frmOne.city.value;
    var countie = document.frmOne.countie.value;
    var postcode = document.frmOne.postcode.value;
    var latlng = new google.maps.LatLng(latitude,longitude);
    var options ={
        center:latlng,
        zoom:18,
        mapTypeId:google.maps.MapTypeId.ROADMAP

    };

    var map= new google.maps.Map(document.getElementById('map'),options);
     directionsDisplay.setMap(map);

      var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude,longitude),
  map: map,
  title: 'Click me'
   });

    var infowindow = new google.maps.InfoWindow({
  content: number+" "+addressone+"<br>"+city+"<br>"+countie+"<br>"+postcode
   });

    google.maps.event.addListener(marker, 'click', function() {
  // Calling the open method of the infoWindow
  infowindow.open(map, marker);
});


 var start = (latitude,longitude);
 var end = "51.403650,-1.323252";
 var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
  };
    directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
    }
    });



    };
   })();

The longitude and latitude is generated with php and works perfect. 经度和纬度是用php生成的,可以完美地工作。 The map loads including the marker but the directions do not show. 地图会加载包括标记的内容,但不会显示方向。

I can't find a good tutorial on directions so if anyone know of that would also be a help I know my code isn't very tidy but I'm not very good with java script. 我找不到很好的方向指南,所以如果有人知道这也将对我有帮助,我知道我的代码不是很整洁,但是我对Java脚本的了解不是很好。

You've copied the example from their own reference it looks like to me, which is fine. 您已经从他们自己的引用中复制了该示例,对我来说,这很好。 However they're using place names, and you're using latlng coordinates. 但是,他们使用的是地名,而您使用的是latlng坐标。 What you therefore need to do is use actual latlng objects instead of just "51.403650,-1.323252" and (latitude,longitude) . 因此,您需要做的是使用实际的latlng对象,而不只是使用“ 51.403650,-1.323252”(latitude,longitude)

var request = {
  origin:new google.maps.LatLng(latitude,longitude),
  destination:new google.maps.LatLng(51.403650,-1.323252),
  travelMode: google.maps.TravelMode.DRIVING
};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM