搜索
搜索

在点击时显示Google地图左上角的信息窗口？

raul 发表于 Dev
22
劳尔

我正在构建一个Google地图，我想在鼠标悬停在标记上时显示一些信息，然后在用户单击地图时显示更多详细信息。我通过添加两个信息窗口找到了解决方案。

html

<div id="map-canvas"></div>

的CSS

#map-canvas {        
    height: 400px;
    width: 100%; 
}

js

"use strict";

        // variable to hold a map
        var map;

        // variable to hold current active InfoWindow
        var activeInfoWindow ;      

        // ------------------------------------------------------------------------------- //
        // initialize function      
        // ------------------------------------------------------------------------------- //
          function initialize() {

            // map options - lots of options available here 
            var mapOptions = {
              zoom : 6,
              draggable: true,
              center : new google.maps.LatLng(43.637599, 1.319152),
              mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            // create map in div called map-canvas using map options defined above
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // define three Google Map LatLng objects representing geographic points
            var barca           = new google.maps.LatLng(41.387042, 2.181382);
            var toulouse    = new google.maps.LatLng(43.637599, 1.319152);
            var madrid  = new google.maps.LatLng(40.424803, -3.698083);

            // place markers
            fnPlaceMarkers(barca,"Barcelona");
            fnPlaceMarkers(toulouse,"Toulouse");            
            fnPlaceMarkers(madrid,"Madrid");            
          }

        // ------------------------------------------------------------------------------- //
        // create markers on the map
        // ------------------------------------------------------------------------------- //
        function fnPlaceMarkers(myLocation,myCityName){

            var marker = new google.maps.Marker({
                position : myLocation
            });

           //var lat_lng = {lat: 17.08672, lng: 78.42444};  

            // Renders the marker on the specified map
            marker.setMap(map); 

            // create an InfoWindow - for mouseover
            var infoWnd = new google.maps.InfoWindow();     


            // create an InfoWindow -  for mouseclick
            var infoWnd2 = new google.maps.InfoWindow(
                {
                    //pixelOffset: new google.maps.Size(200,0)
                    //position: {40.424803, -3.698083}
                    //content: contentString
                }
            );

            // -----------------------
            // ON MOUSEOVER
            // -----------------------

            // add content to your InfoWindow
            infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + ' This appears when you put your mouse over a marker</div>');

            // add listener on InfoWindow for mouseover event
            google.maps.event.addListener(marker, 'mouseover', function() {

                // Close active window if exists - [one might expect this to be default behaviour no?]              
                if(activeInfoWindow != null) activeInfoWindow.close();

                // Close info Window on mouseclick if already opened
                infoWnd2.close();

                // Open new InfoWindow for mouseover event
                infoWnd.open(map, marker);

                // Store new open InfoWindow in global variable
                activeInfoWindow = infoWnd;             
            });                             

            // on mouseout (moved mouse off marker) make infoWindow disappear
            google.maps.event.addListener(marker, 'mouseout', function() {
                infoWnd.close();    
            });

            // --------------------------------
            // ON MARKER CLICK - (Mouse click)
            // --------------------------------

            // add content to InfoWindow for click event 
            infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '. <br/> This appears when you click on marker</div>');

            // add listener on InfoWindow for click event
            google.maps.event.addListener(marker, 'click', function() {

                //Close active window if exists - [one might expect this to be default behaviour no?]               
                if(activeInfoWindow != null) activeInfoWindow.close();

                // Open InfoWindow - on click 
                infoWnd2.open(map, marker);

                // Close "mouseover" infoWindow
                infoWnd.close();

                // Store new open InfoWindow in global variable
                activeInfoWindow = infoWnd2;
            });                             

        }

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

它运作良好，您可以在这里看到它：

https://codepen.io/anon/pen/JJLVNB

但我想改善这一点。我看到了我真正喜欢的东西。我如何在Google地图的左上角添加html信息窗口，就像点击标记时在booking.com（以下img）上所做的那样。当您在某个位置内时，可以单击“在地图上显示”，它将显示我喜欢的功能。

在此处输入图片说明

如何创建此功能，即在悬停时显示一个信息窗口，然后单击始终位于左上方的另一个窗口？

萨加尔五世

因为您说过您的要求是将其放在top:0和上left:0，所以有一种方法可以做到这一点。

你显示一个内容div与class=scrollFix。整个div是它的第四位父母。

在生成信息框eventlistener的marker -> click位置内添加以下代码。

1. jQuery

$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0px";
$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";

片段

"use strict";

		// variable to hold a map
		var map;
		
		// variable to hold current active InfoWindow
		var activeInfoWindow ;		

		// ------------------------------------------------------------------------------- //
		// initialize function		
		// ------------------------------------------------------------------------------- //
		  function initialize() {
			
			// map options - lots of options available here 
			var mapOptions = {
			  zoom : 6,
			  draggable: true,
			  center : new google.maps.LatLng(43.637599, 1.319152),
			  mapTypeId : google.maps.MapTypeId.ROADMAP
			};
			
			// create map in div called map-canvas using map options defined above
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		
			// define three Google Map LatLng objects representing geographic points
			var barca 			= new google.maps.LatLng(41.387042, 2.181382);
			var toulouse 	= new google.maps.LatLng(43.637599, 1.319152);
			var madrid 	= new google.maps.LatLng(40.424803, -3.698083);

			// place markers
			fnPlaceMarkers(barca,"Barcelona");
			fnPlaceMarkers(toulouse,"Toulouse");			
			fnPlaceMarkers(madrid,"Madrid");			
		  }

		// ------------------------------------------------------------------------------- //
		// create markers on the map
		// ------------------------------------------------------------------------------- //
		function fnPlaceMarkers(myLocation,myCityName){
				
			var marker = new google.maps.Marker({
				position : myLocation
			});
		
           //var lat_lng = {lat: 17.08672, lng: 78.42444};  

			// Renders the marker on the specified map
      
			marker.setMap(map);	

			// create an InfoWindow - for mouseover
			var infoWnd = new google.maps.InfoWindow();		


			// create an InfoWindow -  for mouseclick
			var infoWnd2 = new google.maps.InfoWindow(
				{
					//pixelOffset: new google.maps.Size(200,0)
					//position: {40.424803, -3.698083}
					//content: contentString
				}
			);
			
			// -----------------------
			// ON MOUSEOVER
			// -----------------------
			
			// add content to your InfoWindow
			infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + ' This appears when you put your mouse over a marker</div>');
			
			// add listener on InfoWindow for mouseover event
			google.maps.event.addListener(marker, 'mouseover', function() {
				
				// Close active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Close info Window on mouseclick if already opened
				infoWnd2.close();
			
				// Open new InfoWindow for mouseover event
				infoWnd.open(map, marker);
				
				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd;				
			}); 							
			
			// on mouseout (moved mouse off marker) make infoWindow disappear
			google.maps.event.addListener(marker, 'mouseout', function() {
				infoWnd.close();	
			});
			
			// --------------------------------
			// ON MARKER CLICK - (Mouse click)
			// --------------------------------
			
			// add content to InfoWindow for click event 
			infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '. <br/> This appears when you click on marker</div>');
			
			// add listener on InfoWindow for click event
			google.maps.event.addListener(marker, 'click', function() {
				
				//Close active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Open InfoWindow - on click 
				infoWnd2.open(map, marker);
				$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0";
        $(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";
        
				// Close "mouseover" infoWindow
				infoWnd.close();
				
				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd2;
			}); 							
			
		}
		
		// ------------------------------------------------------------------------------- //
		// initial load
		// ------------------------------------------------------------------------------- //		
		google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas, #side-bar {        
		height: 400px;
		width: 100%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

2. JavaScript

document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0";
document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";

片段

"use strict";

		// variable to hold a map
		var map;
		
		// variable to hold current active InfoWindow
		var activeInfoWindow ;		

		// ------------------------------------------------------------------------------- //
		// initialize function		
		// ------------------------------------------------------------------------------- //
		  function initialize() {
			
			// map options - lots of options available here 
			var mapOptions = {
			  zoom : 6,
			  draggable: true,
			  center : new google.maps.LatLng(43.637599, 1.319152),
			  mapTypeId : google.maps.MapTypeId.ROADMAP
			};
			
			// create map in div called map-canvas using map options defined above
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		
			// define three Google Map LatLng objects representing geographic points
			var barca 			= new google.maps.LatLng(41.387042, 2.181382);
			var toulouse 	= new google.maps.LatLng(43.637599, 1.319152);
			var madrid 	= new google.maps.LatLng(40.424803, -3.698083);

			// place markers
			fnPlaceMarkers(barca,"Barcelona");
			fnPlaceMarkers(toulouse,"Toulouse");			
			fnPlaceMarkers(madrid,"Madrid");			
		  }

		// ------------------------------------------------------------------------------- //
		// create markers on the map
		// ------------------------------------------------------------------------------- //
		function fnPlaceMarkers(myLocation,myCityName){
				
			var marker = new google.maps.Marker({
				position : myLocation
			});
		
           //var lat_lng = {lat: 17.08672, lng: 78.42444};  

			// Renders the marker on the specified map
      
			marker.setMap(map);	

			// create an InfoWindow - for mouseover
			var infoWnd = new google.maps.InfoWindow();		


			// create an InfoWindow -  for mouseclick
			var infoWnd2 = new google.maps.InfoWindow(
				{
					//pixelOffset: new google.maps.Size(200,0)
					//position: {40.424803, -3.698083}
					//content: contentString
				}
			);
			
			// -----------------------
			// ON MOUSEOVER
			// -----------------------
			
			// add content to your InfoWindow
			infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + ' This appears when you put your mouse over a marker</div>');
			
			// add listener on InfoWindow for mouseover event
			google.maps.event.addListener(marker, 'mouseover', function() {
				
				// Close active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Close info Window on mouseclick if already opened
				infoWnd2.close();
			
				// Open new InfoWindow for mouseover event
				infoWnd.open(map, marker);
				
				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd;				
			}); 							
			
			// on mouseout (moved mouse off marker) make infoWindow disappear
			google.maps.event.addListener(marker, 'mouseout', function() {
				infoWnd.close();	
			});
			
			// --------------------------------
			// ON MARKER CLICK - (Mouse click)
			// --------------------------------
			
			// add content to InfoWindow for click event 
			infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '. <br/> This appears when you click on marker</div>');
			
			// add listener on InfoWindow for click event
			google.maps.event.addListener(marker, 'click', function() {
				
				//Close active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Open InfoWindow - on click 
				infoWnd2.open(map, marker);
				document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0";
        document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";
        
				// Close "mouseover" infoWindow
				infoWnd.close();
				
				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd2;
			}); 							
			
		}
		
		// ------------------------------------------------------------------------------- //
		// initial load
		// ------------------------------------------------------------------------------- //		
		google.maps.event.addDomListener(window, 'load', initialize);
	#map-canvas, #side-bar {        
		height: 400px;
		width: 100%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

下拉菜单显示在右上角，单击时显示在左上角

Java：替换窗口左上角的咖啡杯图标

左上角的浮动JButton

JavaFX窗口在左上角打开，然后跳到中心

左上角的ConstraintLayout视图

如何在iOS Google地图中显示“信息”窗口而不点击“标记”？

访问ʻuitable`的左上角

d3地图点仅在左上角绘制

如何在右上角显示时间和日期，同时在左上角显示温度？

我可以避免将TreeViewItem的内容放在WPF窗口的左上角吗？

视图左上角的Swift GMSMarker图标

自Pod更新以来，地图iOS左上角的GoogleMaps相机目标

如何使PYGAME窗口出现在显示器的左上角？

从抽屉中调用listviewScreen时，左上角没有显示后退按钮

点击屏幕左上角时如何打开Unity破折号？

Google地图，点击链接后打开信息窗口

通知OSD通知在左上角显示为非主题

显示器左上角的桌面

自定义视图仅显示在左上角

安装ubuntu时，左上角的白色小屏幕

放置在原点的窗口左上角缺少像素

当DropDownStyle为Simple时，ToolStripCombobox显示在屏幕的左上角

当我在没有输入用户名和密码的情况下按下登录按钮时，浏览器的左上角显示这样的信息“无效信息”

点击按钮添加编辑器时，summernote note-popover 出现在左上角

以编程方式添加时左上角的 ConstraintLayout 视图

WPF窗口左上角不透明

当我切换到 RelativeLayout 时，我在设计中放置的所有内容都会显示在屏幕的左上角

放大时如何获得地图左上角和右下角的纬度

当跟随来自 v 按钮的链接时，Vuetify 工具提示显示在左上角

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    计算数据帧R中的字符串频率

  3. 3

    如何使用Redux-Toolkit重置Redux Store

  4. 4

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  5. 5

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  6. 6

    TreeMap中的自定义排序

  7. 7

    TYPO3：将 Formhandler 添加到新闻扩展

  8. 8

    遍历元素数组以每X秒在浏览器上显示

  9. 9

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  10. 10

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  11. 11

    无法连接网络并在Ubuntu 14.04中找到eth0

  12. 12

    将辅助轴原点与主要轴对齐

  13. 13

    我可以ping IPv6但不能ping IPv4

  14. 14

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  15. 15

    提交html表单时为空

  16. 16

    使用C ++ 11将数组设置为零

  17. 17

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

  18. 18

    尝试在Dell XPS13 9360上安装Windows 7时出错

  19. 19

    如何在R中转置数据

  20. 20

    无法使用 envoy 访问 .ssh/config

  21. 21

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

热门标签

归档