谷歌地图v3:当函数'失败'呼叫

Google maps v3: adding a new map when function 'failure' called

本文关键字：失败 呼叫 函数 v3 谷歌地图      更新时间：2023-09-26

在我的网站的联系页面上，可能会发生两件事：

  1. 用户已启用地理定位，地图（map-canvas）将显示从其位置到预定义位置dest的路线。此功能运行良好。

  2. 用户未启用或选择不允许地理定位。将显示警报（工作正常），并将一些文本添加到directions-panel（工作良好）。在这种情况下，我想做的第三件事是向以dest为中心的map-canvas添加一个新的映射，这个功能似乎不起作用，我不知道为什么。

下面的代码应该能很好地表示上述情况：

<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var dest = "Unit 20, Tallaght Business Centre, Whitestown Road, Tallaght Business Park, Ireland";//53.282882, -6.383155
    var ourLocation = {lat :  53.282882, lng :  -6.383155}//centre attribute of the map must be a LatLng object and not hardcoded as above
    function initGeolocation() {
       if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition( success, failure );
        }
    }
    //create a new map centered on user's location, display route and show directions
    function success(position) {
      directionsDisplay = new google.maps.DirectionsRenderer();
      coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      }
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById("directions-panel"));
      calcRoute();
    }
    //calculate the route from user's location to 'dest'
    function calcRoute() {
      var start = coords;
      var end = dest;
      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);
        }
      });
    }
    //tell user geoloc isn't enabled and just plot 'ourLocation' on 'map-canvas'
    function failure() {
        alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address.");
        $("#directions-error-message").css({
          visibility: 'visible'
        });     
        var destMapOptions = {
          zoom:13,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng)
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions);
    }
    </script>

有人知道为什么这不起作用吗？所有的帮助都得到了缓解。

EDIT：高于的工作版本

您需要为地图的中心传递LatLng对象，而不是地址。你需要使用谷歌的本地搜索服务来实现这一点。

var dest = {
   lat :  53.282882,
   lng :  -6.383155
}
var destMapOptions = {
    zoom:12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(dest.lat,dest.lng)
}

此外，由于您已经将map声明为var，因此可能会为map使用该变量，而不是函数范围的变量。

映射选项的中心属性必须是LatLng对象。您已将其硬编码为地址字符串。

相关文章：