在按钮上单击事件传递经度和纬度在Google地图上的对应地点显示 [英] On Button click Event pass latitude and longitude CORRESPONDING Place Display on Google Map
本文介绍了在按钮上单击事件传递经度和纬度在Google地图上的对应地点显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我从数据库获取坐标并在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);
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);
这篇关于在按钮上单击事件传递经度和纬度在Google地图上的对应地点显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文