javascript - 在当前位置的弹出窗口中显示详细信息窗口

Question

    function popupDirections(marker) {
                  var infowindow = new google.maps.InfoWindow(  
                      { 
                        content: 
                                'Hello World'
                      });
                         google.maps.event.addListener(marker,     'click', function() {
                            infowindow.open(map,marker);
                  });
                }

我写这个函数是为了显示地名、街道号码或其他信息，但问题是我不知道如何让这些信息显示在弹出窗口中。任何帮助将不胜感激。

Answer 1

你可能想试试这个，这是我的代码，它有一个来自 JSON 的元素信息窗口。但是如果你只想写你的信息窗口，就把它写成标签javascript。在我的例子中，我的信息窗口元素是从数据库中获取的。

    function initialize(){
    var x = new Array();
    var y = new Array();
    var customer_name = new Array();
    var cp_rayon_name = new Array();
    var icon = new Array();
    var photo = new Array();
    var city = new Array();
    var address = new Array();
    var postal_code = new Array();
    // posisi default peta saat diload
    var petaoption = {
        zoom: 5,
        center: new google.maps.LatLng( -1.2653859,116.83119999999997),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
        //bound
        var allowedBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(7.449624,93.15033),
        new google.maps.LatLng(-12.640338,144.830017)
        );
        var boundLimits = {
        maxLat : allowedBounds.getNorthEast().lat(),
        maxLng : allowedBounds.getNorthEast().lng(),
        minLat : allowedBounds.getSouthWest().lat(),
        minLng : allowedBounds.getSouthWest().lng()
    };
    var lastValidCenter = peta.getCenter();
    var newLat, newLng;
    google.maps.event.addListener(peta, 'center_changed', function() {
        center = peta.getCenter();
        if (allowedBounds.contains(center)) {
            // still within valid bounds, so save the last valid position
            lastValidCenter = peta.getCenter();
            return;
        }
        newLat = lastValidCenter.lat();
        newLng = lastValidCenter.lng();
        if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
            newLng = center.lng();
        }
        if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
            newLat = center.lat();
        }
        peta.panTo(new google.maps.LatLng(newLat, newLng));
    });


        var infowindow =  new google.maps.InfoWindow({
                      content: ''
        });
    // memanggil function untuk menampilkan koordinat
        url = "json.php";
        $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: function(msg){
            for(i=0;i<msg.enseval.customer.length;i++){
                x[i] = msg.enseval.customer[i].x;
                y[i] = msg.enseval.customer[i].y;
                customer_name[i] = msg.enseval.customer[i].nama_customer;
                cp_rayon_name[i] = msg.enseval.customer[i].nama_rayon;
                icon[i] = msg.enseval.customer[i].icon;
                photo[i] = msg.enseval.customer[i].id_photo;
                city[i] = msg.enseval.customer[i].city;
                address[i] = msg.enseval.customer[i].address;
                postal_code[i] = msg.enseval.customer[i].postal_code;
                var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y));
                var gambar_tanda = 'assets/images/'+msg.enseval.customer[i].icon+'.png';
                var photo_cust ='<img src="assets/images/foto_cust/'+msg.enseval.customer[i].id_photo+'_1.jpg" style="width:200px;height:120px;"/>';

                //var nm_cust = msg.enseval.customer[i].nama_customer;
                //var nm_rayon = , msg.enseval.customer[i].nama_rayon;
                var html = '<b>' + customer_name[i] + '</b><br/>'+city[i]+ ', '+address[i]+', '+postal_code[i]+'<br/>' + cp_rayon_name[i] + '<br/>' + photo_cust;
                tanda = new google.maps.Marker({
                            position: point,
                            map: peta,
                            icon: gambar_tanda,
                            clickable: true
                });
            bindInfoWindow(tanda, peta, infowindow, html  );
            }
        }
        });
}
google.maps.event.addDomListener(window, 'load', initialize);
function bindInfoWindow(tanda, peta, infowindow, data) {
    google.maps.event.addListener(tanda, 'click', function() {
    infowindow.setContent(data);
    infowindow.open(peta, tanda);
    });
}
function reload(form){
    var val=form.org_id.options[form.org_id.options.selectedIndex].value;
    self.location='main_page_admin.php?cabang=' + val ;
}