Question

当鼠标悬停在谷歌地图标记上时，我正在显示信息框窗口，它正在工作。

但问题是，当我鼠标悬停在Marker上时谷歌地图的位置会根据鼠标移动特定标记。

我想修复谷歌地图的位置。根据Marker，谷歌地图不会移动。

代码：

google.maps.event.addDomListener(window, 'load', function(){
        var radius = null;
        var i;
        var markers_on_map = [];
         directionsService = new google.maps.DirectionsService();
         directionsDisplay = new google.maps.DirectionsRenderer();
        var markingposition = new google.maps.LatLng(26.9142853,75.7498689);
        var bounds = new google.maps.LatLngBounds();
        var mapoptions = {
            zoom:14,
            center: markingposition
        };
        var map = new google.maps.Map(document.getElementById('mapcan'), mapoptions);
        var marker = new google.maps.Marker({
            position: markingposition ,
            animation: google.maps.Animation.DROP,
            map: map
        });


        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("dvPanel"));

          //all_locations is just a sample, you will probably load those from database
          var all_locations = [
          {type: "restaurant", name: "Restaurant 1", lat: 26.9128297, lng: 75.7495007},
          {type: "school", name: "Kotak Mahindra Bank Ltd", lat: 26.9090936, lng: 75.7446262},
          {type: "school", name: "Jagdamba Tower", lat: 26.9118107, lng: 75.7451139},
          {type: "restaurant", name: "Water Tank", lat: 26.909608, lng: 75.749964},
          {type: "school", name: "Shree Thal", lat: 26.9078141, lng: 75.7485584}
          ];


          for(i=0; i<all_locations.length; i++)
          {
            var lat = all_locations[i]['lat'];
            var long = all_locations[i]['lng'];
            latlngset = new google.maps.LatLng(lat, long);
            console.log(lat+'--'+long);
            var marker = new google.maps.Marker({
                position: latlngset,
                map: map
            });
            marker.id = { name: all_locations[i]['name'] , address : "Dobbe 63<br/>8032 JX Zwolle", tel : "01232434543" };
            attachMessage(marker,latlngset);
            map.setCenter(marker.getPosition());
          }

        /*
        marker is a JavaScript object so i'll be taking that advantage and adding a custom attribute to the marker
        object. this can be used to make dayanamic info window according to the values containing in the marker.id attribute
        */
        marker.id = { name: "Precize Property" , address : "Dobbe 63<br/>8032 JX Zwolle", tel : "01232434543" };
        attachMessage(marker,markingposition);

        // Create Cicle Around your location
        var circle = new google.maps.Circle({
                center: markingposition,
                map: map,
                radius: 1000,          // IN METERS.
                strokeColor: "#90bde5",
                strokeOpacity: 1,
                strokeWeight: 1,
                fillColor: "#55a6ed",
                fillOpacity: .2,
            });

         $('#radius_km').change(function(event) {
            radius = $(this).val();
            console.log(radius);
            var circle = new google.maps.Circle({
                center: markingposition,
                map: map,
                radius: radius_km * 1000,          // IN METERS.
                strokeColor: "#90bde5",
                strokeOpacity: 1,
                strokeWeight: 1,
                fillColor: "#55a6ed",
                fillOpacity: .2,
            });
         });

    });
    /*
    creating an infobox object, most of the attributes are self explanatory, for more info about infobox options read
    http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
    */
    infobox = new InfoBox({
        disableAutoPan: false,
        maxWidth: 150,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
                    // top arrow in the info window
                    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                    opacity: 0.9,
                    width: "300px"
            },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", //close button icon
        infoBoxClearance: new google.maps.Size(1, 1)
    });


    function attachMessage(marker,Latlng) {
      //adding click listener to the marker
      google.maps.event.addListener(marker, 'mouseover', function(evt) {

        var newob = $(".inwrapper");
        newob.find("#namexpopup").html(this.id.name);
        newob.find("#addresspopup").html(this.id.address);
    //  newob.find("#callapopup").attr("href","tel:"+this.id.tel);
        console.log(newob.html());
        infobox.setContent(newob.html());
        infobox.open(marker.get('map'), this);
        marker.get('map').panTo(Latlng);
        calculateAndDisplayRoute(directionsService, directionsDisplay);
      });

      google.maps.event.addListener(marker, 'mouseout', function(evt) {
        infobox.close();
      });
    }

    function calcRoute(){
        console.log('route');
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    }

    function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var start = '26.9142853,75.7498689';
        var end = document.getElementById('start').value;
        directionsService.route({
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
  }

Answer 1

您可以使用内置方法setOptions（）

禁用移动的地图

map.setOptions({draggable: false});

Answer 2

尝试在代码中添加此disableAutoPan选项，以便在显示infowindow时禁用地图平移。

disableAutoPan: true

查看此SO question以获取更多信息。

鼠标悬停在Google Map API 3中时如何停止地图移动？

2 个答案: