google map v3 地图的基本使用教程

最新推荐文章于 2020-08-04 12:05:10 发布

daichangfu

最新推荐文章于 2020-08-04 12:05:10 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/daichangfu/article/details/84173838

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google map v3</title>
<script type="text/javascript" 
	src="https://maps.google.com/maps/api/js?sensor=false&language=zh"></script>
<script type="text/javascript">
<!--
	var map;
	/*
		latitude 纬度 
		longitude 精度 
		title 悬浮在标记图标上显示的内容
		openInfo 提示窗口内容(InfoWindow)
	*/
	function initialize(latitude,longitude,title,openInfo) {

		//地图定位
		var myLatlng = new google.maps.LatLng(latitude,longitude);
		var myOptions = {
				zoom : 11,			//地图的缩放程度
				center : myLatlng,	//地图中心位置
				mapTypeId : google.maps.MapTypeId.ROADMAP
			};

		//把地图绑定在ID为map_canvas的DIV上
		map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

		//显示地址的标记图标
		var marker = new google.maps.Marker({
	        position: myLatlng, 
	        map: map, 
	        title:title
	      //  icon: 'http://google-maps-icons.googlecode.com/files/factory.png'   //自定义标记图标
	    });

		var infowindow = new google.maps.InfoWindow({ 			//InfoWindow 内容提示
			content: openInfo,
			position: myLatlng
		});	

		infowindow.open(map);	//显示提示主窗口

		//给marker添加点击事件
	    google.maps.event.addListener(marker, 'click', function() {
	    	infowindow.open(map); //如果提示窗口关闭了，点击标记图标可再次显示提示主窗口
		});	
	}

//-->
</script>
</head>
<body onload="initialize('39.87815','116.446686','北京乐平劲松汽车维修有限公司','北京乐平劲松汽车维修有限公司<br/>北京市朝阳区潘家园26楼<br/>010-87716802')">
	<div id="map_canvas" style="width: 600px; height: 500px;"></div>
</body>
</html>