在按钮上单击事件传递纬度和经度对应地点在谷歌地图上显示答案

【问题标题】：On Button click Event pass latitude and longitude CORRESPONDING Place Display on Google Map在按钮上单击事件传递纬度和经度对应地点在谷歌地图上显示
【发布时间】：2013-07-19 07:47:31
【问题描述】：

我从数据库中获取坐标并在谷歌地图上显示相应的位置，它工作正常，但是当我通过按钮点击坐标时，它就不起作用了。这是我的代码：

 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
          });
    }); 
});

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

【问题讨论】：

您的地图变量仅在函数load() 内可见，不能从其他范围访问。通过删除 var-keyword 使其全局化。
我将其设为全局，但现在当页面再次加载时，所有数据都变得新鲜了。现在点击事件没有触发。
对 map-div 使用不同的 ID，参见stackoverflow.com/questions/14114576/…
有ajax调用吗？如果 #btncheck 元素是从 ajax 调用创建的，除非您将其附加到它，否则您的事件不会被触发
试试 $("#btncheck").on('click',function() {});

标签： javascript google-maps google-maps-api-3

【解决方案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

【讨论】：