环境说明:
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>效果图:
相关推荐
可用于学习谷歌地图V3开发、或改造原谷歌V3项目(在线改离线)。 注:如vs下运行出错,就使用32位的sqlite运行库(bin目录下,手动改文件名) 再注:21年元旦起,谷歌服务器已全面被禁止访问,瓦片下载只能使用第三方工具
谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、路线规划、地标显示等功能。本文档旨在为开发者...
### 谷歌地图v3案例详解 #### 一、背景介绍 谷歌地图API是开发者常用的工具之一,它为网站提供了强大的地图功能。随着技术的发展,谷歌地图API也经历了多个版本的迭代。其中,v2版本曾广泛使用,但随着时间推移,...
**谷歌地图API V3详解** 谷歌地图API(Google Maps API)是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新,旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将...
在本文中,我们将深入探讨Google Maps API的第三版(V3),主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库,用于在网页上嵌入交互式地图,进行地理位置...
这个“google map v3离线地图资源包”显然提供了一种方法,使得用户能够在没有互联网连接的情况下使用Google Maps的功能,这对于那些在偏远地区或网络不稳定环境下的应用尤其有价值。下面将详细讨论与这个资源包相关...
谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...
叠加层和地图类型是 Google Maps API V3 中的一种重要组件,用于在地图上叠加其他数据层。开发者可以使用 OverlayView 对象来配置叠加层的基本属性,如透明度、可见性等。MapType 对象提供了多种地图类型,如普通...
4. **路径规划(Directions Service)**:API提供了一种方法来计算两个或多点之间的最佳路线,包括驾车、步行和公共交通等模式。 5. **地理编码(Geocoding)**:将地址转换为经纬度坐标,反之亦然,这对于搜索和...
对谷歌地图的应用开发,摸索了一个多月。编写了一个GoogleMaps ApiV3 Demo。内容包含了谷歌地图的基本功能,包括:收索地点、标注、填写标注信息、响应地图(点击、双击、经过)事件。一个比较复杂的难点是:点击...
**Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口,它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更...
谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...
谷歌地图V3离线实例是基于谷歌地图API V3版本的一个功能展示,它允许开发者在没有网络连接的情况下依然可以使用地图服务。这个实例演示了如何结合离线地图数据和谷歌地图API来创建一个本地化的地图体验。下面我们将...
3. **API集成**:熟悉Google Map API V3的文档,知道如何调用API方法来初始化地图、添加标记、绘制路径等。 4. **性能优化**:因为离线地图需要加载大量数据,所以需要考虑如何分块加载数据、缓存策略以及优化渲染...
谷歌地图提供了一种灵活的方式整合提供方向,位置信息,以及任何其它类型的东西在您的Web应用程序的谷歌地图API提供的地图。虽然有一些文章在CP解释地图, 在我的文章中,我将提供最新的谷歌地图API V3版本的信息。...
Google Maps API V3 是一个强大的工具,允许开发者将交互式的谷歌地图嵌入到网页应用中。它提供了丰富的功能,包括自定义地图样式、添加标记、路线规划等。本篇文章主要聚焦于 `google.maps.Map` 类的核心特性和用法...
### 谷歌地图API V3 - 详细知识点解析 #### 概述 谷歌地图API V3(Google Maps API V3)是谷歌提供的一套强大的工具和服务集合,旨在帮助开发者在网页上集成交互式地图。它支持多种功能,如自定义地图样式、添加...
谷歌地图API V3是Google提供的一种用于在网页上嵌入交互式地图的服务,它基于JavaScript编程语言,允许开发者创建各种地图应用。这个源码可能是谷歌地图API V3的一个示例项目,不含任何特定的API密钥,因此可以作为...
Google API V3,全称Google Maps JavaScript API V3,是Google提供的一套用于在网页上嵌入地图并进行交互操作的JavaScript库。这个API允许开发者通过JavaScript编程来控制Google地图的功能,实现地图显示、标记定位...
• 大量的预定义图块源:Google地图,Mapbox,ArcGIS,诺基亚地图,必应地图,Open Street Maps和其他许多地图项(16个提供程序,88种地图类型); • 能够创建自己的地图样式或使用自己的图块源(例如,WMS); • ...