什么是正确的方式来链接一个按钮到谷歌地图

Whats the proper way to to link a button to google map?

本文关键字：一个 按钮 谷歌地图 链接 方式 什么      更新时间：2023-09-26

我对javascript相当陌生，甚至对谷歌地图api也比较陌生。我想点击一个按钮，并有一个信息窗口弹出以上的标记。我能够点击标记，并有一个信息窗口弹出。但如果我点击外部按钮，它就不会工作了。我的最终目标是能够点击不同的按钮，并在地图的不同位置弹出不同的标记。我正在努力弄清楚当前的问题，因为我觉得这有助于我对未来目标的理解。这是我的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);
    });
}

但它也不起作用。任何帮助都将非常感激。提前感谢

点击按钮时，功能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 -属性
<button id="button">press</button>

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

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');
   }
}
  1. 使标记全局，以便它可以在HTML点击事件中使用。
  2. 使用google.maps.event.trigger(marker,'click');打开现有的信息窗口

概念验证

代码片段: 

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);
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="position()" id="button">press</button>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>

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

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

你不需要按钮上的onclick。

下面是position()函数的样子: 
 function position(){
   infoWindow.open(map,marker);
 }

JSFiddle

相关文章：