Google map api应用实例 2
2011-04-27 16:28
423 查看
本来是想将房产地图google map的应用记录一个系列，但继1)记录完之后总找不到时间继续记录下去，1)中主要解决了Google Maps JavaScript API V3 与 Google Local Search API两者由于版本问题带来的一系列麻烦，思路是使用一个iframe作为兼容的跳板，子页面应用Local Search API获得查询的result后返回给父页面，下面再记录一些地图坐标的定位和一些UI的组成。
效果可参考 http://xf.house.163.com/gz/map/00Xa.html
1.坐标定位
打开一个楼盘的地图，首先需要将此楼盘定位为此地图的中心点
<!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>
<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 init() {
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.addDomListener(window, 'load', init);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>
这里要注意的是我们引进了http://maps.google.com/maps/api/js?sensor=false，这是google MAP API V3版本的连接点
创建了一个div <div id="map-canvas" style="width: 600px; height: 500px"></div>作为地图的容器，然后对地图基本类Map进行创建
google.maps.Map 是google map的容器实现，在指定的 HTML 容器中创建新的地图，该容器通常是一个DIV元素
在初始化地图，还要创建一个地图的初始化变量，这些变量包括了上面的center，zoom，mapTypeId等等
google.maps.LatLng 是一个以纬度和经度表示的地理坐标点，在上面我们使用一个定义好的LatLng类确定了整个地图的中心点，其中lat 和 lng 分别为我们楼盘的经纬度值
zoom 为地图展开的级别
google.maps.MapTypeId.ROADMAP 是地图显示的类型，通常有ROADMAP，SATELLITE，TERRAIN等等，这里选择的ROADMAP类型是显示为普通的街道地图
2.为定位的楼盘添加图标
在上面完成了将楼盘显示到整个地图的中心处，下面为该楼盘添加图标，给楼盘坐标的位置添加图标，实际上也就是在地图上添加一个叠加层，在google MAP API中拥有大量的实现类，如Marker，为我们上面的程序加多个Marker实现，楼盘的图标就可以显示出来
<!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>
<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
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>
但是呢，这个图标并不是我们想要的，我们想要的是在此楼盘经纬度处放入自己的图片，设置是一段html的显示代码来组成自定义的叠加层，并且这个叠加层可以监听各种事件，可以对拖动地图的DOM元素中指定的地理位置像素坐标进行计算
<!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>
<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
});
new CustomMarker(map.getCenter(), map);
}
function CustomMarker(latlng,map) {
this.latlng_ = latlng;
this.setMap(map);
}
//扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.style.position = "absolute";
div.innerHTML = "<span><img src='http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/house.png'/></span>";
//这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(me, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
//获取Position
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 500px; height: 400px"></div>
</body>
</html>
实现效果如下
我们创建一个CustomMarker类，扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
这里需要详细说说OverlayView，我们继承了此类，方法是将叠加层的 prototype 设置为 new OverlayView.prototype。必须实现三个方法，即 onAdd()、draw() 和 onRemove()。在 add() 方法中，您应当创建 DOM 对象，并将其作为窗格的子对象附加。在 draw() 方法中，应放置这些元素。在 onRemove() 方法中，应将对象从 DOM 中删除。您必须调用包含有效地图对象的 setMap()，以触发对 onAdd() 方法和 setMap(null) 的调用，这样才能触发 onRemove() 方法。可以在构建叠加层时调用 setMap() 方法，也可以在需要重新显示已删除叠加层的任何时候调用该方法。每当地图属性更改时都会调用 draw() 方法，该方法可以更改元素的位置，如缩放、中心或地图类型。
把叠加层的绘图放在draw()方法中，我们再此方法中创建了一个DIV，并且使用innerHTML属性将要显示的html代码写回div中，并且如果需要对此属性加添加Listener事件时，则必须先使用trigger（me）先进行侦听，这样才能对外部的event事件进行反应，在构建完div后还需要获得panes窗口，panes包含渲染叠加层的 DOM 元素，作为显示此 OverlayView 的窗格，记住它是必须在draw 方法调用后才能实用。
onRemove() 实现此方法可将您的元素从 DOM 删除。调用 setMap(null) 之后立即调用此方法。
getProjection() 返回与相应 OverlayView 相关联的 MapCanvasProjection 对象。仅在调用 draw 函数后才可用
效果可参考 http://xf.house.163.com/gz/map/00Xa.html
1.坐标定位
打开一个楼盘的地图，首先需要将此楼盘定位为此地图的中心点
<!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>
<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 init() {
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.addDomListener(window, 'load', init);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>
这里要注意的是我们引进了http://maps.google.com/maps/api/js?sensor=false，这是google MAP API V3版本的连接点
创建了一个div <div id="map-canvas" style="width: 600px; height: 500px"></div>作为地图的容器，然后对地图基本类Map进行创建
google.maps.Map 是google map的容器实现，在指定的 HTML 容器中创建新的地图，该容器通常是一个DIV元素
在初始化地图，还要创建一个地图的初始化变量，这些变量包括了上面的center，zoom，mapTypeId等等
google.maps.LatLng 是一个以纬度和经度表示的地理坐标点，在上面我们使用一个定义好的LatLng类确定了整个地图的中心点，其中lat 和 lng 分别为我们楼盘的经纬度值
zoom 为地图展开的级别
google.maps.MapTypeId.ROADMAP 是地图显示的类型，通常有ROADMAP，SATELLITE，TERRAIN等等，这里选择的ROADMAP类型是显示为普通的街道地图
2.为定位的楼盘添加图标
在上面完成了将楼盘显示到整个地图的中心处，下面为该楼盘添加图标，给楼盘坐标的位置添加图标，实际上也就是在地图上添加一个叠加层，在google MAP API中拥有大量的实现类，如Marker，为我们上面的程序加多个Marker实现，楼盘的图标就可以显示出来
<!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>
<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
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>
但是呢，这个图标并不是我们想要的，我们想要的是在此楼盘经纬度处放入自己的图片，设置是一段html的显示代码来组成自定义的叠加层，并且这个叠加层可以监听各种事件，可以对拖动地图的DOM元素中指定的地理位置像素坐标进行计算
<!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>
<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
});
new CustomMarker(map.getCenter(), map);
}
function CustomMarker(latlng,map) {
this.latlng_ = latlng;
this.setMap(map);
}
//扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.style.position = "absolute";
div.innerHTML = "<span><img src='http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/house.png'/></span>";
//这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(me, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
//获取Position
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 500px; height: 400px"></div>
</body>
</html>
实现效果如下
我们创建一个CustomMarker类，扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
这里需要详细说说OverlayView，我们继承了此类，方法是将叠加层的 prototype 设置为 new OverlayView.prototype。必须实现三个方法，即 onAdd()、draw() 和 onRemove()。在 add() 方法中，您应当创建 DOM 对象，并将其作为窗格的子对象附加。在 draw() 方法中，应放置这些元素。在 onRemove() 方法中，应将对象从 DOM 中删除。您必须调用包含有效地图对象的 setMap()，以触发对 onAdd() 方法和 setMap(null) 的调用，这样才能触发 onRemove() 方法。可以在构建叠加层时调用 setMap() 方法，也可以在需要重新显示已删除叠加层的任何时候调用该方法。每当地图属性更改时都会调用 draw() 方法，该方法可以更改元素的位置，如缩放、中心或地图类型。
把叠加层的绘图放在draw()方法中，我们再此方法中创建了一个DIV，并且使用innerHTML属性将要显示的html代码写回div中，并且如果需要对此属性加添加Listener事件时，则必须先使用trigger（me）先进行侦听，这样才能对外部的event事件进行反应，在构建完div后还需要获得panes窗口，panes包含渲染叠加层的 DOM 元素，作为显示此 OverlayView 的窗格，记住它是必须在draw 方法调用后才能实用。
onRemove() 实现此方法可将您的元素从 DOM 删除。调用 setMap(null) 之后立即调用此方法。
getProjection() 返回与相应 OverlayView 相关联的 MapCanvasProjection 对象。仅在调用 draw 函数后才可用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Google map api应用实例 1
- google map api 3 学习应用笔记 （1）
- 使用Google Map Api在Android平台上开发地图应用3
- 使用Google Map Api在Android平台上开发地图应用4
- Mashup!Google Map API与饭否API的整合应用
- 使用Google Map Api在Android平台上开发地图应用1
- GoogMap的简单实现(GoogleMapApI简单应用)
- Google Map API应用例子源代码
- Android Google Map实例 - MD5 、Google Map API Key获取(Android mapview)
- 关于android应用正式发布时Google map api key的处理
- Mashup--Google Map API与饭否API的整合应用
- 关于一些Google Map API应用开发的资源收集整理
- Google Map API的简单应用
- Google Maps Api应用开发实例精选
- google map api 实例/google 地图 map 版权信息 / 自定义版权信息[作者：神龙之首]
- Google Map API应用：gVisit和MyGuestmap
- googleMap API及调用实例
- googleMap API及调用实例
- Android Google Map实例 - MD5 、Google Map API Key获取(Android mapview)
- 使用Google Map Api在Android平台上开发地图应用2