Question

试图实现以下但不起作用

<script>
     function loadmap(lat,lng)
                {
                //alert("lat,lang");
                var point = new google.maps.LatLng('12.9833','77.5833');
                document.getElementById("menu").disabled=true;
              }
    </script>
<body>
<div id="container">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">World Traveler</h1></div>

<div id="menu" style="background-color:#FFD700;height:800px;width:100px;float:left;">
<table border="0">
<tr>
<th>Cities</th>
</tr>
<tr>
<td onclick="loadMap('40.44','83.43');">newyork</td>
</tr>
<tr>
<td onclick="loadMap('42.3295','-83.1908');">Michigan</td>
</tr>
script type="text/javascript">
        var map;
        var markersArray = [];

        function initialize()
        {
            var latlng = new google.maps.LatLng(12.9833, 77.5833);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            // add a click event handler to the map object
            google.maps.event.addListener(map, "click", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form's lat/lng fields
                document.getElementById("latFld").value = event.latLng.lat();
                document.getElementById("lngFld").value = event.latLng.lng();
            });
        }
        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location,
                icon: "http://localhost:8080/HTML5/pin_blue.png",
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            //map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }
    </script>

当用户点击菜单时，应该显示带有标记的特定地图。在js中执行此操作... Anyhelp将被appriciated。

Answer 1

检查你的javascript调试控制台。我认为这是因为<td>中的来电是'loadMap()'，但该函数被称为loadmap()。 Javascript区分大小写。

但是你仍然需要更新你的loadmap函数，因为它目前没有做任何事情。像这样：

    <table border="0">
         <tr>
            <th>Cities</th>
         </tr>
         <tr>
             <td onclick="loadMap('40.44','83.43');">newyork</td>
         </tr>
         <tr>
              <td onclick="loadMap('42.3295','-83.1908');">Michigan</td>
         </tr>
      <table>
    <div id="map_canvas" style="width:400px; height:400px"></div>
          <p>latitude: <span id="lat"></span></p>
          <p>longitude: <span id="lng"></span></p>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      var map;
      var home;
      var markersArray = [];

      function initialize() {
           home = new google.maps.LatLng('12.9833','77.5833');   
           var opts = {
                zoom: 8,
                center: home,
                mapTypeId: google.maps.MapTypeId.ROADMAP
           };

           map = new google.maps.Map(document.getElementById('map_canvas'), opts);
           google.maps.event.addListener(map, "click", function(event) {
                  showMarker(event.latLng);
               });    

      }

      function loadMap(lat,lng)
           {
               var location= new google.maps.LatLng(lat, lng);
               map.setCenter(location);
               document.getElementById("lat").innerHTML = location.lat();
               document.getElementById("lng").innerHTML = location.lng();
           }

        function showMarker(location) {    
               deleteOverlays();               
               var marker = new google.maps.Marker({
                   position: location,
                   map: map
               });
               markersArray.push(marker);
               document.getElementById("lat").innerHTML = location.lat();
               document.getElementById("lng").innerHTML = location.lng();
        }


       function deleteOverlays() {
            if (markersArray) {
                for (i=0; i < markersArray.length; i++) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Answer 2

您的loadMap功能现在没有做任何事情。您需要在LatLng函数中创建的loadMap处在地图上放置标记。

function loadmap(lat,lng) {
    //alert("lat,lang");
    var point = new google.maps.LatLng('12.9833','77.5833');
    placeMarker(point);
    document.getElementById("menu").disabled=true;
}

如何在点击按钮时加载地图

2 个答案: