文档章节

google map marker可监听事件

{
 {会飞的猪}
发布于 2014/12/24 16:42
字数 667
阅读 84
收藏 0

google.maps.Marker对象可以听下面的用户事件,例如:

  • 'click'

  • 'dblclick'

  • 'mouseup'

  • 'mousedown'

  • 'mouseover'

  • 'mouseout'

These events may look like standard DOM events, but they are actually part of the Maps API.这些事件可能看起来像标准的DOM事件,实际上却是在地图API的一部分。

MVC的对象通常包含状态。.每当一个对象的属性的变化,API将触发一个改变事件的属性。例如,该API会触发一个zoom_changed发生变化,在地图上地图的缩放级别。您可以通过注册拦截改变addListener()在事件处理程序event命名方法以及。

下例:当状态改变时,移动地图中心点:

     var map; 
function initialize() { 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
  var myOptions = { 
    zoom: 4,      center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
  map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); 
   
  google.maps.event.addListener(map, ‘zoom_changed’, function() {      setTimeout(moveToDarwin, 3000); 
  }); 
   
  var marker = new google.maps.Marker({ 
      position: myLatlng,  
      map: map, 
      title:”Hello World!” 
  }); 
  google.maps.event.addListener(marker, ‘click’, function() { 
    map.setZoom(8); 
  }); 

   
function moveToDarwin() { 
  var darwin = new google.maps.LatLng(-12.461334, 130.841904); 
  map.setCenter(darwin); 
}

例二:用户界面事件访问参数

当用户单击后,在单击处加上标记;并将点击点制为中心点

var map; 
function initialize() { 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
  var myOptions = { 
    zoom: 4,      center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
  map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); 
   
  google.maps.event.addListener(map, ‘click’, function(event) { 
    placeMarker(event.latLng); 
  }); 

   
function placeMarker(location) { 
  var clickedLocation = new google.maps.LatLng(location); 
  var marker = new google.maps.Marker({ 
      position: location,  
      map: map 
  }); 
 
  map.setCenter(location); 
}

三、在事件监听器中使用Closures

closures可以允许内部函数访问外部变量。

例子使用了 a function closure in the event listener to assign a secret message to a set of markers. Clicking on each marker will review a portion of the secret message, which is not contained within the marker itself.

 var map; 
function initialize() { 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
  var myOptions = { 
    zoom: 4,      center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
 
  map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); 
 
  // Add 5 markers to the map at random locations 
  var southWest = new google.maps.LatLng(-31.203405,125.244141); 
  var northEast = new google.maps.LatLng(-25.363882,131.044922); 
  var bounds = new google.maps.LatLngBounds(southWest,northEast); 
  map.fitBounds(bounds); 
  var lngSpan = northEast.lng() – southWest.lng(); 
  var latSpan = northEast.lat() – southWest.lat(); 
  for (var i = 0; i < 5; i++) { 
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), 
        southWest.lng() + lngSpan * Math.random()); 
    var marker = new google.maps.Marker({ 
        position: location,  
        map: map 
    }); 
    var j = i + 1; 
    marker.setTitle(j.toString()); 
    attachSecretMessage(marker, i); 
  } 

 
// The five markers show a secret message when clicked 
// but that message is not within the marker’s instance data 
 
function attachSecretMessage(marker, number) { 
  var message = ["This","is","the","secret","message"]; 
  var infowindow = new google.maps.InfoWindow( 
      { content: message[number], 
        size: new google.maps.Size(50,50) 
      }); 
  google.maps.event.addListener(marker, ‘click’, function() { 
    infowindow.open(map,marker); 
  }); 
}

四、在Event Handlers中获取和设置属性

如果您需要检查的状态属性上一个MVC,你应该明确地调用适当的getProperty ()方法的对象。

在下面的例子,我们成立了一个事件处理程序来响应事件所带来缩放级别了一个信息窗口显示的。

var map; 
function initialize() { 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
  var myOptions = { 
    zoom: 4,      center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
  map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); 
   
  var zoomLevel; 
  var infowindow = new google.maps.InfoWindow( 
    { content: ‘Zoom Level Test’, 
        size: new google.maps.Size(50,50),          position: myLatlng 
    }); 
  infowindow.open(map); 
     
  google.maps.event.addListener(map, ‘zoom_changed’, function() { 
    zoomLevel = map.getZoom(); 
    infowindow.setContent(“Zoom: ” + zoomLevel); 
    if (zoomLevel == 0) { 
      map.setZoom(10); 
    }       
  }); 
}


本文转载自:http://liaomeihua2300.blog.163.com/blog/static/134785919201081023931425/

{
粉丝 0
博文 14
码字总数 3806
作品 0
西安
私信 提问
GoogleMap api v3开发总结

项目描述:某快餐连锁在上海有11家分店,要求就是找到这11家分店的坐标,然后在地图上将其全部以自定义的图片方式显示出来,在鼠标移动到某个图片上显示这家店的具体地址。 1.取坐标。用Goo...

王二铁
2011/12/02
0
0
百度地图API——MarkerTool单击事件的添加

百度地图API中实现标记功能,一种是使用覆盖物中的Marker来直接实现,这么用的好处是可以直接使用官方2.0提供的各种接口,但是一些复杂需求实现起来不免有些繁琐,比如鼠标跟随的式样修改,单...

dawumai
2014/09/03
0
0
百度地图拖动标注后获取坐标

本来想用图吧的API来做的,结果弄了下,在手机上弄不了。换用百度地图了。。本功能个人觉得在很多地方用到,先记下来,省得每次都得翻地图API文档一点一点弄。 功能表现为: 地图一开始打开就...

niunan
2017/05/07
0
0
谷歌地图开发

开发人员指南 地图基础知识 1 简介 2 Google 地图的“Hello, World” 2 加载 Google 地图 API 2 地图 DOM 元素 2 GMap2 - 基本对象 2 初始化地图 2 加载地图 3 经度和纬度 4 地图属性 5 地图...

梅_95
2016/07/28
29
0
高德地图(AMap)JavaScript API的使用

申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: 创建地图容器 在页面body里你想展示地图的地方创建一个div 容器,并指定id标识: 指定容器大小...

驛路梨花醉美
2016/12/22
124
0

没有更多内容

加载失败,请刷新页面

加载更多

【JavaScript】callee 与 caller

callee callee是函数参数arguments对象的一个属性,它指向参数arguments对象所在的函数自身。 function foo (x) {console.log(arguments.callee);return x;}foo(); 从控制台中可以看...

小草先森
28分钟前
2
0
全面剖析 Knative Eventing 0.6 版本新特性

摘要: Knative Eventing 0.6 版本已经于5月15号正式发布。相比于0.5版本,此次发布包含了一些重要特性及更新。针对这些新特性以及更新,我们如何快速、精准的定位主要技术点。本篇文章针对这...

阿里云云栖社区
30分钟前
9
0
ffmpeg常用命令

1.合并两个或多个视频文件 将a.flv b.flv合并为c.flv 编辑文件flvs.txt file 'a.flv'file 'b.flv' #ffmpeg -f concat -i flvs.txt -c copy c.flv...

硅谷课堂
32分钟前
1
0
MySQL面试题--常见的四种隔离级别

什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个...

寰宇01
32分钟前
2
0
Docker 安装 reids

0、mac上安装docker brew cask install docker 1、查询reidis docker search redis 2、拉取redis最新版本(也可以拉取指定版本,如:docker pull redis:4.0) docker pull redis 3、查看镜像 ...

moon888
40分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部