Question

我正在尝试在单击按钮的对话框中加载谷歌地图。除标记外，一切都在加载。请帮我解决我的代码中出了什么问题。如何显示标记。当我不使用对话框时，它的工作正常。

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
var directionsDisplay;
var directionsService;
var map;
var stepDisplay;
var image ;
var geocoder;
var latitude;

    $(function () {
    $("#btnShow").click(function () {
        $("#dialog").dialog({
            modal: true,
            title: "Google Map",
            width: 600,
            hright: 450,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
            var mapOptions = {
                    center: new google.maps.LatLng(19.0606917, 72.83624970000005),
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            directionsService = new google.maps.DirectionsService();
            geocoder = new google.maps.Geocoder();
            directionsDisplay = new google.maps.DirectionsRenderer();

                var map = new google.maps.Map($("#dvMap")[0], mapOptions);
                directionsDisplay.setMap(map);
              // Instantiate an info window to hold step text.
              stepDisplay = new google.maps.InfoWindow();
              //supress default markers and set route color
              directionsDisplay.setOptions( { suppressMarkers: true,
              polylineOptions: {
                strokeWeight: 5,
                strokeOpacity: 1,
                strokeColor:  'green' 
                }
            } ); 
      calcRoute();
            }
        });
    });
    });

var cList= [];
function showOnMap(){

         cList = [];

                 var coordinates = [];
                 coordinates.push("ORG");
                 coordinates.push("18.9542149");
                 coordinates.push("72.81203529999993");
                 coordinates.push("hello");
                 coordinates.push("not");
                 cList.push(coordinates);
                 coordinates = [];
                 coordinates.push("DEST");
                 coordinates.push("19.2147067");
                 coordinates.push("72.91062020000004");
                 coordinates.push("hello");
                 coordinates.push("not");
                 cList.push(coordinates);



}
function calcRoute() {

      var start;
      var end;
      var temp;
      var waypts = [];
      for(var i =0;i<cList.length;i++){
      var coord = cList[i];
          if(coord[0] == "ORG"){
            start = coord[1] +", "+coord[2];
            alert("start: "+start);
            showSteps(coord[1] , coord[2], coord[3]);


          }else if(coord[0]== "DEST"){
            end = coord[1] +", "+coord[2];
            alert("end: "+end);
            showSteps(coord[1] , coord[2],coord[3]);

          }else if(coord[0]== "WAYPOINT"){
            $("#comments").text("WAYPOINT: ");
            temp = coord[1] +", "+coord[2];
            //alert("way: "+temp);
            waypts.push({
              location:temp,
              stopover:true});
              var text = "reached till this stop ";
              showSteps(coord[1] , coord[2],text);
          }
      }



  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };


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


    }
  });
}
var marker;
function showSteps(lat, lon, text) {
      //alert("showSteps:"+image+" text"+text);
      // For each step, place a marker, and add the text to the marker's
      // info window. Also attach the marker to an array so we
      // can keep track of it and remove it when calculating new
      // routes.

        marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lon),
          map: map
        });
        attachInstructionText(marker, text);

    }
    function attachInstructionText(marker, text) {
      google.maps.event.addListener(marker, 'click', function() {
        // Open an info window when the marker is clicked on,
        // containing the text of the step.
        if(text == ""){
            text = "not reached";
        }
        stepDisplay.setContent(text);
        stepDisplay.open(map, marker);
      });
    }
    </script>

    <input id = "btnShow" type="button" value="Show Maps" class="fMap" onclick="showOnMap()" />
    <div id="dialog" style="display: none">
<div id="dvMap" style="height: 380px; width: 580px;">
</div>
</div>

Answer 1

您的map变量是对话框的open函数的本地变量：

  open: function() {
    var mapOptions = {
      center: new google.maps.LatLng(19.0606917, 72.83624970000005),
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#dvMap")[0], mapOptions);

从实例化google.maps.Map对象的行的开头删除“var”。

working fiddle

代码段

var directionsDisplay;
var directionsService;
var map;
var stepDisplay;
var image;
var geocoder;
var latitude;

$(function() {
  $("#btnShow").click(function() {
    $("#dialog").dialog({
      modal: true,
      title: "Google Map",
      width: 600,
      hright: 450,
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      },
      open: function() {
        var mapOptions = {
          center: new google.maps.LatLng(19.0606917, 72.83624970000005),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        directionsService = new google.maps.DirectionsService();
        geocoder = new google.maps.Geocoder();
        directionsDisplay = new google.maps.DirectionsRenderer();

        map = new google.maps.Map($("#dvMap")[0], mapOptions);
        directionsDisplay.setMap(map);
        // Instantiate an info window to hold step text.
        stepDisplay = new google.maps.InfoWindow();
        //supress default markers and set route color
        directionsDisplay.setOptions({
          suppressMarkers: true,
          polylineOptions: {
            strokeWeight: 5,
            strokeOpacity: 1,
            strokeColor: 'green'
          }
        });
        calcRoute();
      }
    });
  });
});

var cList = [];

function showOnMap() {
  cList = [];
  var coordinates = [];
  coordinates.push("ORG");
  coordinates.push("18.9542149");
  coordinates.push("72.81203529999993");
  coordinates.push("hello");
  coordinates.push("not");
  cList.push(coordinates);
  coordinates = [];
  coordinates.push("DEST");
  coordinates.push("19.2147067");
  coordinates.push("72.91062020000004");
  coordinates.push("hello");
  coordinates.push("not");
  cList.push(coordinates);
}

function calcRoute() {
  var start;
  var end;
  var temp;
  var waypts = [];
  for (var i = 0; i < cList.length; i++) {
    var coord = cList[i];
    if (coord[0] == "ORG") {
      start = new google.maps.LatLng(coord[1], coord[2]);
      showSteps(coord[1], coord[2], coord[3]);
    } else if (coord[0] == "DEST") {
      end = new google.maps.LatLng(coord[1], coord[2]);
      showSteps(coord[1], coord[2], coord[3]);
    } else if (coord[0] == "WAYPOINT") {
      $("#comments").text("WAYPOINT: ");
      temp = coord[1] + ", " + coord[2];
      waypts.push({
        location: temp,
        stopover: true
      });
      var text = "reached till this stop ";
      showSteps(coord[1], coord[2], text);
    }
  }
  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
var marker;

function showSteps(lat, lon, text) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map
  });
  attachInstructionText(marker, text);
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    // Open an info window when the marker is clicked on,
    // containing the text of the step.
    if (text == "") {
      text = "not reached";
    }
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<input id="btnShow" type="button" value="Show Maps" class="fMap" onclick="showOnMap()" />
<div id="dialog" style="display: none">
  <div id="dvMap" style="height: 380px; width: 580px;">
  </div>
</div>

在对话框中加载地图时，Google地图标记不可见

1 个答案: