利用 Google API 调用谷歌地图 演示12
2010-08-06 20:39
232 查看
代码如下:
效果图如下:
![](http://pic002.cnblogs.com/img/%e8%87%aa%e7%94%b1%e7%9a%84%e7%94%9f%e6%b4%bb/201008/2010082621021390.jpg)
谢谢浏览!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>演示12</title> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { width:50%; height: 50%; margin: 50px auto; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 10, center: new google.maps.LatLng(22.95, 113.4), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); setMarkers(map, beaches); } /** * Data for the markers consisting of a name, a LatLng and a zIndex for * the order in which these markers should display on top of each * other. */ var beaches = [ ['番禺城市E', 22.95, 113.7, 4], ['番禺城市D', 22.95, 113.65, 5], ['番禺城市C', 22.95, 113.6, 3], ['番禺城市B', 22.95, 113.55, 2], ['番禺城市A', 22.95, 113.5, 1] ]; function setMarkers(map, locations) { // Add markers to the map // Marker sizes are expressed as a Size of X,Y // where the origin of the image (0,0) is located // in the top left of the image. // Origins, anchor positions and coordinates of the marker // increase in the X direction to the right and in // the Y direction down. var image = new google.maps.MarkerImage('/images/beachflag.png', // This marker is 20 pixels wide by 32 pixels tall. new google.maps.Size(20, 32), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is the base of the flagpole at 0,32. new google.maps.Point(0, 32)); var shadow = new google.maps.MarkerImage('/images/beachflag_shadow.png', // The shadow image is larger in the horizontal dimension // while the position and offset are the same as for the main image. new google.maps.Size(37, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 32)); // Shapes define the clickable region of the icon. // The type defines an HTML <area> element 'poly' which // traces out a polygon as a series of X,Y points. The final // coordinate closes the poly by connecting to the first // coordinate. var shape = { coord: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: beach[0], zIndex: beach[3] }); } } </script> </head> <body onload="initialize()"> <div id="map_canvas"> </div> </body> </html>
效果图如下:
![](http://pic002.cnblogs.com/img/%e8%87%aa%e7%94%b1%e7%9a%84%e7%94%9f%e6%b4%bb/201008/2010082621021390.jpg)
谢谢浏览!
相关文章推荐
- 利用 Google API 调用谷歌地图 演示6
- 利用 Google API 调用谷歌地图 演示7
- 利用 Google API 调用谷歌地图 演示8
- 利用 Google API 调用谷歌地图 演示9
- 利用 Google API 调用谷歌地图 演示10
- 利用 Google API 调用谷歌地图 演示1
- 利用 Google API 调用谷歌地图 演示11
- 利用 Google API 调用谷歌地图 演示13
- 利用 Google API 调用谷歌地图 演示2
- 利用 Google API 调用谷歌地图 演示3
- 利用 Google API 调用谷歌地图 演示4
- 利用 Google API 调用谷歌地图 演示5
- 利用 Google API 调用谷歌地图
- 抄google工程师的代码:通过读setting的源代码,利用反射机制调用系统隐藏的API
- 利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
- Java利用JNI调用c++代码简易例子演示
- 调用google map api
- ArcGIS JavaScript API调用Google、天地图、百度等第三方在线地图服务
- 利用python调用elasticsearch-api来分析数据并作图进行日报邮件发送
- qt qml 利用xmlhttprequest 调用有赞api