Question

我使用这种技术：http://www.geocodezip.com/v3_MW_example_map2.html

我想在地图加载时打开第一个信息窗口。

我还希望能够在点击位置链接时使地图居中。

有人可以帮忙吗？

JS：

        // this variable will collect the html which will eventually be placed in the side_bar 
        var side_bar_html = ""; 

        // arrays to hold copies of the markers and html used by the side_bar 
        // because the function closure trick doesnt work there 
        var gmarkers = []; 
        var map = null;

        function initialize() {
          // create the map
          var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(50.822096, -0.375736),
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel:false
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

          google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
                });

          // Add markers to the map
          // Set up three markers with info windows 
          // add the points    
          var point = new google.maps.LatLng(50.810438, -0.374925);
          var center = new google.maps.LatLng(50.810438, -0.374925);
          var marker = createMarker(point,"Worthing","<p><b>Worthing</b><br>1-13 Buckingham Road,<br>Worthing,<br>West Sussex,<br>BN11 1TH</p>")

          var point = new google.maps.LatLng(51.497421,-0.141604);
          var center = new google.maps.LatLng(51.497421,-0.141604);
          var marker = createMarker(point,"London","<p><b>London</b><br>Portland House,<br>Bressenden Place,<br>London,<br>SW1E 5RS</p>")

          var point = new google.maps.LatLng(-33.867487,151.20699);
          var center = new google.maps.LatLng(-33.867487,151.20699);
          var marker = createMarker(point,"Sydney","<p><b>Sydney</b><br>Level 1, Cosco House,<br>95-101 Sussex Street,<br>Sydney NSW<br>Australia 2000</p>")

          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;

            $('#side_bar li:first-child').addClass("active");

            $('#side_bar li').click(function(){
                $('#side_bar li').removeClass("active");
                $(this).addClass("active");
            });


        }

        var infowindow = new google.maps.InfoWindow(
          { 
            size: new google.maps.Size(150,50)
          });

        // This function picks up the click and opens the corresponding info window
        function myclick(i) {
          google.maps.event.trigger(gmarkers[i], "click");
        }

        // A function to create the marker and set up the event window function 
        function createMarker(latlng, name, html) {
            var contentString = html;
            var iconBase = '../Themes/FreshEgg/assets/img/';
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                zIndex: Math.round(latlng.lat()*-100000)<<5,
                icon: iconBase + 'map_marker_24x46.png',
                animation: google.maps.Animation.DROP
                });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(contentString); 
                infowindow.open(map,marker);
                });

            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
            // save the info we need to use later for the side_bar
            gmarkers.push(marker);
            // add a line to the side_bar html
            side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a></li>';
        }

        google.maps.event.addDomListener(window, 'load', initialize);

HTML：

    <ul class="list-inline" id="side_bar"></ul>
    <div id="map_canvas"></div>

Answer 1

为您的createMarker()函数添加第4个参数，用于默认的标记状态 - createMarker(latlng, name, html, show) - 其中show将是一个布尔变量：true在加载时打开， false让它关闭。然后，当您在createMarker()方法中致电initialize()时，请为要加载的标记指定true。

然后在createMarker()中添加一个处理此问题的条件 - 例如：

if (show) {
    google.maps.event.trigger(marker, "click");
    /*if you're going to take this approach, make sure this is triggered after
     *you specify your listener
     *alternately, you can also setContent() and open() your infoWindow here
     */
}

要在单击标记时将地图平移到中心，首先需要在infoWindow打开时禁用地图的自动平移。这可以在您设置options for your infoWindow：

的地方完成

var infowindow = new google.maps.InfoWindow(
{ 
    size: new google.maps.Size(150,50),
    disableAutoPan : true
});

然后，在标记点击事件的监听器中，将功能添加到panTo(LatLng)地图上标记的位置。

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
    map.panTo(marker.getPosition());
});

谷歌地图v3打开infowindow加载

1 个答案: