google.maps.Map 的事件

本文详细介绍了 Google Maps JavaScript API V3 中的各种地图事件及其参数,包括地图边界变化、中心点变化、点击和双击等事件,帮助开发者更好地理解和使用这些事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Google Maps JavaScript API V3 Reference
https://developers.google.com/maps/documentation/javascript/reference#release-version




google.maps.Map class

Events
bounds_changed
Arguments:   None
This event is fired when the viewport bounds have changed.
center_changed
Arguments:   None
This event is fired when the map center property changes.
click
Arguments:   MouseEvent
This event is fired when the user clicks on the map (but not when they click on a marker or infowindow).
dblclick
Arguments:   MouseEvent
This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.
drag
Arguments:   None
This event is repeatedly fired while the user drags the map.
dragend
Arguments:   None
This event is fired when the user stops dragging the map.
dragstart
Arguments:   None
This event is fired when the user starts dragging the map.
heading_changed
Arguments:   None
This event is fired when the map heading property changes.
idle
Arguments:   None
This event is fired when the map becomes idle after panning or zooming.
maptypeid_changed
Arguments:   None
This event is fired when the mapTypeId property changes.
mousemove
Arguments:   MouseEvent
This event is fired whenever the user's mouse moves over the map container.
mouseout
Arguments:   MouseEvent
This event is fired when the user's mouse exits the map container.
mouseover
Arguments:   MouseEvent
This event is fired when the user's mouse enters the map container.
projection_changed
Arguments:   None
This event is fired when the projection has changed.
resize
Arguments:   None
Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .
rightclick
Arguments:   MouseEvent
This event is fired when the DOM contextmenu event is fired on the map container.
tilesloaded
Arguments:   None
This event is fired when the visible tiles have finished loading.
tilt_changed
Arguments:   None
This event is fired when the map tilt property changes.
zoom_changed
Arguments:   None
This event is fired when the map zoom property changes.





Google Maps JavaScript API V3 Reference
<think>好的,用户想了解google.maps.Marker的参数。首先,我需要回忆一下Google Maps JavaScript API中Marker类的相关文档。Marker是用于在地图上添加标记的组件,有很多配置参数。 首先,用户可能需要知道创建标记时的基本参数,比如位置、地图实例、标题等。然后,可能还有更高级的选项,比如图标、动画、点击事件等。需要确保覆盖常用的参数,并且每个参数的解释要清晰。 参数中position是必须的,因为它指定了标记的位置。map参数如果不设置,标记不会显示,但之后可以添加到地图上。title是鼠标悬停时的提示文字,这个比较基础。icon允许自定义图标,可能需要详细说明结构。animation可以设置弹跳或下落动画,需要提到两种类型。 另外,clickable和draggable这些布尔参数也很重要,影响用户交互。zIndex控制层叠顺序,visible控制可见性。label可以添加文字标签,但可能和title不同。opacity设置透明度,可能需要例子说明。 还要注意是否需要给出示例代码,但用户可能只需要参数列表和解释。要确保使用正确的中文术语,比如“经纬度坐标”而不是“latlng”。同时,提醒用户某些参数如position是必填的,其他是可选的。 最后,检查是否有遗漏的参数,比如optimized用于性能优化,crossOnDrag可能与拖动有关。是否需要提到事件监听?不过用户问的是参数,可能不需要涉及事件部分。确保每个参数都有简要说明和示例值,帮助用户理解用法。</think>以下是关于`google.maps.Marker`核心参数的详细说明(基于JavaScript API): --- ### **基础参数** 1. **`position`** (必填) - 类型:`LatLng` 或 `LatLngLiteral` - 作用:标记的经纬度坐标 - 示例: ```javascript { position: { lat: 40.7128, lng: -74.0060 } } // 纽约坐标 ``` 2. **`map`** - 类型:`google.maps.Map` - 作用:要将标记添加到的地图实例 - 示例: ```javascript const marker = new google.maps.Marker({ map: myMap, position: myLatLng }); ``` 3. **`title`** - 类型:`string` - 作用:鼠标悬停时显示的提示文字 - 示例: ```javascript { title: "这里是纽约!" } ``` --- ### **外观控制** 4. **`icon`** - 类型:`string` 或 `Icon` 对象 - 作用:自定义标记图标(URL或矢量路径) - 示例: ```javascript { icon: "http://example.com/pin.png" } // 图片URL // 或复杂配置 { icon: { path: google.maps.SymbolPath.CIRCLE, scale: 8, fillColor: "red" } } ``` 5. **`label`** - 类型:`string` 或 `MarkerLabel` - 作用:在标记上叠加文字标签 - 示例: ```javascript { label: "A" } // 单字符标签 // 多字符需通过对象配置 { label: { text: "New York", color: "blue", fontSize: "12px" } } ``` 6. **`opacity`** - 类型:`number` (0.0~1.0) - 作用:标记透明度 - 示例: ```javascript { opacity: 0.7 } ``` --- ### **交互行为** 7. **`clickable`** - 类型:`boolean` - 作用:是否响应点击事件(默认`true`) - 示例: ```javascript { clickable: false } // 禁用点击 ``` 8. **`draggable`** - 类型:`boolean` - 作用:是否允许鼠标拖动标记(默认`false`) - 示例: ```javascript { draggable: true } // 启用拖动 ``` 9. **`crossOnDrag`** - 类型:`boolean` - 作用:拖动时是否显示十字准星(需`draggable: true`) --- ### **高级配置** 10. **`animation`** - 类型:`google.maps.Animation` - 作用:标记的动画效果 - 可选值: - `google.maps.Animation.BOUNCE`(弹跳) - `google.maps.Animation.DROP`(下落动画) - 示例: ```javascript { animation: google.maps.Animation.BOUNCE } ``` 11. **`zIndex`** - 类型:`number` - 作用:层叠顺序(数值越大显示越靠前) 12. **`visible`** - 类型:`boolean` - 作用:初始可见性(默认`true`) --- ### **完整示例** ```javascript const marker = new google.maps.Marker({ position: { lat: 40.7128, lng: -74.0060 }, map: mapInstance, title: "纽约市", icon: "https://maps.google.com/mapfiles/ms/icons/red-dot.png", animation: google.maps.Animation.DROP, draggable: true }); ``` --- **注意事项**: - 至少需要设置 `position` 参数才能创建有效标记 - 通过 `marker.setOptions({ ... })` 可动态修改参数 - 完整文档参考:[Google Maps Marker Documentation](https://developers.google.com/maps/documentation/javascript/reference/marker)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值