google v3地图2种方法

最新推荐文章于 2024-09-10 08:26:51 发布

brown_zyn

最新推荐文章于 2024-09-10 08:26:51 发布

阅读量222

点赞数

分类专栏： php 文章标签： php

本文链接：https://blog.csdn.net/zyn_zyn_zyn/article/details/84620839

版权

php 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

环境说明：

google map api 2014

方法一：

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

2.页面代码如下：

<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 οnlοad="initialize()" οnunlοad="GUnload()">
    <form action="#" οnsubmit="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', 'xxxxxxx');
?>
 <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 οnlοad="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" οnclick="searchAddress();" value="搜索" />
	</div>
</html>

效果图：

方法二地图效果

google map v3方法：

更进效果，自定义标签，并在标签里添加样式文字等。

<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>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></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;
var flightPath;  //线
var j=1;
var marker_index = 102;

//标签点坐标与内容
var arrs_markers = [{lanlng:new google.maps.LatLng(39.973436758888674, 116.26762390136719), text:'aaaa'},
                {lanlng:new google.maps.LatLng(39.91789953067524, 116.3980865478515), text:'bbbb'},
                {lanlng:new google.maps.LatLng(39.87496550191461, 116.29680633544922), text:'cccc'},
                {lanlng:new google.maps.LatLng(39.884977066231485, 116.4986801147461), text:'gggg'}]; 

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);
	});
	var markers_lanlng = [];
    for( var i=0; i<arrs_markers.length; i++ ){
    	addMarker(arrs_markers[i].lanlng, arrs_markers[i].text);
    	markers_lanlng.push(arrs_markers[i].lanlng);
    }
    drawflightPath(markers_lanlng);
}
 
function addMarker(location, txt) {
	for(i in markers){
		markers[i].setMap(null);
	}
	marker = new MyMarker(map,{latlng:location, index: j, labelText:txt, labelClass:'map_marks'}); 
	
	if( flightPath ){
		var path = flightPath.getPath();
		path.push(location);
	}
	var center = location;// marker.getPosition();
	//markers.push(marker);
	document.getElementById('j').innerHTML=center;
	j++;
}

//添加线
function drawflightPath(marker_points){
	flightPath = new google.maps.Polyline({
        path: marker_points,
        strokeColor: "#0065bb",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });	
	flightPath.setMap(map);
}

function getLocation(){
	document.getElementById('j').innerHTML=event.latLng;
}

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);
		}
	});
}

/***************自定义叠加层，可作为站点显示在地图上******************/
    function MyMarker(map, options) {   
      // Now initialize all properties.   
      this.latlng = options.latlng; //设置图标的位置
      //this.image_ = options.image;  //设置图标的图片
      this.labelText = options.labelText || '标记';
      this.labelClass = options.labelClass || 'shadow';//设置文字的样式
      this.clickFun = options.clickFun ;//注册点击事件
      this.index = options.index;
  //    this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);
      this.map_ = map;    

      this.div_ = null;   
      // Explicitly call setMap() on this overlay   
      google.maps.event.addListener(this, 'dragend', function(event) {    //监听点击事件
				document.getElementById('j').innerHTML=event.latLng;
			});
      this.setMap(map); 
    } 
    MyMarker.prototype = new google.maps.OverlayView();
    //初始化图标
    MyMarker.prototype.onAdd = function() {    
		//初始化文字标签
		var label = document.createElement('div');//创建文字标签
			label.className = this.labelClass;
			label.id = 'mark_'+this.index;
			label.style.zIndex = 102;
			label.style.cursor = "hand";
			label.style.position = 'absolute';
			label.innerHTML = '<span class="map_num">'+this.index+'</span>'+
							  '<div class="map_mark_inner">'+
							  	  '<div class="map_mark_price">'+
							  		  '<span class="b">'+this.labelText+'</span>'+
							  	  '</div>'+
							  '</div>';
		this.div_ = label;
		var panes = this.getPanes();  
		panes.floatShadow.appendChild(label); 
	  }
      //绘制图标，主要用于控制图标的位置
    MyMarker.prototype.draw = function() {    
		  var overlayProjection = this.getProjection();   
		  var position = overlayProjection.fromLatLngToDivPixel(this.latlng);   //将地理坐标转换成屏幕坐标
		  var div = this.div_;  
		  div.style.left =position.x-16 + 'px';  
		  div.style.top  =position.y-41 + 'px'; 
	}
    
	$(document).ready(function(){
           $(document).on('mouseover', '.map_marks', function(){
			if( !$(this).hasClass('map_mark_hover') ){
				$(this).addClass('map_mark_hover');
			}
			$(this).css('z-index', parseInt($(this).css('z-index'))+2);
           });
           $(document).on('mouseout', '.map_marks', function(){
			if( $(this).hasClass('map_mark_hover') ){
				$(this).removeClass('map_mark_hover');
			}
			$(this).css('z-index', marker_index);
           });
     });

</script>
</head>

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

效果图：