Question

您好我需要像this这样的功能。我创建了一个地图但是如何通过点击标记图标打开一个对话框。

<script type="text/javascript">
    initialize();
// OnLoad function ...
function initialize() {


   var fenway = new google.maps.LatLng(-27,133);
var mapOptions = {
  center: fenway,
  zoom: 4,

  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


var fluster = new Fluster2(map);
    var marker; 
<?php   $count=1;
    foreach($profileinfo as $property){
    $lat_val = $property->lat;
    $long_val = $property->lng; ?> 
    <?php } ?>


// Initialize Fluster and give it a existing map
    var fluster = new Fluster2(map);
    var marker; 
    <?php   $count=1;
    foreach($paginate as $propert){
    $lat_val = $propert->lat;
    $long_val = $propert->lng;
    $address1 = $propert->address.','.$propert->suburb;?>
    // Create a new marker. Don't add it to the map!
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(<?php echo $lat_val; ?>, <?php echo $long_val; ?>),
            title: '<?php echo $address1; ?>'

        });
        fluster.addMarker(marker);
    <?php
    }?>
    // Set styles
    // These are the same styles as default, assignment is only for demonstration ...
    fluster.styles = {
        // This style will be used for clusters with more than 0 markers
        0: {
            image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png',
            textColor: '#FFFFFF',
            width: 53,
            height: 52
        },
        // This style will be used for clusters with more than 10 markers
        10: {
            image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png',
            textColor: '#FFFFFF',
            width: 56,
            height: 55
        },
        20: {
            image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png',
            textColor: '#FFFFFF',
            width: 66,
            height: 65
        }
    };
    fluster.initialize();


}

</script>

Answer 1

听起来您想在点击标记时打开infowindow。 Here is the example如何从documentation

执行此操作

该示例的代码段：

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
    'south west of the nearest large town, Alice Springs; 450&#160;km ' +
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
    'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
    'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
    'Aboriginal people of the area. It has many springs, waterholes, ' +
    'rock caves and ancient paintings. Uluru is listed as a World ' +
    'Heritage Site.</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

Answer 2

这是代码

// **********************************************Sample Code**********************************************
    var markerSample = new google.maps.Marker({
    position: new google.maps.LatLng(LAT, LNG),
            map: panorama// your map
         });

    google.maps.event.addListener(markerSample, 'click', function () {
    var dialogMine = $("#mySampleDialogBox").dialog();//
    $(dialogMine).siblings('.ui-dialog-titlebar').remove();//for manual close
    $(dialogMine).dialog({ resizable: false });// resizable
   //$("#mySampleDialogBox").dialog();
    });

单击地图中的标记打开对话框

2 个答案: