Question

当我点击我的标记时，我想显示一个div，而不是Google Maps中的Infowindow。我已经全部工作了，当我点击标记显示div时，唯一的问题是div的位置！

我的网站对地图有反应，但div不是。所以我想要完成的是根据地图的纬度和经度制作div的位置，这样，当地图被调整大小时，div将出现在同一个地方。

我是noobie所以我不知道该怎么办...... 有什么想法吗？

Answer 1

如果您使用InfoBox库插件，则可以将标记放在指定的纬度/经度坐标处。单击标记时，可以显示内容框。它还允许您使用该坐标的像素偏移量，因此您可以相对于标记移动框。

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js

下面，在markerOptions中，有一个content属性允许你输入任何html。我有一个带有许多标记的对象，所以我在这里使用for语句并在数组中存储marker和markersOptions。

marker = new google.maps.Marker({
             map: map,
             draggable: false,
             position: new google.maps.LatLng(parksMarkerInfo[r].coordinates[0], parksMarkerInfo[r].coordinates[1]),
             visible: true,
             icon: "http://www.travelalaska.com/~/media/Images/Travel%20Alaska/Maps/Parks/park-marker.png",
            });

          markerOptions = {
             content: "<a href='http://"+window.location.host+"/Destinations/Parks%20and%20Public%20Lands/"+ (parksMarkerInfo[r].markerLink || parksMarkerInfo[r].markerLabel) +".aspx'>"+parksMarkerInfo[r].markerTranslation+"</a>"
            ,disableAutoPan: true
            ,pixelOffset: new google.maps.Size(parksMarkerInfo[r].offset[0], parksMarkerInfo[r].offset[1])
            ,boxStyle: {
              textAlign: "left"
              ,fontSize: "12px"
              ,whiteSpace: "nowrap"
              ,lineHeight: "16px"
              ,fontWeight: "bold"
              ,fontFamily: "Tahoma"
             }
            ,isHidden: false
            ,closeBoxURL: ""
            ,position: new google.maps.LatLng(parksMarkerInfo[r].coordinates[0], parksMarkerInfo[r].coordinates[1])
            ,pane: "floatPane"
            ,enableEventPropagation: false
            ,boxClass: "parkLabel"
          };

          parkMarker.push(marker);
          parkOptions.push(markerOptions);

          parkMarker[arrayLoc].infobox = new InfoBox(parkOptions[arrayLoc]);

          parkMarker[arrayLoc].infobox.open(map, marker);
          parkMarker[arrayLoc].infobox.close();

          google.maps.event.addListener(parkMarker[arrayLoc], 'click', (function(marker, arrayLoc){
            return function(){
                for ( h = 0; h < parkMarker.length; h++ ) {
                    if(parkMarker[h].infobox){
                      parkMarker[h].infobox.close();
                    }
                }
                marker.infobox.open(map, marker);
            }
          })(parkMarker[arrayLoc], arrayLoc));

Answer 2

你能看一下你的鼠标位置而不是经度纬度吗？然后在$ window.resize上，你可以根据需要重新定位div。

  $('#your-gmap-div').click(function(e) {
    var offset = $(this).offset();
    var mouseposition = {
        x: e.clientX - offset.left,
        y: e.clientY - offset.top
    }

    //show your div
  });

  $window.resize(function(){
       //reposition your div.
  });

我还没有测试过，但是如果点击div可能会有效，我不知道gmaps iframe是否会保留点击事件。

根据谷歌地图的纬度和经度放置div

2 个答案: