Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

谷歌地图 事件


点击标记放大

我们仍然使用上一页的地图:以英国伦敦为中心的图。

现在我们希望在用户点击标记时放大地图(我们将事件处理程序附加到标记,以便在点击时放大地图)。

以下是添加的代码

示例

// 点击标记时放大到 9 倍
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

我们使用 addListener() 事件处理程序注册事件通知。该方法接受一个对象、一个要监听的事件和一个在指定事件发生时调用的函数。



平移回标记

这里,我们保存放大更改并在 3 秒后将地图平移回来

示例

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

点击标记时打开信息窗口

点击标记以显示带有文本的信息窗口

示例

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});

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

设置标记并为每个标记打开信息窗口

在用户点击地图时运行函数。

placeMarker() 函数在地点标记用户点击的位置,并显示一个包含标记纬度和经度的信息窗口

示例

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});

function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: '纬度: ' + location.lat() +
    '<br>经度: ' + location.lng()
  });
  infowindow.open(map,marker);
}

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.