地图事件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Event Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
//GoogleMap事件分为2种
//用户界面事件
//Google Maps API 中的一些对象旨在对用户事件(例如鼠标事件或键盘事件)作出响应。google.maps.Marker 对象可以侦听以下用户事件,例如:
//'click','dblclick','mouseup','mousedown','mouseover','mouseout'
//MVC 状态更改
//MVC 对象通常都有相应的状态。只要更改了对象的属性,那么,API 就会触发已更改该属性的事件
//MVC 事件不在它们的事件中传递参数。您可能需要通过调用该对象上相应的 getProperty 方法,检查在 MVC 状态更改中更改的属性。
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, 1500);
});
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);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
分享到:
相关推荐
ibatis标签提示工具 sql-map-2.dtd
sql-map-config-2.dtd
google-map-clustering-example, google地图响应的集群示例 google-map-clustering-examplegoogle-map-react的群集示例点击这里查看。 Kotatsu我受到 kotatsu 项目的强烈启发。这里项目使用 kotatsu 作为运行引擎。...
Laravel开发-google-map-place-detail-laravel 使用谷歌地图API获取地点详情
google-map-react-examples, google地图响应组件的示例 google-map-react示例这个项目是同构的Flummox 怀旧应用程序带有 google-map-react控件示例。它还使用了非标准的方法来。其他文档。isomorphic.md安装我强烈...
小程序使用高德地图 map 导航路线规划 (amap-wx.js 从相关下载页面下载的 zip 文件 使用场景:uniapp和小程序使用高德地图(map)可以引用这个文件,getRegeo(获取当前地址),getDrivingRoute(驾车从开始位置到...
ibatis的dtd约束,版本2,xml文件中标签提示,网址:http://ibatis.apache.org/dtd/sql-map-2.dtd
Laravel开发-google-map-place-detail-laravel .zip
JDSU推出的集光功能测试为一体的多功能测试平台,MAP-200。用户可以直接将对应的MAP光开关模块,MAP光衰减器模块,MAP光功率计模
介绍Google Map Api的文档,其中对Google Map编程中使用的部分API接口进行了说明。
谷歌地图React React 项目的更简单的 Google 地图集成...npm install --save @googlemap-react/core 一个有效的 Google Map API 密钥(用于替换下面代码片段中的占位符) import { GoogleMapProvider , HeatMap ,
Laravel开发-google-static-map-laravel 使用谷歌地图生成静态地图
google-map-react是在少量编写的组件。 它允许您在Google Map上渲染任何React组件。 它是完全同构的,可以在服务器上渲染。 此外,即使未加载Google Maps API,它也可以在浏览器中呈现地图组件。 它使用内部可调整...
source-map-loader, 从模块中提取sourceMappingURL注释并将它的提供给 web service 加载器从现有源文件( 从他们的sourceMappingURL ) 中提取源映射。安装npm i -D source-map-loader用法文档:使用加载程序工具 web ...
.arch._amap-wx.js
介绍Google Map Api的文档,其中对Google Map编程中使用的部分API接口进行了说明。
vue2-googlemap:基于 Vue 2.x 和google地图组件
GO Map是一个动态地图SDK,用于使用unity 3D制作基于位置的游戏。高度可定制的经典Unity检查器界面GO Map是最简单的地图插件。选择各种各样的例子,以充分了解GO地图功能,并建立每一个演示场景在您的智能手机上只要...