google map api 谷歌地图上添加消息窗口InfoWindow

最新推荐文章于 2019-09-17 15:45:00 发布

ocaicai

最新推荐文章于 2019-09-17 15:45:00 发布

阅读量666

点赞数

分类专栏： JavaScript、css.、JQuery 文章标签： google map message

本文链接：https://blog.csdn.net/ocaicai/article/details/84050916

版权

JavaScript、css.、JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用的时候特别简单，也非常方便；这让我感觉到编程的未来应该更多的倾向于配置，让我们从更复杂的逻辑中解放出来更多的关注于业务！

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]

.

ocaicai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google map api 谷歌地图上添加消息窗口InfoWindow

使用的时候特别简单，也非常方便；这让我感觉到编程的未来应该更多的倾向于配置，让我们从更复杂的逻辑中解放出来更多的关注于业务！1.代码[code="html"]Google 地图 JavaScript API 示例: 简单的地图 function initialize() { var mylatlng = new google.maps....
复制链接

扫一扫

专栏目录