【问题标题】:Store locator - Directions from postcode to chosen store商店定位器 - 从邮政编码到所选商店的路线
【发布时间】:2012-10-24 12:05:11
【问题描述】:

我有一个 JavaScript 邮政编码搜索,根据输入的内容搜索英国的 3 家壁橱商店。目前它发现 3 家商店都很好。

首先,我想在输入的邮政编码处放置一个标记。

其次,当三个结果出现时,它们会被标记在地图上。我想要一个名为 directions 的链接,单击该链接后,将显示从起点到所选商店的路线。

我尝试了以下代码,但它不起作用...但是它确实从输入和方向链接中获取邮政编码数据并在控制台中显示它们。我需要将它们转换为 long 和 lat 才能正常工作吗?

function calcRoute() {
    var start = document.getElementById('address').value;
    var end = document.getElementById('get-directions').name;
    //console.log(start, end)
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

我的开始标记有这段代码,但这似乎也不起作用

function initialize() {
    var start_marker = new google.maps.LatLng(document.getElementById('address').value);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: start_marker
    }
    marker = new google.maps.Marker({
          map:map,
          draggable:false,
          animation: google.maps.Animation.DROP,
          position: start_marker,
        });
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap(map);
  }

这部分从邮政编码中获取long/lat数据,

this.geocode = function(address, callbackFunction) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var result = {};
      result.latitude = results[0].geometry.location.lat();
      result.longitude = results[0].geometry.location.lng();
      callbackFunction(result);
      //console.log(result);
        //console.log("Geocoding " + geometry.location + " OK");
        addMarker(map, results[0].geometry.location);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
      callbackFunction(null);
    }
  });

addMarker 的功能在这里:

function addMarker(map, location) {

console.log("Setting marker for (location: " + location + ")");
marker = new google.maps.Marker({
map : map,
animation: google.maps.Animation.DROP,
position : location
});

}

任何帮助将不胜感激!

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 geolocation


    【解决方案1】:

    google.maps.LatLng requires two floating point numbers as arguments 的构造函数,而不是字符串:

    var start_marker = new google.maps.LatLng(document.getElementById('address').value);
    

    如果你只有一个地址,如果你想在地图上显示一个标记,你需要使用Geocoding service to retrieve coordinates for that address

    【讨论】:

    • 啊,非常感谢。但由于某种原因,标记不会添加。我有地理位置数据,但它根本没有添加到地图中。这段代码正确吗? marker = new google.maps.Marker({ map : map, animation: google.maps.Animation.DROP, position : location });
    • 该代码是否正确取决于“位置”是什么。两件事: 1. cmets 中发布的代码难以阅读,您应该编辑您的问题以包含它并以合理的方式对其进行格式化。 2、Geocoder是异步的,如果“location”来自Geocoder,你是在回调函数中使用的吗?
    • 是的位置来自地理编码器,是的,我在回调函数中使用它。当我 console.log(location) 它显示 54.9861334, -1.53​​79448999999568 这是我输入输入的邮政编码的正确长/纬度。是的,我现在就这样做
    猜你喜欢
    • 1970-01-01
    • 2021-10-22
    • 1970-01-01
    • 2023-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多