google v3地图2种方法_PHP

您所在的位置：程序员俱乐部 > 编程开发 > PHP > google v3地图2种方法

google v3地图2种方法

2014/7/31 17:15:51 zyn_zyn 程序员俱乐部我要评论(0)

摘要：环境说明：googlemapapi2014方法一：1.到google上申请一个账号，再获取key2.页面代码如下：<html><head><scriptsrc="http://ditu.google.cn/maps?file=api&hl=zh-CN&v=2.s&key=key"type="text/javascript"></script><scripttype="text/javascript">
标签：方法 Google

环境说明：

google map api 2014

方法一：

1.到google上申请一个账号，再获取key

2.页面代码如下：

class="java"><html>
<head> 
<script src="http://ditu.google.cn/maps?file=api&hl=zh-CN&v=2.s&key=key" type="text/javascript"></script>
<script type="text/javascript">
	        var map = null;
	        var geocoder = null;
	        //默认为北京价格
	        var option = {
	    	    
	        	MapLng: 39.917, 
	        	MapLat: 116.397,
	        	img: 'images/icon.png',   //选中点的图标
	    	};
            
	        function initialize() {
		        
		          if (GBrowserIsCompatible()) {
			        var point = new GLatLng(option.MapLng, option.MapLat);
			        
			        var icon = new GIcon();
			        icon.image = option.img;
			        
		            map = new GMap2(document.getElementById("map_canvas"));
		            map.setCenter(point, 13);
		            
					var marker = new GMarker(point, icon);
					map.addOverlay(marker);
					
		            geocoder = new GClientGeocoder();
		          }
	        }
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="北京市海淀区" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map_canvas" style="width: 800px; height: 500px"></div>
    </form>
</body>
</html>

方法二：

1.鼠标点击，添加marker

2.可移动marker ?获取坐标

3.通过输入内容搜索坐标

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#my_canvas{height:400px;width:800px;}
</style>
<?php 
define('MAPTYPE_GOOGLE_API_KEY', 'AIzaSyAgFQo6xBoIbPgscLHDj7Qq7L7KCYAAXZ4');
?>
 <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&hl=zh-CN"></script>
<!--<script type="text/javascript" src="http://ditu.google.cn/maps?file=api&hl=zh-CN&v=2.s&key=<?php echo MAPTYPE_GOOGLE_API_KEY;?>" ></script> -->
<script type="text/javascript">
var option = {                //中心点坐标
	MapLng: 39.917, 
    MapLat: 116.397,
    zoom: 9,                 //加载放大多少
    szoom: 13  			//搜索放大多少
};
var map;
var lanlngs = new google.maps.LatLng(option.MapLng, option.MapLat);
var info;
var markers=[];
var geocoder = new google.maps.Geocoder();  //搜索用
var marker;

function initialize(){
	var mapOption = {
		zoom: option.zoom,
		center: lanlngs,
		//mapTypeId: google.maps.MapTypeId.ROADMAP,
		title: "选为地址"
	}
	map = new google.maps.Map(document.getElementById('map'),mapOption);
	google.maps.event.addListener(map, 'click', function(event) {    //监听点击事件
		addMarker(event.latLng);
		document.getElementById('j').innerHTML=info;
	});
	addMarker(lanlngs);
}
 
function addMarker(location) {
	for(i in markers){
		markers[i].setMap(null);
	}
	marker = new google.maps.Marker({
		position: location,
		map: map,
		draggable:true,
		icon: 'images/icon1.png'   
	});
	google.maps.event.addListener(marker, 'dragend', function(event) {    //监听点击事件
		document.getElementById('j').innerHTML=event.latLng;
	});
	var center = marker.getPosition();
	markers.push(marker);
	info = marker.getPosition();
}

//搜索地址方法
function searchAddress(  ){
	var address = document.getElementById('address').value;
	geocoder.geocode( {
		'address': address //"格式可以是不分割的：北京市东城区东直门，或北京市,东城区,东直门"
	}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			lanlngs = results[0].geometry.location;
			option.zoom = option.szoom;
			initialize();   //搜索后再次加载地图，重新定位
			addMarker(lanlngs);
			//results数组里有很多有用的信息，包括坐标和返回的标准位置信息
		} else {
			alert(interGeoAnalysisFailed);
		}
	});
}


</script>
</head>

<body onload="initialize();">
	<div id="map" style="width: 600px; height: 400px;"></div>
	<div style=""> 
	<div id="conteng">你选择的经纬度为：<span id="j"></span></div>
	<input type="text" name="address" id="address" />
<input type="button" onclick="searchAddress();" value="搜索" />
	</div>
</html>

效果图：

方法二地图效果