GoogleMapAPIV3资源-CSDN文库

共32个文件

js：20个

png：6个

html：3个

3星 · 超过75%的资源需积分: 31 195 浏览量 2015-01-28 16:47:09 上传评论收藏 155KB RAR 举报

**Google Maps API V3**是谷歌提供的一款强大的地图集成工具，允许开发者在自己的网页或应用中嵌入交互式地图功能。这个API是基于JavaScript构建的，因此它可以在任何支持JavaScript的浏览器上运行，包括移动设备上的浏览器。V3版本是对之前版本的升级，优化了性能，减少了对网络带宽的需求，并提供了更多的自定义选项。 ### 1. **API引入与初始化** 在网页中使用Google Maps API V3，首先需要在HTML中引入API的JavaScript库。这通常通过在`<head>`标签内添加一个链接到谷歌地图API的CDN来完成。API加载完成后，可以创建一个新的地图实例，并设置其中心点、缩放级别等属性。 ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ``` 这里的`YOUR_API_KEY`需要替换为你从谷歌开发者控制台获取的API密钥。 ### 2. **地图对象与视图** 地图对象是Google Maps API的核心，通过`new google.maps.Map()`创建。在创建时，需要指定地图容器（通常是DOM元素）和初始配置选项，如中心点坐标和缩放级别。 ```javascript var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); ``` ### 3. **标记（Markers）与信息窗口（InfoWindows）** 标记用于表示地图上的特定位置，可以通过`new google.maps.Marker()`创建。信息窗口则可以显示与标记关联的详细信息，通过`google.maps.InfoWindow`类实现。 ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' }); var infowindow = new google.maps.InfoWindow({ content: 'Hello World!' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` ### 4. **路径（Polylines）与多边形（Polygons）** 路径和多边形用于绘制线性形状和闭合区域。`google.maps.Polyline`用于绘制直线，而`google.maps.Polygon`用于绘制多边形。 ```javascript var path = [ {lat: -34.397, lng: 150.644}, {lat: -33.924844, lng: 151.259054} ]; var polyline = new google.maps.Polyline({ path: path, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2, map: map }); ``` ### 5. **图层与覆盖物（Overlays）** Google Maps API V3支持各种图层，如卫星图、地形图和交通图。覆盖物包括自定义图片、形状等，可用来增强地图的视觉效果。 ```javascript map.overlayMapTypes.insertAt(0, new google.maps.StyledMapType(style, {name: 'Styled Map'})); ``` ### 6. **事件监听与响应** Google Maps API提供了丰富的事件处理机制，如点击、拖动等。开发者可以绑定事件监听器来响应用户操作。 ```javascript google.maps.event.addListener(map, 'zoom_changed', function() { console.log('Zoom level changed to: ' + map.getZoom()); }); ``` ### 7. **地理编码与反向地理编码** API还包括地理编码服务，可以将地址转换为坐标，以及反向地理编码，将坐标转换回地址。 ```javascript var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: '某地址'}, function(results, status) { if (status === 'OK') { map.setCenter(results[0].geometry.location); } else { alert('Geocode was not successful for the following reason: ' + status); } }); ``` ### 8. **地图类型与样式** 开发者可以自定义地图的样式，通过`StyledMapType`创建个性化地图。 ```javascript var style = [ {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, // ...其他样式规则 ]; var styledMap = new google.maps.StyledMapType(style, {name: 'Styled Map'}); map.mapTypes.set('styled_map', styledMap); map.setMapTypeId('styled_map'); ``` ### 9. **服务与实用工具** 除了基本的地图功能，API还提供多种服务，如距离矩阵、Elevation（海拔）服务、Directions（路线规划）服务等，以及各种工具类，如地理坐标转换、坐标系统转换等。 ### 10. **最佳实践与性能优化** 使用Google Maps API时，应注意API调用次数、地图更新频率、内存管理等，以确保良好的用户体验。例如，使用懒加载策略加载标记和信息窗口，避免一次性加载大量数据。以上就是Google Maps API V3的一些关键知识点，涵盖了地图的创建、标记、路径、事件处理等方面。通过这些功能，开发者可以构建出丰富、交互性强的地图应用。

资源推荐

资源详情

资源评论

收起资源包目录

GoogleMapAPIV3.rar （32个子文件）

GoogleMapAPIV3

mapfiles

mapcontrols3d6.png 2KB

iw3.png 10KB

closedhand_8_8.cur 326B

iw_close.gif 76B

szc3d.png 632B

rotate.png 3KB

google_white.png 6KB

api-3

onion.js 19KB

stats.js 3KB

maxzoom.js 467B

overlay.js 1KB

main.js 48KB

map.js 26KB

geometry.js 3KB

kml.js 10KB

geocoder.js 2KB

controls.js 50KB

infowindow.js 7KB

layers.js 503B

style.js 2KB

places_impl.js 28KB

util.js 15KB

usage.js 2KB

marker.js 18KB

common.js 30KB

poly.js 18KB

openhand_8_8.cur 326B

mod_cb_scout

cb_scout_sprite_api_002.png 24KB

Example_GoogleMapAPI.html 3KB

map-simple-google.html 983B

map-simple.html 881B

mapapi.js 4KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Google Maps JavaScript API v3 Example: Image MapTypes</title> <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="mapapi.js"></script> <script> function tlen(len, mystr){ mystr = String(mystr); var num = len - mystr.length; for (var i = 0; i <= num; i++) { mystr = "0" + mystr; } return mystr; }; function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); var ymax = 1 << zoom; var y = coord.y; y = tlen(5,y); var x = tlen(5,coord.x); zoom = tlen(1,zoom+1); div.innerHTML = y + "," + x + "," + zoom; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.fontSize = '10'; div.style.borderStyle = 'solid'; div.style.borderWidth = '1px'; div.style.borderColor = '#AAAAAA'; return div; }; function LocalMapType() {} LocalMapType.prototype.tileSize = new google.maps.Size(256, 256); LocalMapType.prototype.maxZoom = 20; LocalMapType.prototype.minZoom = 0; LocalMapType.prototype.name = "本地"; LocalMapType.prototype.alt = "显示本地地图"; LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var img = ownerDocument.createElement("img"); img.style.width = this.tileSize.width + "px"; img.style.height = this.tileSize.height + "px"; var ymax = 1 << zoom; var y = coord.y; y = tlen(5,y); var x = tlen(5,coord.x); zoom = tlen(1,zoom+1); var strURL = "..\\data\\L" + zoom + "\\" + y + "-" + x + ".png"; img.src = strURL; return img; }; var localMapType = new LocalMapType(); function initialize() { var myLatlng = new google.maps.LatLng(30, 103); var myOptions = { center: myLatlng, zoom: 4, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map.setMapTypeId('satellite'); //map.MapTypes.insertAt(0, moonMapType); map.mapTypes.set('local', localMapType); map.setMapTypeId('local'); map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256))); } </script> </head> <body onLoad="initialize()"> <div id="map_canvas" style="width: 640px; height: 480px;"></div> </body> </html>

评论收藏

内容反馈