JavaScript操作Google地图经典案例资源-CSDN文库

共2个文件

png：1个

html：1个

4星 · 超过85%的资源需积分: 9 79 浏览量 2012-03-02 09:15:40 上传评论收藏 4KB ZIP 举报

JavaScript操作Google地图是一种常见的Web开发技术，用于在网页上创建交互式地图。在这个经典案例中，我们将探讨如何利用JavaScript API实现地图的画图、连线、标记以及自定义标记功能。 Google Maps JavaScript API是Google提供的一套强大的工具，允许开发者在网页中嵌入地图并进行各种定制。要使用它，你需要在HTML文件中引入API的JavaScript库，并设置一个初始化地图的函数，通常在`<script>`标签中进行。 ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ``` 请确保替换`YOUR_API_KEY`为你的Google Maps API密钥，这是你从Google Cloud Console获取的。 **画图** 在Google Maps中，你可以使用`google.maps.Polyline`对象来绘制线条，以及`google.maps.Polygon`对象来绘制多边形。创建这些对象需要定义路径（一系列坐标点），然后将其添加到地图上。 ```javascript var path = [ {lat: -37.8140, lng: 144.9631}, {lat: -37.8121, lng: 144.9645} ]; var polyline = new google.maps.Polyline({ path: path, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2 }); polyline.setMap(map); ``` **连线** 连线本质上就是画一条或多条线段连接地图上的点。这可以通过创建`Polyline`对象并不断向其`path`属性添加坐标点来实现。 **标记** 在地图上放置标记通常使用`google.maps.Marker`对象。你可以自定义标记的图标、位置和信息窗口。 ```javascript var marker = new google.maps.Marker({ position: {lat: -37.8132, lng: 144.9637}, map: map, title: 'Hello World!' }); ``` **自定义标记** 如果需要使用自定义的图标作为标记，你可以通过`icon`属性指定一个图片URL。 ```javascript var marker = new google.maps.Marker({ position: {lat: -37.8132, lng: 144.9637}, map: map, icon: 'http://example.com/my-custom-icon.png' }); ``` 在`MapDemo`这个压缩包文件中，可能包含了实现以上功能的示例代码。通过学习和理解这些代码，你可以掌握在JavaScript中如何与Google Maps API交互，从而在网页上创建各种互动地图应用。记得实际操作时，确保API密钥的有效性，并遵循Google Maps API的使用条款和限制。总结来说，JavaScript操作Google地图涉及了加载API、创建地图实例、绘制线条和多边形、放置标记以及自定义标记样式等多个步骤。通过实践和理解这些知识点，开发者可以创建出丰富的地图应用，如路线规划、地理标注、地图绘图等。

资源推荐

资源详情

资源评论

收起资源包目录

MapDemo.zip （2个子文件）

MapDemo

images

gq.PNG 719B

test.html 6KB

<!DOCTYPE html> <html DIR="LTR"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var poly; var map; var ploy; var geocoder; var cd=new Array(); var infowindow = new google.maps.InfoWindow();//初始化信息框对象 function initialize() { //创建地址解析器 geocoder = new google.maps.Geocoder(); //初始化坐标 var myLatlng = new google.maps.LatLng(34.2666666666667,108.5); //初始化Options对象 var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } //初始化地图 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 } //DrawLine();//定点划线 //地图单击事件 google.maps.event.addListener(map, 'click', function(event) { //创一个新的标记 NewMarker(event.latLng); var vhcCode1 = new LableMarker(map,"陕A"+Math.round(Math.random() *100000)+1,event.latLng); //当标记大于三个时自动画多边形区域 if(cd!=null && cd!=undefined && cd.length>=3){ //创建画图对象 ploy=new google.maps.Polygon({ paths:cd, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor:"#FF0000", fillOpacity: 0.35 }); //设置地图 ploy.setMap(map); } }); //创建划线对象 poly = new google.maps.Polyline(polyOptions); //设置地图 poly.setMap(map); } function LableMarker(map, text, latLng){ this.map_ = map; this.text_ = '<div class="iconTheStyle" style="background:#F9F900; font-size:14px; color:#000000; font-weight:bold; white-space:nowrap; border:1px solid #666666;">'+text+'</div>'; this.latLng_ = latLng; this.div_ = null; this.setMap(map); } // 继承自 google.maps.OverlayView LableMarker.prototype = new google.maps.OverlayView(); // 当准备将悬浮层添加到地图上时调用 LableMarker.prototype.onAdd = function(){ var div = document.createElement('DIV'); div.style.border = 'none'; div.style.position='absolute'; div.innerHTML = this.text_; this.div_ = div; var panes = this.getPanes(); panes.overlayLayer.appendChild(div); }; // 当第一次在地图上显示时调用 LableMarker.prototype.draw = function(){ var overlayProjection = this.getProjection(); var latLng = overlayProjection.fromLatLngToDivPixel(this.latLng_); // 设置层的大小和位置 var div = this.div_; var size = new google.maps.Size(10, -25); // 修正坐标的值; div.style.left = (latLng.x + size.width) + 'px'; div.style.top = (latLng.y + size.height) + 'px'; }; // 当设置悬浮层的 setMap(null) 会自动调用 LableMarker.prototype.onRemove = function(){ this.div_.parentNode.removeChild(this.div_); this.div_ = null; }; //创建一个新的标记 function NewMarker(location) { //创建Image var image = 'images//gq.png'; //获得路径 var path = poly.getPath(); //添加坐标 path.push(location); //往数组添加坐标 cd.push(location); //创建坐标对象 var clickedLocation = new google.maps.LatLng(location); //创建标记对象 var marker = new google.maps.Marker({ position: location, map:map, draggable:true, animation: google.maps.Animation.BOUNCE, title: 'Hello World!!!' + path.getLength(), icon: image }); //标记鼠标移入事件 google.maps.event.addListener(marker,'mouseover',function(event){ //创建信息弹框 //var infowindow = new google.maps.InfoWindow({ //content: "欢迎" //}); codeLatLng(event.latLng,marker); //打车牌号码 //var vhcCode1 = new LableMarker(map,"陕A"+Math.round(Math.random() *100000)+1,event.latLng); //打开信息弹框 //infowindow.open(map,marker); }); //标记鼠标移出事件 google.maps.event.addListener(marker,'mouseover',function(){ infowindow.close(); }); //标记鼠标移入事件 google.maps.event.addListener(marker,'click',function(event){ //创建信息弹框 //var infowindow = new google.maps.InfoWindow({ //content: "欢迎" //}); codeLatLng(event.latLng,marker); //打开信息弹框 //infowindow.open(map,marker); }); //初始化坐标位置 map.setCenter(location); } //定点坐标划线 function DrawLine(){ //画线 var line = [ new google.maps.LatLng(34.96571,106.39885), new google.maps.LatLng(40.96571,105.39885) ]; var flightPath = new google.maps.Polyline({ path: line, strokeColor: "blue", strokeOpacity: 1.0, strokeWeight: 5 }); flightPath.setMap(map); } //反向解析 function codeLatLng(location,marker) { geocoder.geocode({'latLng': location}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { infowindow.setContent("当前地址:"+results[1].formatted_address); infowindow.open(map, marker); } else { alert("没有找到可解析对象"); } } else { alert("无法解析对象: " + status); } }); } </script> </head> <body onLoad="initialize()"> <div id="map_canvas"></div> </body> </html>

评论收藏

内容反馈