从零开始学google地图API(3)--事件响应

地图事件
MapsEventListener 它没有方法和构造函数,它的实例从addListener()、addDomListener()返回，并最终传递回removeListener()
event Adds/Removes/Trigger 事件监听
MouseEvent 从地图和覆盖上的各种鼠标事件返回

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
  center: new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
  position:new google.maps.LatLng(51.508742,-0.120850),
  title:'Click to zoom'//title上一节没有说，当鼠标移动到这个标记时候，可以看到会有一个小小的白色框，显示title里的内容
  });
marker.setMap(map);
//监听点击标记的函数,点击标记时绑定地图缩放事件
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

用addListener() 事件处理程序来注册事件的监听,参数一个对象，一个事件，一个指定的事件发生时调用的函数
map.setCenter()传入经纬度来重新定位
通过marker.getPosition();来获取标记的位置，实现对标记位置的缩放，这里返回的是(51.508742, -0.12085)

我们通过给地图添加事件处理程序来改变 ‘center’ 属性，以下代码使用 center_changed 事件在3秒后标记移会中心点

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
  center: new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(51.508742,-0.120850),
  title:'Click to zoom'
  });

marker.setMap(map);

google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());//由于这一步中心改变了，所以下面那个函数会在这个函数执行后执行
  });
    
  //紧跟刚才的setCenter   
google.maps.event.addListener(map,'center_changed',function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);//设置一个延迟setTimeout
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

刚才研究了一下panTo和setCenter的区别，其实效果都差不多，而且都可以触发center_changed事件，所以可以互相替换

还记得上一节的infowindow,那个是一直触发，我们可以实现点击后再触发

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:new google.maps.LatLng(51.508742,-0.120850),
  });

marker.setMap(map);

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

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

实现每次点击地图显示地图上组件的地理位置

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
var map;
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
  
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(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);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

map属性的值就是你创建的map对象值
必须要绑定map值，不然后面 infowindow.open(map,marker);里面的map没有
实现每次点击地图显示地图上组件的地理位置

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
var map;
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
  
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
  });
  marker.setMap(map);
  var infowindow = new google.maps.InfoWindow({
    content: '纬度：' + location.lat() + '<br>经度: ' + location.lng()
  });
  infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

现在想明白了，上面这种写法和那种是一个效果
之前每次标记后面都有 marker.setMap(map);这句，用来生成标记，而我们之前那种没有这句，所以就需要把map属性绑定好，不然后面的infowindow绑定的map为空

从零开始学google地图API(3)--事件响应

猜你喜欢