个人中心
gpt4 book ai didi

javascript - 防止谷歌覆盖/信息窗口允许点击下面的标记

转载 作者：行者123 更新时间：2023-11-30 06:02:18 25 4
gpt4 key购买 nike

我正在尝试制作一些自定义 Google map 信息窗口，但我遇到了一个问题，即我的自定义信息窗口下方的标记可通过信息窗口点击。

这是一个例子 ( basically straight from googles example here )

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Custom</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();

/* Creates the DIV representing this InfoBox
 */
InfoBox.prototype.remove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function() {
  // Creates the element if it doesn't exist already.
  this.createElement();
  if (!this.div_) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (!pixPosition) return;

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
};

/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
 * object, retrieved by calling getPanes, is null, remove the element from the
 * DOM.  If the div exists, but its parent is not the floatPane, move the div
 * to the new pane.
 * Called from within draw.  Alternatively, this can be called specifically on
 * a panes_changed event.
 */
InfoBox.prototype.createElement = function() {
  var panes = this.getPanes();
  var div = this.div_;
  if (!div) {
    // This does not handle changing panes.  You can set the map to be null and
    // then reset the map to move the div.
    div = this.div_ = document.createElement("div");
    div.style.border = "0px none";
    div.style.position = "absolute";
    div.style.background = "url('http://gmaps-samples.googlecode.com/svn/trunk/images/blueinfowindow.gif')";
    div.style.width = this.width_ + "px";
    div.style.height = this.height_ + "px";
    var contentDiv = document.createElement("div");
    contentDiv.style.padding = "30px"
    contentDiv.innerHTML = "<b>Hello World!</b>";

    var topDiv = document.createElement("div");
    topDiv.style.textAlign = "right";
    var closeImg = document.createElement("img");
    closeImg.style.width = "32px";
    closeImg.style.height = "32px";
    closeImg.style.cursor = "pointer";
    closeImg.src = "http://gmaps-samples.googlecode.com/svn/trunk/images/closebigger.gif";
    topDiv.appendChild(closeImg);

    function removeInfoBox(ib) {
      return function() {
        ib.setMap(null);
      };
    }

    google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));

    div.appendChild(topDiv);
    div.appendChild(contentDiv);
    div.style.display = 'none';
    panes.floatPane.appendChild(div);
    this.panMap();
  } else if (div.parentNode != panes.floatPane) {
    // The panes have changed.  Move the div.
    div.parentNode.removeChild(div);
    panes.floatPane.appendChild(div);
  } else {
    // The panes have not changed, so no need to create or move the div.
  }
}

/* Pan the map to fit the InfoBox.
 */
InfoBox.prototype.panMap = function() {
};

function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-33.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      sensor: 'true'
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-34, 150),
        map: map
    });
    google.maps.event.addListener(marker, "click", function(e) {
      var infoBox = new InfoBox({latlng: marker.getPosition(), map: map});
    });

    var m2 = new google.maps.Marker({
        position: new google.maps.LatLng(-33.5, 150.5),
        map: map
    });
    google.maps.event.addListener(m2, "click", function(e) {
      var infoBox = new InfoBox({latlng: m2.getPosition(), map: map});
    });

  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

你可以看到我正在制作两个标记，一个就在另一个的东北方向。单击底部的一个，然后观察如何通过标记(就在“W”附近)点击另一个标记。

我该如何解决这个问题？!我尝试过更改 z-index，但这似乎没有帮助。

顺便说一句，这是使用 api v3。

最佳答案

为了后代，你想禁用标记弹出 dom 上的一系列事件，这是规定的方法，尽管感觉有点矫枉过正。您也可以循环浏览除单击的标记之外的所有标记并禁用单击它们(事后看来这可能是更好的解决方案)。取决于你有多少标记，我有很多。

像这样的东西(未经我的 CoffeeScript 测试就在此处转录，所以...)

// All in a google.maps.OverlayView subclass.

...
this.listeners = new Array(); // save listeners for unbinding later
...
this.cancelEvents = function(){
    events = ['mousedown', 'mousemove', 'mouseover', 
            'mouseout', 'mouseup', 'mousewheel', 
            'DOMMouseScroll', 'touchstart', 'touchend', 
            'touchmove', 'dblclick', 'contextmenu'];
    // Note, don't disable 'click' if you want to be able to click links in the dom. Some things we're disabling here will can effect how your user might interact with the popup (double click to select text etc)
    for(var i = 0; i < events.length; i++){
        var event = events[i];
        this.listeners.push(
            google.maps.event.addDomListener(
                this.popup_dom_element,
                event,
                function(ev){
                    e.cancelBubble = true;
                    if(e.stopPropagation){
                        e.stopPropagation();
                    }
                }
            );
        );
    }
}

this.onAdd = function (){
    // build your html popup
    var html_code = "...";
    // easy way to get a dom element but probably over kill if its your only JQ
    this.popup_dom_element = $(html_code);
    this.cancelEvents();
}

this.onRemove = function(){
    // any other removal code you have
    ...
    for(var i = 0; i < this.listeners.length; i++){
        // remove our event listeners
        google.maps.event.removeListener(this.listeners[i]);
    }
}

关于javascript - 防止谷歌覆盖/信息窗口允许点击下面的标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7516225/

25 4 0
文章推荐： javascript - 你如何在 flot(用于绘图的 jQuery 插件)中创建粗体轴？
文章推荐： javascript - 如何找到元素相对于浏览器窗口的坐标
文章推荐： javascript - JQuery - 模态对话框似乎禁用了它的表单字段
文章推荐： javascript - jquery .submit() 和变量的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com