`

google v3地图2种方法

    博客分类:
  • php
php 
阅读更多

环境说明:

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 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', '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 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>

 

效果图:

 方法二地图效果

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 onload="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" onclick="searchAddress();" value="搜索" />
	</div>
</html>
 效果图:
  • 大小: 290.9 KB
  • 大小: 465.9 KB
分享到:
评论

相关推荐

    google地图V3离线版.zip

    可用于学习谷歌地图V3开发、或改造原谷歌V3项目(在线改离线)。 注:如vs下运行出错,就使用32位的sqlite运行库(bin目录下,手动改文件名) 再注:21年元旦起,谷歌服务器已全面被禁止访问,瓦片下载只能使用第三方工具

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、路线规划、地标显示等功能。本文档旨在为开发者...

    谷歌地图v3案例

    ### 谷歌地图v3案例详解 #### 一、背景介绍 谷歌地图API是开发者常用的工具之一,它为网站提供了强大的地图功能。随着技术的发展,谷歌地图API也经历了多个版本的迭代。其中,v2版本曾广泛使用,但随着时间推移,...

    Google map 谷歌地图 Google地图 V3 第三版

    **谷歌地图API V3详解** 谷歌地图API(Google Maps API)是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新,旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将...

    google map v3,V3地图搜素,V3地图标注

    在本文中,我们将深入探讨Google Maps API的第三版(V3),主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库,用于在网页上嵌入交互式地图,进行地理位置...

    google map v3离线地图资源包

    这个“google map v3离线地图资源包”显然提供了一种方法,使得用户能够在没有互联网连接的情况下使用Google Maps的功能,这对于那些在偏远地区或网络不稳定环境下的应用尤其有价值。下面将详细讨论与这个资源包相关...

    谷歌MAP_V3中文详解以及一个简单例子

    谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

    Google Maps API V3 中文参考文档(JavaScript)

    叠加层和地图类型是 Google Maps API V3 中的一种重要组件,用于在地图上叠加其他数据层。开发者可以使用 OverlayView 对象来配置叠加层的基本属性,如透明度、可见性等。MapType 对象提供了多种地图类型,如普通...

    Google_Maps_API_V3.rar_Google Maps api v3_谷歌地图

    4. **路径规划(Directions Service)**:API提供了一种方法来计算两个或多点之间的最佳路线,包括驾车、步行和公共交通等模式。 5. **地理编码(Geocoding)**:将地址转换为经纬度坐标,反之亦然,这对于搜索和...

    谷歌地图V3_Demo

    对谷歌地图的应用开发,摸索了一个多月。编写了一个GoogleMaps ApiV3 Demo。内容包含了谷歌地图的基本功能,包括:收索地点、标注、填写标注信息、响应地图(点击、双击、经过)事件。一个比较复杂的难点是:点击...

    Google Map V3 API

    **Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口,它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更...

    googleMap V3 中文API

    谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...

    谷歌地图V3离线实例

    谷歌地图V3离线实例是基于谷歌地图API V3版本的一个功能展示,它允许开发者在没有网络连接的情况下依然可以使用地图服务。这个实例演示了如何结合离线地图数据和谷歌地图API来创建一个本地化的地图体验。下面我们将...

    google离线地图API包 + 地图数据

    3. **API集成**:熟悉Google Map API V3的文档,知道如何调用API方法来初始化地图、添加标记、绘制路径等。 4. **性能优化**:因为离线地图需要加载大量数据,所以需要考虑如何分块加载数据、缓存策略以及优化渲染...

    谷歌 地图API V3 for ASP.NET源码20130125

    谷歌地图提供了一种灵活的方式整合提供方向,位置信息,以及任何其它类型的东西在您的Web应用程序的谷歌地图API提供的地图。虽然有一些文章在CP解释地图, 在我的文章中,我将提供最新的谷歌地图API V3版本的信息。...

    Google Maps API V3 (开发必备)

    Google Maps API V3 是一个强大的工具,允许开发者将交互式的谷歌地图嵌入到网页应用中。它提供了丰富的功能,包括自定义地图样式、添加标记、路线规划等。本篇文章主要聚焦于 `google.maps.Map` 类的核心特性和用法...

    谷歌地图API-google map api v3

    ### 谷歌地图API V3 - 详细知识点解析 #### 概述 谷歌地图API V3(Google Maps API V3)是谷歌提供的一套强大的工具和服务集合,旨在帮助开发者在网页上集成交互式地图。它支持多种功能,如自定义地图样式、添加...

    google map api v3源码

    谷歌地图API V3是Google提供的一种用于在网页上嵌入交互式地图的服务,它基于JavaScript编程语言,允许开发者创建各种地图应用。这个源码可能是谷歌地图API V3的一个示例项目,不含任何特定的API密钥,因此可以作为...

    google api v3 实例

    Google API V3,全称Google Maps JavaScript API V3,是Google提供的一套用于在网页上嵌入地图并进行交互操作的JavaScript库。这个API允许开发者通过JavaScript编程来控制Google地图的功能,实现地图显示、标记定位...

    unity地图插件onlinemaps v3 3.7.11

    • 大量的预定义图块源:Google地图,Mapbox,ArcGIS,诺基亚地图,必应地图,Open Street Maps和其他许多地图项(16个提供程序,88种地图类型); • 能够创建自己的地图样式或使用自己的图块源(例如,WMS); • ...

Global site tag (gtag.js) - Google Analytics