Question

我想问一下如何将地理编码结果附加/显示到infowindow内容中。在这种情况下，我有多个标记。我尝试在infowindow内容上使用div并在获取地理编码结果（使用回调）后更新div内容，但它不起作用。怎么解决这个,,,

<html>
<head>
<title>Reverse Geocoding v3 Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="markerwithlabel.js"></script>   
<script type="text/javascript">
    var locations = [
        {"name":"A","lat":"25.113787","lon":"-102.233276"}, {"name":"B","lat":"25.798243","lon":"-102.96936"}, {"name":"C","lat":"27.033032","lon":"-103.974609"}, {"name":"D","lat":"26.370545","lon":"-103.112183"},
        {"name":"E","lat":"26.636002","lon":"-100.794067"}, {"name":"F","lat":"25.699288","lon":"-98.827515"}, {"name":"G","lat":"24.805019","lon":"-100.332642"}, {"name":"H","lat":"24.285358","lon":"-101.705933"}
    ];
    var geocoder;
    var map;
    var marker;
    var lat_longs = new Array();
    var infoWindow = null;
    var markers = new Array();
    var poi = new Array();
    var fitMap = 0;
    var timer = null;
    totUpdateOld = new Array();
    streetLocation = new Array();
    ident = 0;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(26.291773,-100.914917);
        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        infoWindow = new google.maps.InfoWindow();
        updatetimer(function() {
            fitMapToBounds();
        });
    }       
    var updatetimer = function showCarPosition(){
        if (markers.length>0){
            ident = 2;
        }
        for (var i = 0; i < locations.length; i++) {
            var coordinate = new google.maps.LatLng(locations[i].lat, locations[i].lon);
            var windowContent =[
                  '<div class="windowcontent"><ul class="nav infowindow nav-pills nav-stacked">',
                    '<li><div id="pos'+i+'"></div><li>'].join('');
            if (ident == 0){
                codeLatLng(function(addr, divid){
                    streetLocation.push(addr);
                    console.log(divid+'-'+addr);
                    $("#"+divid).html(addr);
                }, coordinate, "pos"+i);
                var marker = createMarker({
                    map: map,
                    position: coordinate,
                    labelContent: (locations[i].name),
                    labelAnchor: new google.maps.Point(32, 0),
                    labelClass: "unitlabel",
                    labelStyle: {opacity: 1.0}
                });
                bindInfoWindow(marker, 'click', windowContent);
                google.maps.event.addListener(infoWindow, 'domready', function(){ 
                    $('.viewlog').click(function() {
                        $.history.load($(this).attr('href'));
                        return false;
                    });
                });
            }
        }
        fitMapToBounds();
    };

    function codeLatLng(callback, coordinate, divid) {
        if (geocoder) {
            geocoder.geocode({'latLng': coordinate}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        callback(results[1].formatted_address, divid);
                    }else {
                        callback("unknown", divid);
                    }
                }else {
                    return "Geocoder failed due to: " + status;
                }
            });
        }
    }       
    function createMarker(markerOptions) {
        var marker = new MarkerWithLabel(markerOptions);
        markers.push(marker);
        lat_longs.push(marker.getPosition());
        return marker;
    }
    function updateMarker(markerOptions,id) {
        var marker = new MarkerWithLabel(markerOptions);
        markers[id] = marker;
        lat_longs[id] = marker.getPosition();
        return marker;
    }       
    function fitMapToBounds() {
        var bounds = new google.maps.LatLngBounds();
        if (fitMap == 0){
            if (lat_longs.length>0) {
                for (var i=0; i<lat_longs.length; i++) {
                    bounds.extend(lat_longs[i]);
                }
                map.fitBounds(bounds);
                fitMap = 1;
            }
        }
    }

    function bindInfoWindow(marker, event, windowContent) {
        google.maps.event.addListener(marker, event, function() {
            infoWindow.setContent(windowContent);
            infoWindow.open(map, marker);
        });
    }       
    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDAT9KcSpQ7RNfg5iQHsivb4-72lNLanH0&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }

    $(document).ready(function() {
        initialize();
    });

</script>
</head>
<body>
<div id="map_canvas" style="height:400px; border:1px 00f solid;"></div>
</body>
</html>

Answer 1

我只会在点击标记时反转地理编码点，并在从地理编码器返回数据时将其附加到信息窗口。像这样：

function bindInfoWindow(marker, event, windowContent) {
    google.maps.event.addListener(marker, event, function() {
      infoWindow.setContent(windowContent);
      geocoder.geocode({latLng: marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          infoWindow.setContent(infoWindow.getContent()+"<br>"+results[1].formatted_address+"<br>status="+status);
          infoWindow.open(map, marker);
        }
      } else {
        infoWindow.setContent(infoWindow.getContent()+"<br>revere geocode failed:"+status);
    infoWindow.open(map, marker);
      }
    });                       
  });
}

working example

您可以通过存储反向地理编码的结果来提高效率，如果之前点击了like this，则不会再次对点进行反向地理编码。

将地理编码结果附加到Infowindow内容

1 个答案: