房产地图google map的初步应用点滴.1)
房产地图google map的初步应用点滴.2)
房产地图google map的初步应用点滴.3)
google Map的交互基本都是事件驱动的，这表示js是通过生成时间来响应交互的，并且处于监听我们设定的事件，每个 Google Maps API 对象都可导出大量已命名的事件。如果程序想要实现某些事件，则会为这些事件注册 Javascript 事件侦听器，并会在通过在 google.maps.event 命名空间中注册 addListener() 事件处理程序接收这些事件时执行相应的代码。
初步的事件响应
google map中的所有对象都可以对用户事件监听并作出响应，用户的事件可以包括鼠标或键盘，对象可以监听以下这几种事件：
'click'，'dblclick'，'mouseup'，'mousedown'，'mouseover'，'mouseout'
这些事件看上去很像标准的DOM事件，但这些时间可以在不同的浏览器实现不同的DOM事件模型。
在实现例子之前看看最常用的addListener() 官方api文档：
addListener(instance:Object, eventName:string, handler:Function)
将指定侦听器函数添加到指定对象实例的指定事件名称。传回该侦听器的标识符，该标识符能够与 eventRemoveListener() 配合使用。
简单来说，这个方法有三个参数，包括了一个监听时间的对象，一个等待监听的时间，一个在指定事件发生时调用的函数。
马上来看一个最最简单的例子，用户用鼠标在地图上点击，系统弹出用户点击地图位置的经纬度，够简单吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css">
</style>
<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;
var lat = 23.1257424;
var lng = 113.37404225;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat,lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event) {
alert("你选择的经度是："+event.latLng.lat()+" 纬度是："+event.latLng.lat());
});
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>
效果
也可以直接访问http://216.24.193.245/eg_map/033001.html，如果没有删掉的话
重点集中在
google.maps.event.addListener(map, 'click', function(event) {
alert("你选择的经度是："+event.latLng.lat()+" 纬度是："+event.latLng.lat());
});
我们选择监听的对象是map，等待监听的事件是'click'，当监听对象符合了监听事件后就触发了function
将触发事件获取的参数作为传递的对象
在上面的例子上，我们通过事件的触发获取了event对象，并将event.latLng对象直接显示出来，再看看下面的例子，我们可以访问事件监听器的事件参数，也是一个非常简单的例子，当用户鼠标点击地图时，直接在点击的经纬度处实现一个小图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css">
</style>
<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;
var lat = 23.1257424;
var lng = 113.37404225;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat,lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event) {
showMarker(event.latLng);
});
}
function showMarker(location) {
&nb