在按钮上单击事件传递经度和纬度在Google地图上的对应地点显示 [英] On Button click Event pass latitude and longitude CORRESPONDING Place Display on Google Map

问题描述

我从数据库获取坐标并在Google Map上显示相应的位置，并且它正常工作，但是当我通过坐标按钮单击时，它不工作。这里是我的代码：

< pre $ 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;
//点击事件
google.maps.event.addListener（map，'click'，function（e）{


document.getElementById（'txtlat' ）.value = e.latLng.lat（）;
document.getElementById（'txtlong'）。value = e.latLng.lng（）;

}）;
//根据你的PHP文件的名称改变它
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，h TML）;
}
}）;


函数bindInfoWindow（marker，map，infoWindow，html）{
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
}）;
}

函数downloadUrl（url，callback）{
var request = window.ActiveXObject？
new ActiveXObject（'Microsoft.XMLHTTP'）：
new XMLHttpRequest;

request.onreadystatechange = function（）{
if（request.readyState == 4）{
request.onreadystatechange = doNothing;
回调（request，request.status）;
}
};

request.open（'GET'，url，true）;
request.send（null）;


函数doNothing（）{}


上面的代码工作正常
但是当我通过坐标按钮单击然后地方不显示
这里是我的代码按钮点击：

点击（功能（）{
 var lat = document.getElementById（'txtlat'）。值; 
 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：地图，
 id：'markerShowHide'，
位置：point，
图标：icon.icon，
 shadow：icon.shadow 
}）; 
 }）; 
}）; 
  

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

解决方案

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

  var map; 
函数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'）; 
 
函数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

i fetch coordinates from Database and displaying corresponding place on Google Map and it's work properly but when i pass coordinates on button click then it's not working.here is my code:

 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() {}

above code is working properly but when i pass coordinates on button click then place is not displaying here is my code on button click :

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

I appreciate any help you have to offer. Thank you!

解决方案

I've built a simple jsFiddle based on your code, but without the Ajax calls.

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

这篇关于在按钮上单击事件传递经度和纬度在Google地图上的对应地点显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！