Question

我从数据库中获取坐标并在Google地图上显示相应位置并且它正常工作但是当我按下按钮时点击坐标然后它不起作用。我的代码是：

 function load() {


      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(10.5167,7.4333),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
       // click event
       google.maps.event.addListener(map, 'click', function(e) {


    document.getElementById('txtlat').value=e.latLng.lat() ;
    document.getElementById('txtlong').value=e.latLng.lng();

  });
      // Change this depending on the name of your PHP file
      downloadUrl("xmlcustloc.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
           var des = markers[i].getAttribute("des");

          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>"+des ;
          var icon = customIcons['simple'] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

上面的代码工作正常但是当我在按钮点击时传递坐标时，则不显示位置这是我点击按钮的代码：

$(function() { 

 $("#btncheck").click(function() {  
   var lat=document.getElementById('txtlat').value;
   alert(lat);
        var lng=document.getElementById('txtlong').value; 
        alert(lng);
       var point = new google.maps.LatLng(lat,lng);

          var icon = customIcons['search'] || {};
          var marker = new google.maps.Marker({
            map: map,
            id: 'markerShowHide',
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
    }); 
});

感谢您提供的任何帮助。谢谢！

Answer 1

我已根据您的代码构建了一个简单的jsFiddle，但没有Ajax调用。

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(10.5167,7.4333),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    google.maps.event.addListener(map, 'click', function(e) {
        latInput.value = e.latLng.lat() ;
        longInput.value = e.latLng.lng();
    });
}

var latInput = document.getElementById('lat');
var longInput = document.getElementById('long');

function addMarker(){
    var lat = latInput.value;
    var long = longInput.value;

    if(!lat || !long) return;

    var coords = new google.maps.LatLng(lat,long);
    var marker = new google.maps.Marker({
        map: map,
        position: coords
    });
}

google.maps.event.addDomListener(document.getElementById('go'), 'click', addMarker);
google.maps.event.addDomListener(window, 'load', initialize);

jsFiddle

在按钮上单击事件传递纬度和经度CORRESPONDING在Google地图上显示

1 个答案: