点击时如何显示谷歌地图标记的位置？ [英] How to display location on markers of google maps when clicked?
本文介绍了点击时如何显示谷歌地图标记的位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<？php
$ dbname ='140dev';
$ dbuser ='root';
$ dbpass ='root';
$ dbserver ='localhost';
$ dbcnx = mysql_connect（$ dbserver，$ dbuser，$ dbpass）;
mysql_select_db（$ dbname）或死（mysql_error（））;
$ sql = mysql_query（SELECT * FROM tweets1）;
$ res = mysql_fetch_array（$ sql）;
$ lat_d = $ res ['geo_lat'];
$ long_d = $ res ['geo_long'];
//模仿MySQL中的结果数组
$ result = array（array（'geo_lat'=> $ lat_d，'geo_long'=> $ long_d））;
？>
<！doctype html>
< html>
< head>
< script type =text / javascript
src =http://maps.googleapis.com/maps/api/js?key=API_key& sensor = false> < /脚本>
< script type =text / javascript>
var map;
函数initialize（）{
//设置静态纬度，经度值
var latlng = new google.maps.LatLng（<？php echo $ lat_d;？> ;,< ;? php echo $ long_d;？>）;
//设置地图选项
var myOptions = {
zoom：16，
center：latlng，
panControl：true，
zoomControl：true，
scaleControl：true，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
//使用选项创建地图对象
map = new google.maps.Map（document .getElementById（map_canvas），myOptions）;
<？php
//取消注释下面的两行以从db
$ result = mysql_query（SELECT * FROM tweets1）获取真实数据;
while（$ row = mysql_fetch_array（$ result））
echoaddMarker（new。google.maps.LatLng（。$ row ['geo_lat']。，。$ row ['geo_long' ]。），
map）;;
？>
函数addMarker（latLng，map）{
var marker = new google.maps.Marker（{
position：latLng，
map：map，
draggable：true，//启用拖放操作
animation：google.maps.Animation.DROP
}）;
var contentString = latLng.lat（）+，+ latLng.lng（）;
geocoder.geocode（{'latLng'：latlng}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
if （results [1]）{
map.setZoom（11）;
marker = new google.maps.Marker（{
position：latlng，
map：map
'）;
infowindow.setContent（results [1] .formatted_address）;
infowindow.open（map，marker）;
} else {
alert（'No results found '）;
}
} else {
alert（'Geocoder failed because：'+ status）;
}
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
}
< / script>
< / head>
< body onload =initialize（）>
< div style =float：left; position：relative; width：550px; border：0px＃000 solid;>
< div id =map_canvasstyle =width：950px; height：700px; border：solid black 1px;>
< / div>
< / div>
< / body>
< / html>
解决方案
改进 addMarker 函数，因为它显示了infowindow上点击标记的lat-lng值：
pre $ function addMarker（latLng，地图）{
var marker = new google.maps.Marker（{
position：latLng，
map：map，
draggable：true，//启用拖放操作
动画：google.maps.Animation.DROP
}）;
var contentString = latLng.lat（）+ - + latLng.lng（）;
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
}
I have extracted the latitude and logitude from my database tables and have shown it on the google maps with markers.Now I want to get location to be displayed on the markers when they are clicked.I tried a lot but couldn't find the way.Can you please suggest how shall I proceeed?I am also giving the sample code which may help you.Kindly help me out.
<?php
$dbname='140dev';
$dbuser='root';
$dbpass='root';
$dbserver='localhost';
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
$sql = mysql_query("SELECT * FROM tweets1");
$res = mysql_fetch_array($sql);
$lat_d = $res['geo_lat'];
$long_d = $res['geo_long'];
// mimic a result array from MySQL
$result = array(array('geo_lat'=>$lat_d,'geo_long'=>$long_d));
?>
<!doctype html>
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key="API_key"&sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
// Set static latitude, longitude value
var latlng = new google.maps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
// Set map options
var myOptions = {
zoom: 16,
center: latlng,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php
// uncomment the 2 lines below to get real data from the db
$result = mysql_query("SELECT * FROM tweets1");
while ($row = mysql_fetch_array($result))
echo "addMarker(new google.maps.LatLng(".$row['geo_lat'].", ".$row['geo_long']."),
map);";
?>
}
function addMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true, // enables drag & drop
animation: google.maps.Animation.DROP
});
var contentString = latLng.lat() + " , " + latLng.lng();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div style="float:left; position:relative; width:550px; border:0px #000 solid;">
<div id="map_canvas" style="width:950px;height:700px;border:solid black 1px;">
</div>
</div>
</body>
</html>
解决方案
Improve your addMarker() function as it shows lat-lng values of clicked marker on infowindow:
function addMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true, // enables drag & drop
animation: google.maps.Animation.DROP
});
var contentString = latLng.lat() + " - " + latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
这篇关于点击时如何显示谷歌地图标记的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
