【问题标题】:Google map HTML5 Geolocation谷歌地图 HTML5 地理位置
【发布时间】:2012-06-30 11:18:48
【问题描述】:

我一直在关注 HTML5 地理定位教程,并希望修改代码以输入目的地地址的文本,而不是固定目的地。在这段代码中实现它的任何方法都很好。

//这里是java脚本代码

(function(geolocation){

  if (geolocation) return;

  var cache;

  geolocation = window.navigator.geolocation = {};
  geolocation.watchPosition = function(callback){

    if (cache) callback(cache);

    $.getScript('//www.google.com/jsapi',function(){

      cache = {
        coords : {
          "latitude": google.loader.ClientLocation.latitude, 
          "longitude": google.loader.ClientLocation.longitude
        }
      };

      callback(cache);
    });

  };


})(navigator.geolocation);

// Proceed as usual.
(function() {
    if ( navigator.geolocation ) {
    var coords = navigator.geolocation.watchPosition( hereWeGooo,
        function() {
            // failure
                document.body.innerHTML = 'Sorry. We can\'t get your current location.';
            },
            { enableHighAccuracy: true }
        );

    }
function hereWeGooo(coords) {
    coords = coords.coords;
    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude),
        myOptions = {
        //zoom: 15,
        //center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.querySelector( "#map"), myOptions),
      directionsDisplay = new google.maps.DirectionsRenderer(),
      directionsService = new google.maps.DirectionsService(),

        var dest = document.getElementById('d').value;

    request = {

        origin: latlng,
        destination: dest, 
        // replace with your own airport
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsDisplay.setMap(map);
    directionsService.route(request, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        }
        });
    }
})();

  <form>
    <p><input type="text" id="d" /></p>
    <input type="button" value="Go" onClick="hereWeGooo()">
    </form>

【问题讨论】:

    标签: javascript html google-maps geolocation


    【解决方案1】:

    你可以这样做:

    var dest = document.getElementById('myInput').value;
    
    request = {
        origin: latlng,
        destination: dest, 
    //...
    }
    

    ...然后在您的文档正文中:

    <input id='myInput'>
    

    看到链接后补充:

    hereWeGooo() 未定义,因为您在应该有分号的地方使用逗号 --- direction.js 第 57 行崩溃。

    第 54 到 57 行应该是:

    map = new google.maps.Map(document.querySelector( "#map"), myOptions); //<----- semi-colon, not comma
            directionsDisplay = new google.maps.DirectionsRenderer(); //<----- semi-colon, not comma
            directionsService = new google.maps.DirectionsService(); //<----- semi-colon, not comma
    

    【讨论】:

    • 一定有其他错误。如果您可以发布指向实时页面的链接,我们可能会提供更多帮助。
    • 感谢@Marcelo,它可以显示 texbox 但按钮未激活,这不是我第一次发生,我曾经尝试实现 jsonengine-note 但“新建”未激活。我也尝试使用 jsonengine 的其他地理定位应用程序仍然存在同样的问题。这是什么原因造成的?
    • 我不确定您指的是哪个按钮。没有看到病人是不可能做出诊断的。
    • 这里是页面链接Link@Marcelo
    猜你喜欢
    • 1970-01-01
    • 2017-01-03
    • 1970-01-01
    • 1970-01-01
    • 2012-05-30
    • 2014-08-21
    • 2023-04-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多