你的位置:首页 > Java教程

[Java教程]Google Map API 使用总结


Google Map API (一):显示一个最基本的地图

1 实现一个地图:
<head>中引用:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Html里面合适的位置定义:

<div id="map"/>

javascript文件:

window.onload = myLoad;function myLoad(){   lat = 23.14746;  lng = 113.34175376;  var myLatLng = new google.maps.LatLng(lat, lng);  var myOptions = {    zoom: 15,    center: myLatLng,    mapTypeId: google.maps.MapTypeId.ROADMAP  };  var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);}

 

说明:zoom参数是地图的范围,参数越小,地图的范围就越大
center是地图的中心点,通过经纬度定义
mapTypeId:是地图的类型。有四种map可选,MapTypeId.ROADMAP, MapTypeId.SATELLITE,
MapTypeId.HYBRID,MapTypeId.TERRAIN。

此时就可以显示中心点是(113,27)的地图了

 

Google Map API(二):代码添加和删除marker标记

Google Map API :在地图 通过代添加和删除mark标记

 lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = {   zoom: 15,   center: myLatLng,   mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementByIdx_x_x("map_canvas"), myOptions); var marker = new google.maps.Marker({   position: myLatLng,   title: "Hello World!" }); marker.setMap(map); 

或者直接这样定义一个marker:

 var marker = new google.maps.Marker({   position: myLatLng,   map: map,   title: "Hello World!" }); 

去掉marker的操作是:

marker.setMap(null); 

Google Map API (三):给marker标记加上自定义内容

Google Map API Version3 中标记可以给marker加上任何自己的东西。
效果如下:

代码:
首先还是定义一个marker:

 lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = {   zoom: 15,   center: myLatLng,   mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x("map_canvas"), myOptions); var marker = new google.maps.Marker({   position: myLatLng,   title: "Hello World!" }); marker.setMap(map); 

然后给marker标记添加点击事件和自定义内容:

var contentString = '<div id="content">' +'<div>' +'</div>' +'<h1>我的标签</h1>' +'<div id="bodyContent">' +'<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +'</div>' +'</div>';var infowindow = new google.maps.InfoWindow({  content: contentString});google.maps.event.addListener(marker, 'click', function () {  infowindow.open(map, marker);});

infowindow是google指定的现实内容的类,你用HTML代码初始化它就好了
mapStyle是自己定义的样式,在这里可以使用网页的css样式表

Google Map API (四):地图控件的自定义

navigationControl:

mapTypeControl:

scaleControl:

具体定义的方式是:

lat = 23.14746;lng = 113.34175376;var myLatLng = new google.maps.LatLng(lat, lng);var myOptions = {  zoom: 15,  center: myLatLng,  disableDefaultUI: true,        //取消默认的试图  navigationControl: true,       //true表示显示控件  mapTypeControl: false,        //false表示不显示控件  scaleControl: true,  mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);

通过这样的定义可以让控件显示或者不显示了。

空间也可以指定样式和位置,主要是通过修改Options实现:

 var myOptions = {    zoom: 15,    center: myLatLng,    disableDefaultUI: true,    navigationControl: false,    mapTypeControl: true,    mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_LEFT },    scaleControl: true,    mapTypeId: google.maps.MapTypeId.ROADMAP  };

mapTypeControlOptions就是设定样式来,style是样式,google.maps.ControlPosition.TOP_LEFT是位置:

导航控件(navigationControl)可显示为以下 style 选项之一:

  • google.maps.NavigationControlStyle.SMALL,用于显示迷你缩放控件,其中仅限 + 和 - 按钮。此样式适用于移动设备。
  • google.maps.NavigationControlStyle.ZOOM_PAN,用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。
  • google.maps.NavigationControlStyle.ANDROID,用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。
  • google.maps.NavigationControlStyle.DEFAULT,会根据地图的尺寸和运行地图的设备挑选合适的导航控件。

MapType 控件可显示为以下 style 选项之一:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。
  • google.maps.MapTypeControlStyle.DEFAULT,用于显示“默认”的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。

可以定义的位置是:

  • TOP 表示控件应沿着地图顶部中心放置。
  • TOP_LEFT 表示控件应沿着地图顶部左侧放置,控件的任何子元素“流”向顶部中心。
  • TOP_RIGHT 表示控件应沿着地图顶部右侧放置,控件的任何子元素“流”向顶部中心。
  • BOTTOM 表示控件应沿着地图底部中心放置。
  • BOTTOM_LEFT 表示控件应沿着地图底部左侧放置,控件的任何子元素“流”向底部中心。
  • BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置,控件的任何子元素“流”向底部中心。
  • LEFT 表示控件应沿着地图左侧放置,位于使用 TOP_LEFT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。
  • RIGHT 表示控件应沿着地图右侧放置,位于使用 TOP_RIGHT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。

Google Map API(五):定义路线和点击事件

你可以在Google Map添加你想添加的线,并且为线添加点击事件。
效果如下:

 

JS代码:

window.onload = myLoad;var poly;     //折线var infoWindowPoly;     //折线显示的窗口var map;      //地图function myLoad() {  lat = 23.14746;       //位置固定,你也可以通过其他方法得到坐标  lng = 113.34175376;  var myLatLng = new google.maps.LatLng(lat, lng);      //初始化一个坐标位置  var myOptions = {    zoom: 15,          //缩放,数值越大地图显示的内容越具体    center: myLatLng,       //地图中心点    mapTypeId: google.maps.MapTypeId.ROADMAP   };  map = new google.maps.Map(document.getElementByIdx_x_x_x_x("map"), myOptions);    //根据option初始化地图  var flightPlanCoordinates = [            //添加一条线  new google.maps.LatLng(23.14746, 113.34175376),  new google.maps.LatLng(23.144, 113.345),  new google.maps.LatLng(23.149, 113.349), ];  poly = new google.maps.Polyline({         //定义线的样式    path: flightPlanCoordinates,    strokeColor: "#FF0000",    strokeOpacity: 1.0,    strokeWeight: 8  });  poly.setMap(map);         //把线添加到地图  google.maps.event.addListener(poly, 'click', addLatLng);     //为线添加点击事件  infoWindowPoly = new google.maps.InfoWindow();       //初始化线的弹出框}function addLatLng(event) {  var contentString = "<b>你点线啦</b><br />";  contentString += "点击位置: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";  infoWindowPoly.setContent(contentString);  infoWindowPoly.setPosition(event.latLng);  infoWindowPoly.open(map);         //点击线的时候显示线的弹出框}

总结代码如下:

window.onload = myLoad;var poly;     //折线var infoWindowPoly;     //折线显示的窗口var map;      //地图function myLoad() {  lat = 23.14746;       //位置固定,你也可以通过其他方法得到  lng = 113.34175376;  var myLatLng = new google.maps.LatLng(lat, lng);      //初始化一个坐标位置  var myOptions = {    zoom: 15,          //缩放,数值越大地图显示的内容越具体    center: myLatLng,       //地图中心点    disableDefaultUI: true,       //不使用默认图标    navigationControl: true,         //显示导航条    mapTypeControl: true,    mapTypeControlOptions: {     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,        //详细的设置可参考:http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html     position: google.maps.ControlPosition.TOP_LEFT },    scaleControl: true,    mapTypeId: google.maps.MapTypeId.ROADMAP       //地图类型,一共四种:可参考http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html  };  map = new google.maps.Map(document.getElementById("map"), myOptions);    //根据option初始化地图  var marker = new google.maps.Marker({       //添加标记    position: myLatLng,    map: map,    title: "Hello World!"  });  var contentString = '<div id="content">' +         //点击标记后显示自定义的内容  '<div>' +  '</div>' +  '<h1>我的标签</h1>' +  '<div id="bodyContent">' +  '<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +  '</div>' +  '</div>';  var infowindow = new google.maps.InfoWindow({        //根据HTML初始化infowindow    content: contentString  });  google.maps.event.addListener(marker, 'click', function () {   //添加点击事件    infowindow.open(map, marker);  });  var image = 'flag.png';                    //自定义marker的图标  var myLatLng = new google.maps.LatLng(23.149, 113.349);  var beachMarker = new google.maps.Marker({    position: myLatLng,    map: map,    icon: image  });  google.maps.event.addListener(beachMarker, 'click', function () {   //添加点击事件    infowindow.open(map,beachMarker );  });  var flightPlanCoordinates = [            //添加一条线  new google.maps.LatLng(23.14746, 113.34175376),  new google.maps.LatLng(23.144, 113.345),  new google.maps.LatLng(23.149, 113.349), ];  poly = new google.maps.Polyline({         //定义线的样式    path: flightPlanCoordinates,    strokeColor: "#FF0000",    strokeOpacity: 1.0,    strokeWeight: 8  });  poly.setMap(map);         //把线添加到地图  google.maps.event.addListener(poly, 'click', addLatLng);     //为线添加点击事件  infoWindowPoly = new google.maps.InfoWindow();       //初始化线的弹出框}function addLatLng(event) {  var contentString = "<b>你点线啦</b><br />";  contentString += "点击位置: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";  // Replace our Info Window's content and position  infoWindowPoly.setContent(contentString);  infoWindowPoly.setPosition(event.latLng);  infoWindowPoly.open(map);         //点击线的时候显示线的弹出框}

 

在项目中只是用到了简单的小部分,代码:

function initialize(lo,la,idbox) {    var myOptions = {     zoom: 12,     center: new google.maps.LatLng(lo,la),      mapTypeId: google.maps.MapTypeId.ROADMAP,     mapTypeControl: false, //屏蔽卫星     draggable: false, //禁止拖动    };    var map = new google.maps.Map(document.getElementById(idbox),      myOptions);    //machao 添加标记    var myLatLng = new google.maps.LatLng(lo,la);      var marker = new google.maps.Marker({      position:myLatLng,map:map,title:"Acura" //提示文字    });    var zoomLevel;}

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。