Question

我对javascript相当新，甚至更新到google maps api。我想点击一个按钮，并在标记上方弹出一个信息窗口。我可以点击标记并弹出一个infoWindow。但如果我点击外部按钮它将无法正常工作。我的最终目标是能够点击不同的按钮，并在地图上的不同位置弹出不同的标记。我试图解决当前的问题，因为我觉得这有助于我理解我未来的目标。这是我的javascript：

function initialize() {
    var mapDiv = document.getElementById("googleMap");
    var center = new google.maps.LatLng(40.7127837, -74.0059413);

    var mapProp = {
        center:center,
        zoom:9,
        //disableDefaultUI: true,
        mapTypeControl: false,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(mapDiv,mapProp);

    var marker = new google.maps.Marker({
        position:center,
        map:map,
        title: 'center of new york'
    });

    var content = '<div id="info">' +
            '<img src="uploads/home-bg.jpg" />' +
        '<a href="http://kings.app/blog/6th-woman">' +
        '<p>6th woman</p>' +
        '</a> ' +
        '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: content
    });

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


    function position(){
        infowindow.open(map,marker);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

这是html按钮

   <button onclick="position()" id="button"> press</button>

我也试过这个js代码

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

但它也没有用。任何帮助将不胜感激。提前致谢

Answer 1

单击按钮时，函数<!DOCTYPE html> <html> <head> <title>Guardians | Home</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="navbar navbar-fixed-top"> <div class="container"> <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-header"> <a class="navbar-brands" href="#"><img src="jamallogo2.png"></a> </div> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav pull-right"> <li id="active" class="menu"><a href="index.html">HOME</a></li> <li class="menu"><a href="#ABOUT">ABOUT US</a></li> <li class="menu"><a href="#RESEARCH">RESEARCH</a></li> <li class="menu"><a href="#DONATE">DONATE</a></li> </ul> </div> </div> </div> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> </ol>  <div class="carousel-inner"> <div class="item active" alt="slide1"> <img src="http://s7.postimg.org/c5f9quupn/leopard.jpg"> </div> <div class="item" alt="slide2"> <img src="http://s15.postimg.org/g1pqxnl47/gorilla.jpg?noCache=1440526418"> </div> <div class="item" alt="slide3"> <img src="http://s15.postimg.org/wgjoa833f/turtle.jpg"> </div> </div>  <a class="left carousel-control" data-slide="prev" href="#myCarousel"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" data-slide="next" href="#myCarousel"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </body> </html>未知。

为position中的按钮添加点击监听器（initialize仅在那里知道）

position

并从按钮

中删除

function initialize() {
    /**
      *..... your code
      **/

    function position(){
        infowindow.open(map,marker);
    }
    //add the click-listener
    google.maps.event.addDomListener(document.getElementById('button'),
                                    'click',
                                    position
                                    );
}
google.maps.event.addDomListener(window, 'load', initialize);

- 属性

onclick

Answer 2

执行此操作的一种方法是在构建地图时将标记收集到数组中。在你的例子中，你只有一个标记，但我假设你会有更多。

var markerArray = [];
function initialize() {
   ...
   google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
   });
   markerArray.push(marker);

   ...
} //end initialize

function position() {
   for(i = 0; i < markerArray.length; ++i) {
       google.maps.event.trigger(markerArray[i], 'click');
   }
}

Answer 3

您需要从API本身添加一个事件监听器，如下所示：

google.maps.event.addDomListener(document.getElementById('press'),'click',position);

您不需要点击按钮。

这里是position（）函数的样子：

 function position(){
   infoWindow.open(map,marker);
 }

JSFiddle

Answer 4

使标记全局，以便可以在HTML点击事件中使用。
使用AbstractController::ActionNotFound: Could not find devise mapping for path "/mobile/sessions/create.json?params=blah. This may happen for two reasons: 1) You forgot to wrap your route inside the scope block. For example: devise_scope :user do get "/some/route" => "some_devise_controller" end 2) You are testing a Devise controller bypassing the router. If so, you can explicitly tell Devise which mapping to use: @request.env["devise.mapping"] = Devise.mappings[:user]打开现有的信息窗口。

proof of concept fiddle

代码段

＆＃13;

google.maps.event.trigger(marker,'click');

＆＃13;

var marker;

function initialize() {
  var mapDiv = document.getElementById("googleMap");
  var center = new google.maps.LatLng(40.7127837, -74.0059413);

  var mapProp = {
    center: center,
    zoom: 9,
    //disableDefaultUI: true,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(mapDiv, mapProp);

  marker = new google.maps.Marker({
    position: center,
    map: map,
    title: 'center of new york'
  });

  var content = '<div id="info">' +
    '<img src="uploads/home-bg.jpg" />' +
    '<a href="http://kings.app/blog/6th-woman">' +
    '<p>6th woman</p>' +
    '</a> ' +
    '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: content
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}

function position() {
  google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

什么是将按钮链接到谷歌地图的正确方法？

4 个答案: