使用的时候特别简单,也非常方便;这让我感觉到编程的未来应该更多的倾向于配置,让我们从更复杂的逻辑中解放出来更多的关注于业务!
1.代码
2.效果图
[img]http://dl.iteye.com/upload/picture/pic/101026/82d15865-701c-348b-a461-dfc387febc47.png[/img]
3.更多的参数配置:
[url=http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions[/url]
[url=http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps]http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps[/url]
.
1.代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Google 地图 JavaScript API 示例: 简单的地图</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">
function initialize() {
var mylatlng = new google.maps.LatLng(30.633186, 104.055394);
var mapOptions = {
zoom : 16, //缩放级别
center : mylatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP, //ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图
scaleControl : true, //比例尺
mapTypeControl : true,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var mark = new google.maps.Marker( {
position : mylatlng,
map : map,
title : "宝贝QR码就在这里啦!"
});
var message = new google.maps.InfoWindow( {
content : "<a href='http://www.baidu.com'><img title='宝贝' height='100px' width='100px' src='http://www.52shehua.com/images/upload/Image/132.jpg'/></a>快来拿宝贝吧!",
size : new google.maps.Size(100, 100)
});
google.maps.event.addListener(mark, 'mouseover', function() {
message.open(map, mark);
});
google.maps.event.addListener(mark, 'mouseout', function() {
message.close(map, mark);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>
2.效果图
[img]http://dl.iteye.com/upload/picture/pic/101026/82d15865-701c-348b-a461-dfc387febc47.png[/img]
3.更多的参数配置:
[url=http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions[/url]
[url=http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps]http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps[/url]
.