-1

我目前正在取消包含谷歌地图 API 的项目的数据！我使用我的数据库中的 mysql 在地图上加载标记。现在我想要完成的是我在http://www.tanesco.co.tz/index.php?option=com_wrapper&view=wrapper&Itemid=155之前看到的类似的东西

我想在显示的表格上创建一个链接，单击它会在地图上打开一个信息窗口....我完全不知道从哪里开始

这是我的地图代码

    <?php include("connect.php"); 

?>
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" media="screen" />
<title>AzamTv Customer Database</title>
<style type="text/css">
<!--
.style2 {color: #999999}
.style3 {color: #666666}
.style4 {color: #FF0000}
.style5 {color: #3366FF}
-->
</style>

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>


<script language="javascript" type="text/javascript">
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);
}
//Get element by ID where the function return tand get the latitude and longitude
//do not embed any thing before authorized permition to google.
function load() {
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng( -6.801859, 39.282503),

        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;


downloadUrl("mapxml.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 address = markers[i].getAttribute("address");
    var licence_number = markers[i].getAttribute("Licence_number");
    var phone = markers[i].getAttribute("phone");
    var business_image = markers[i].getAttribute("business_image");
    var type = markers[i].getAttribute("type");
     var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));

        //Creating image
        var image_src= "<div><img width='100' height='100' src=' "+ business_image +"' /></div>";   


        var html = "<b>" +"<h4>Business Name:</h4>"+ name + "</b> <br/><br/>"+"<h4>Address:</h4>" + address + "</b> <br/><br/>"+"<h4>Licence Type:</h4>" + licence_number + "</b> <br/><br/>" + "<h4>Phone:</h4>" + phone + "</b> <br/><br/>"+"<h4>Image:</h4>" + image_src + "</br> <a href=\"javascript:zoomout()\">Zoom out</a> <a href=\"javascript:zoomin()\">Zoom in</a>" ;


    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
  }
});

//If u wanna change the markers by adding custom ones of ur own add here
var customIcons = {
  TIN: {
    icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
  },
  VAT: {
    icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
  }
};

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

  // Pan map center to marker position
  map.panTo(marker.getPosition());
   var c= map.getZoom()+3;
   var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
    if(c<=maxZoom){
           map.setZoom(c+3);
    }

    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}
function doNothing() {}
function zoomout() {
    var d = map.getZoom();
    if(d>0){
        map.setZoom(d-1);
    }
    //  e = map.getCenter();
    //  map.setZoom(d - 1);
    //  map.setCenter(e.Longitude, e.Latitude);
    //  should be: map.setCenter(e.lat(), e.lng());
}

function zoomin() {
    var x = map.getZoom();
    var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
    if(x<maxZoom){
        map.setZoom(x+1);   
    }
    //  y = map.getCenter();
    //  map.setZoom(x + 1);
    //  map.setCenter(y.Longitude, y.Latitude);
    //  should be: map.setCenter(y.lat(), y.lng());
}

</script>




<script language="javascript" type="text/javascript">

//Script For The Search
function cleartxt()
{
formsearch.searched1.value="";
}
function settxt()
{
  if(formsearch.searched1.value=="")
  {
  formsearch.searched1.value="Search Customer";
  }
 }

</script>

</head>


<body onLoad="load()">

    <div id="map" style="width: 100%; height: 80%"></div>

</body>
</html>

谢谢大家

4

1 回答 1

0

您创建标记，例如

var marker = new google.maps.Marker({
            position: myLatlng,
            title:"Your title"
        });

创建点击触发的链接

infowindow.open(map,marker);

我猜就是这样。

编辑：您可以通过 href-parameter 确定需要显示哪个标记

于 2013-11-07T13:02:39.643 回答