GoogleMap在js中的应用
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
1. 使用 script 标记来加入 Maps API JavaScript。 2. 咱们建立一个名为“map_canvas”的 div 元素来承载该地图。 3. 建立 Javascript 对象常量以保存若干地图属性。 4. 编写 Javascript 函数以建立“map”对象。 5. 咱们从 body 标记的 onload 事件初始化该地图对象。
载入 Google Maps API
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
http://maps.google.com/maps/api/js 网址指向 Javascript 文件所在的位置，该文件会载入使用第 3 版 Google Maps API 所需的所有符号和定义。您的网页必须包含指向该网址的 script 标签。
此标头中的 <meta> 标签会指定以下内容：即应当以全屏模式显示该地图，且用户不能调整地图尺寸。（有关详细信息，请参见开发移动设备部分。）
请注意，咱们还须要设置 sensor 参数，以指明此应用程序是否使用传感器肯定用户的位置。在此示例中，咱们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值显式设为 true 或 false。
地图 DOM 元素
<div id="map_canvas" style="width: 100%; height: 100%"></div>
要在网页上显示地图，咱们必须为其留出一个位置。一般，咱们的作法是建立一个名为 div 的元素，而后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。
在上述示例中，咱们定义了名为“map_canvas”的 <div> 并使用样式属性设置其大小。请注意，该尺寸已设置为“100％”，这将会展开地图，使之符合移动设备的屏幕尺寸。您可能须要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意，地图老是会根据其中所包含的元素的大小决定其自己的尺寸，所以，您必须始终在 <div> 上显式设置一个适用的尺寸。
地图选项
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
要初始化地图，咱们须要先建立一个包含地图初始化变量的 Map options 对象。该对象不是构建出来的，而是以对象常量的形式建立出来的。因为咱们要将地图的中心设定为某一特定的点，所以，咱们还须要建立一个 latlng 值，以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息，请参阅下面的 纬度和经度部分。
咱们还设置了初始缩放级别，并将 mapTypeId 设置为 google.maps.MapTypeId.ROADMAP。系统支持如下类型：
• ROADMAP，用于显示 Google Maps 默认的普通二维图块。
• SATELLITE，用于显示拍摄的图块。
• HYBRID，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。
• TERRAIN，用于显示天然地形图块，天然地形图块中会显示高度和水体特征（山脉、河流等）。
与 Google Maps 第 2 版 API 不一样的是，第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型，才能查看相应的图块。
google.maps.Map - 基本对象
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Map 类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。（您能够建立此类的多个实例，每一个对象都将在网页上定义一个单独的地图。）咱们使用 Javascript new 操做符建立此类的一个新实例。
建立新的地图实例时，您须要在网页中指定一个 <div> HTML 元素做为地图的容器。HTML 节点是 Javascript document 对象的子对象，并且咱们经过 document.getElementById() 方法得到该元素的引用。
此代码可定义一个名为 map 的变量，而后将该变量分配给新的 Map 对象，同时将该变量传递到在 myOptions 对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map() 函数称为“构造函数”，其定义以下：
构造函数 说明
google.maps.Map( opts?) 使用 opts 参数中已传递的可选参数建立新地图。
载入地图
<body onload="initialize()">
呈现 HTML 网页时，会扩展文档对象模型 (DOM)，接收任何外部图像和脚本并将其合并到 document 对象中。为了确保系统在彻底载入网页后才将咱们的地图添加到网页上，咱们只会在 HTML 网页的 <body> 元素收到 onload 事件后，才会执行用于构建 Map 对象的函数。这样作能够避免出现不可预期的行为，并使咱们能够对地图绘制的方式和时间进行更多控制。
body 标签的 onload 属性是事件处理程序的一个示例。Google Maps Javascript API 还提供了一组事件，可供您进行处理以肯定状态变化。有关详细信息，请参阅地图事件部分。
查看示例 (map-simple.html)
纬度和经度
咱们还须要一种引用各类地图位置的方法。在 Google Maps API 中，google.maps.LatLng 对象提供了此类机制。您能够构建一个 LatLng 对象，以 {纬度, 经度} 的顺序传递其参数：
var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)
请注意：将“地址”转变为地理地点的过程叫作“地址解析”。此版本的 Google Maps API 可支持地址解析。有关详细信息，请参见服务部分中的地址解析。
LatLng 对象在 Google Maps API 中用途普遍。例如，google.maps.Marker 对象会在其构造函数中应用 LatLng，并在地图上所指定的地理位置上添加标记 叠加层。
地图类型
Google Maps API 中提供了多种地图类型。除了用户熟悉的“绘制”道路地图图块，Google Maps API 还可支持其余地图类型。这些地图类型是经过使用 mapTypeId 属性，在地图的 Map options 对象中设置的。
Google Maps API 提供了如下地图类型：
• MapTypeId.ROADMAP，用于显示默认的道路地图视图
• MapTypeId.SATELLITE，用于显示 Google 地球卫星图像
• MapTypeId.HYBRID，用于同时显示普通视图和卫星视图
• MapTypeId.TERRAIN，用于根据地形信息显示实际地图。
您能够经过调用地图的 setMapTypeId() 方法更改地图的类型。
用户界面事件
Google Maps API 中的一些对象旨在对用户事件（例如鼠标事件或键盘事件）做出响应。google.maps.Marker 对象能够侦听如下用户事件，例如：
• 'click'
• 'dblclick'
• 'mouseup'
• 'mousedown'
• 'mouseover'
• 'mouseout'
这些事件可能看上去像是标准 DOM 事件，但实际上倒是 Google Maps API 的一部分。因为不一样的浏览器可实现不一样的 DOM 事件模型，所以，Google Maps API 提供了无需处理各类跨浏览器特性即可侦听和响应 DOM 事件的机制。这些事件一般还会在代表某些用户界面状态（例如鼠标位置）的事件中传递参数。
MVC 状态更改
MVC 对象一般都有相应的状态。只要更改了对象的属性，那么，API 就会触发已更改该属性的事件。例如，当地图的缩放级别更改后，API 将会触发地图上的 zoom_changed 事件。您也能够经过在 event 命名空间方法中注册 addListener() 事件处理程序的方式截获这些状态更改。
用户事件和 MVC 状态更改看上去很类似，但一般状况下，您应该在代码中对它们进行不一样的处理。例如，MVC 事件不在它们的事件中传递参数。您可能须要经过调用该对象上相应的 getProperty 方法，检查在 MVC 状态更改中更改的属性。
地图事件
您可以使用 addListener() 事件处理程序注册以接收事件通知。该方法有三个参数，一个对象，一个待侦听事件以及一个在指定事件发生时调用的函数。
如下代码可将用户事件和状态更改事件进行组合。咱们可将事件处理程序附加到点击时对地图执行缩放操做的标记上。咱们还针对“zoom”属性的更改在地图中添加了事件处理程序，并在收到 zoom_changed 事件时将地图移动到澳大利亚北领地的达尔文市：
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToDarwin, 3000);
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
}
function moveToDarwin() {
var darwin = new google.maps.LatLng(-12.461334, 130.841904);
map.setCenter(darwin);
}
查看示例 (event-simple.html)
请注意：若是您要尝试检测视口中的更改，请务必使用特定的 bounds_changed 事件，而不要使用做为其组成部分的 zoom_changed 和 center_changed 事件。因为 Google Maps API 会单独触发后面的两个事件，所以，只有在系统强制性地更改了视口后，getBounds() 才能报告有用的结果。若是您想要在此类事件以后实现 getBounds() 方法，请务必侦听 bounds_changed 事件。
访问用户界面事件中的参数
一般状况下，Google Maps API 第 3 版中的用户界面事件会传递事件参数，您可经过事件侦听器访问这些参数，这些参数会注明事件发生时用户界面所处的状态。例如，用户界面 'click' 事件一般传递包含 latLng 属性的 MouseEvent，该属性指出了地图上的点击位置。请注意，这是用户界面事件所独有的行为；MVC 状态更改不会在它们的事件中传递参数。
您能够访问事件侦听器中的事件参数，这与访问对象属性的方法同样。如下示例介绍了如何为地图添加事件侦听器，以及如何在用户点击地图时，在所点击的位置处建立一个标记。
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
在事件侦听器中使用闭包
在执行事件侦听器时，一般可取的作法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据，但它支持容许内部函数访问外部变量的闭包。在事件侦听器访问一般不附加到发生事件的对象的变量时，闭包很是有用。
下例在事件侦听器中使用函数闭包将加密消息分配给一组标记。点击每一个标记均可以看到加密消息的一部分，该消息并未包含在标记自身内。
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Add 5 markers to the map at random locations
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(j.toString());
attachSecretMessage(marker, i);
}
}
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data
function attachSecretMessage(marker, number) {
var message = ["This","is","the","secret","message"];
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
获取和设置事件处理程序中的属性
在系统触发事件时，Google Maps API 事件系统中的任何 MVC 状态更改事件都不会传递参数（用户事件确实会传递参数，这是能够检查到的）。若是您须要检查有关 MVC 状态更改的某一属性，则应当显式的调用该对象上相应的 getProperty() 方法。在此检查过程当中，系统会始终检索 MVC 对象的“当前状态”，但这一状态可能不是 MVC 对象在首次触发相应事件时所处的状态。
请注意：在对“特定属性”的状态更改做出响应的事件处理程序中，显式设置一个属性可能会产生不可预期的和/或没必要要的行为。例如，设置此类属性将会触发新的事件，并且，若是您老是在此事件处理程序中设置属性，那么，您最终可能会出现无限循环的状况。
在如下示例中，咱们会设置一个事件处理程序，使其经过构建显示缩放级别的信息窗口对缩放事件做出响应。咱们还会检查地图是否已彻底缩小，若是是的话，咱们会将地图放大到缩放级别 17。
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var zoomLevel;
var infowindow = new google.maps.InfoWindow(
{ content: 'Zoom Level Test',
size: new google.maps.Size(50,50),
position: myLatlng
});
infowindow.open(map);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
infowindow.setContent("Zoom: " + zoomLevel);
if (zoomLevel == 0) {
map.setZoom(10);
}
});
}
停用默认用户界面
有时，您可能但愿关闭 API 的默认用户界面设置。要进行上述操做，请将 Map 的 disableDefaultUI 属性（在 Map options 对象中）设置为 true。此属性可停用 Google Maps API 中全部自动执行的用户界面行为。
如下代码可完全停用默认用户界面：
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
下面的示例显示了一个简单的地图，其中启用了位于不一样位置的全部控件。
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
绘制自定义控件
如何绘制控件由您本身决定。通常来说，咱们建议您将全部控件的显示方式放在一个单独的 <div> 元素中，以即可以将控件做为一个单元进行处理。咱们将在下面所示的示例中使用这种设计模式。
设计具备吸引力的控件须要具有一些 CSS 和 DOM 结构方面的知识。如下代码显示了如何经过一个 <div> 容器、一个承载按钮轮廓的 <div> 和另外一个承载按钮内部事项的 <div> 建立一个简单的控件。
// Create a div to hold the control.
var controlDiv = document.createElement('DIV');
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText);
处理自定义控件的事件
要使控件有用，它必须可以实际完成某些任务。控件的用途由您肯定。控件能够响应用户输入，也能够响应 Map 的状态变化。
对于响应用户输入，Google Maps API 提供了一个跨浏览器的事件处理方法 addDomListener()，它能够处理浏览器的多数支持的 DOM 事件。如下代码段为浏览器的 'click' 事件添加了一个侦听器。请注意，此事件是从 DOM 接收的，而不是从地图。
// Setup the click event listener: simply set the map to
// center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago)
});
定位自定义控件
要在地图上定位自定义控件，您能够在 Map 对象的 controls 属性中将其放在适当位置。此属性包含一个 google.maps.ControlPosition 数组。您能够经过将 Node（一般是 <div>）添加至适当 ControlPosition 向地图中添加自定义控件。（有关这些位置的信息，请参见上面的控件定位。）
每一个 ControlPosition 会存储一个显示在该位置的控件的 MVCArray。所以，当您向该位置添加或从中删除控件时，API 将相应更新控件。
API 按照 index 属性的顺序将控件放在每一个位置，并会首先放置索引值较低的控件。例如，位置 BOTTOM_RIGHT 处的两个自定义控件将按照此索引顺序进行排列，并优先放置索引值较低的控件。默认状况下，全部自定义控件将在放置完任何 API 默认控件以后进行放置。您能够经过将控件的 index 属性设置为一个负值覆盖此行为。请注意，若是但愿在放置相同位置的默认 API 控件“以前”放置您的控件，一般只需设置一个索引值。
如下代码将建立一个新的自定义控件（未显示其构造函数）并将其添加到地图中的 TOP_RIGHT 位置。
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('DIV');
var myControl = new MyControl(controlDiv);
// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
自定义控件示例
下面是一个简单的控件（尽管不是很实用），其中综合了上面所示的模式。该控件经过将地图在某个默认位置居中来响应 DOM 'click' 事件：
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
为控件添加状态
控件也能够存储状态。下面的示例与前面所示的相似，但该控件包含了一个额外的“Set Home”按钮，它将控件设置为显示一个新首页位置。为此，咱们在该控件内建立一个 home_ 属性以存储此状态，并为该状态提供了获取函数和设置函数。
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that
* returns the user to the control's defined home.
*/
// Define a property to hold the Home state
HomeControl.prototype.home_ = null;
// Define setters and getters for this property
HomeControl.prototype.getHome = function() {
return this.home_;
}
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
}
function HomeControl(map, div, home) {
// Get the control DIV. We'll attach our control
// UI to this DIV.
var controlDiv = div;
// We set up a variable for the 'this' keyword
// since we're adding event listeners later
// and 'this' will be out of scope.
var control = this;
// Set the home property upon construction
control.home_ = home;
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var goHomeUI = document.createElement('DIV');
goHomeUI.title = 'Click to set the map to Home';
controlDiv.appendChild(goHomeUI);
// Set CSS for the control interior
var goHomeText = document.createElement('DIV');
goHomeText.innerHTML = 'Home';
goHomeUI.appendChild(goHomeText);
// Set CSS for the setHome control border
var setHomeUI = document.createElement('DIV');
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
// Set CSS for the control interior
var setHomeText = document.createElement('DIV');
setHomeText.innerHTML = 'Set Home';
setHomeUI.appendChild(setHomeText);
// Setup the click event listener for Home:
// simply set the map to the control's current home property.
google.maps.event.addDomListener(goHomeUI, 'click', function() {
var currentHome = control.getHome();
map.setCenter(currentHome);
});
// Setup the click event listener for Set Home:
// Set the control's home to the current Map center.
google.maps.event.addDomListener(setHomeUI, 'click', function() {
var newHome = map.getCenter();
control.setHome(newHome);
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(map, homeControlDiv, chicago);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
添加叠加层
叠加层一般在构造时添加到地图中。全部叠加层都会定义构造中所用的 Options 对象，以指定应显示叠加层的地图。您也可使用叠加层的 setMap() 方法，将其传递给要添加叠加层的地图，从而直接在地图上添加叠加层。
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
删除叠加层
要从地图上删除叠加层，可调用叠加层的 setMap() 方法，传递 null。请注意，调用此方法不会删除叠加层，而只是从地图上删除叠加层。若是您要删除叠加层，则应当从地图上删除叠加层，而后将叠加层设置为 null。
若是您要管理一组叠加层，则应当建立一个数组以存储这些叠加层。使用数组后，只要您须要删除叠加层，就能够对数组中的每一个叠加层调用 setMap()。（请注意，与第 2 版不一样，该版本中未提供 clearOverlays() 方法。对于跟踪叠加层并在不须要时将其从地图中删除的任务，您须要本身执行。）要删除叠加层，您能够从地图上删除叠加层并将数组的 length 设置为 0，但此操做会删除对叠加层的全部引用。
下面示例的效果是点击地图时将标记放在地图上，而后将标记放入数组中。叠加层稍后能够删除、显示或删除：
var map;
var markersArray = [];
function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
标记
标记用于标识地图上的位置。默认状况下，标记使用的是标准图标，但您能够在标记的构造函数中设置一个自定义图标，或者经过对标记调用 setIcon() 设置一个自定义图标。google.maps.Marker 构造函数采用的是用于指定标记初始属性的一个 Marker options 对象常量。如下字段特别重要，一般是在您构建标记时进行设置的：
• position（必需），用于指定标识标记初始位置的 LatLng。
• map（可选），用于指定要在其上设置标记的 Map 对象。
请注意，您应在 Marker 构造函数指定要为哪一个地图添加标记。若是您不指定此参数，那么，您只能建立标记，而没法将其附加到地图上（或在地图上显示）。稍后，您能够经过调用标记的 setMap() 方法添加该标记。要删除标记，请调用将 null 做为参数传递的 setMap() 方法。
标记设计为可交互。例如，默认状况下它们接收 'click' 事件，经常使用于在事件侦听器中打开信息窗口。
如下示例介绍了如何将一个简单的标记添加到澳大利亚中心区域的乌鲁鲁的地图上：
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
此 Marker 标题将会以提示的形式显示。
若是您不想在标记的构造函数中传递任何 Marker options，那么，请在构造函数的最后一个参数中传递一个空对象 {}。
图标
标记能够定义要显示的图标，从而取代默认的图标。定义图标的过程当中包含设置若干可定义标记视觉行为的属性。
简单图标
就最基本的状况而言，只需将标记的 icon 属性设置为某一图像的网址，图标即可指明要使用的图像（而非默认的 Google Maps 图钉图标）。在这种状况下，Google Maps API 将会自动调整图标的大小。
在如下示例中，咱们会建立一个图标，用于标示澳大利亚悉尼的邦迪海滩的位置：
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
复杂图标
较为复杂的图标可用于指定复杂的形状（表示用户可点击的区域）、添加阴影图像，以及指定这些形状与其余叠加层在显示时应采用的“堆叠顺序”。以这种方式指定的图标应当将本身的 icon 属性和 shadow 属性设置为 MarkerImage 类型的对象。
阴影图像一般应该和主图像成 45 度夹角（向右上方倾斜），而且阴影图像的左下角应与图标图像的左下角对齐。阴影图像应是半透明的 24 位 PNG 图像，这样图像边界即可以在地图上正确显示。
MarkerImage 对象不只能够定义图像，还可定义图标的 size、图标的 origin（例如，在您所需的图像取自一张较大的拼合图像时）以及图标热点所应定位的 anchor（取决于原点）。
如下示例介绍了如何建立复杂的标记，以表示澳大利亚新南威尔士的悉尼附近的海滩。请注意，应当将 anchor 设置为 (0,32)，从而与旗杆的基座相对应。
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
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 = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 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]
});
}
}
地面叠加层
多边形在表示不规则的区域时颇有用，但不能显示图片。若是要在地图上放置一幅图片，可使用 GroundOverlay 对象。 GroundOverlay 的构造函数采用图片的网址和 LatLngBounds 做为参数。图片将渲染在地图上的指定边界内，并与地图的投影一致。
下面的示例将新泽西州纽瓦克的一幅老地图做为叠加层放在地图上：
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216,-74.213393),
new google.maps.LatLng(40.765641,-74.139235));
var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
imageBounds);
oldmap.setMap(map);
状态代码
status 代码可能返回下面的某个值：
• google.maps.GeocoderStatus.OK 表示地址解析成功。
• google.maps.GeocoderStatus.ZERO_RESULTS 表示地址解析成功，但未返回结果。若是地址解析过程当中传递的偏远位置 address 或 latng 并不存在，则会出现 种状况。
• google.maps.GeocoderStatus.OVER_QUERY_LIMIT 表示您超出了配额。
• google.maps.GeocoderStatus.REQUEST_DENIED 表示因为某种缘由拒绝了您的请求。
• google.maps.GeocoderStatus.INVALID_REQUEST 一般表示缺乏查询参数（address 或 latLng）。
在此示例中，咱们对一个地址进行地址解析，并根据返回的纬度/经度值放置标记。请注意，处理程序以匿名函数显式声明的形式传递。
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
建立地图和用户界面
设置完后端功能以后，接下来就能够建立地图和用户界面功能。若是您从未建立过 Google Maps，请先尝试建立文档中介绍的一些基本示例，从而确保您掌握了建立地图的基础知识。
建立标记和信息窗口
建立地图并使地图居中，而后，为该地图分配一个 click 侦听器。在侦听器的回调函数中，在点击过的坐标处建立一个标记，并在发送至构造函数的 GMarkerOptions 对象中将 draggable 属性设置为 "true"。而后，为该标记分配一个 click 侦听器，用于在标记上方弹出一个信息窗口。此信息窗口含有某一表单的 HTML 代码，该表单包含几个文本字段、一个下拉列表及一个保存按钮。以下所述，每一个表单输入项都对应一个 ID，并且，保存按钮具备一个 onclick 侦听器，用于调用 saveData 函数。
保存数据
在信息窗口按钮所调用的 saveData 函数中，您能够执行如下操做：
• 保存标记坐标的值和全部表单元素（若有须要，请转义为易于访问的网址）。
• 将 PHP 文件名、参数及其相应的值合在一块儿，造成一个网址。
• 将该网址做为 GDownloadUrl 的第一个参数进行传递，这个由 API 提供的函数会封装 XMLHTTPRequest 对象，该对象能让您经过 Javascript 检索各类文件（一般为 XML 格式）。GDownloadUrl 回调函数将会为您提供相应网址的内容及状态代码。
• 检查并确保返回的状态代码为 200。这表示已成功地检索到该文件，咱们能够继续进行处理了。
• 检查返回的数据字符串的长度，空数据文件表示未输出任何错误的字符串。若是字符串长度接近零，您能够关闭信息窗口，而后输出操做已成功的消息。
执行以上全部操做的 HTML 文件以下所示 (phpsqlinfo_add.html)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg"
type="text/javascript"></script>
<script type="text/javascript">
var marker;
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) {
marker = new GMarker(latlng, {draggable:true});
GEvent.addListener(marker, "click", function() {
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
marker.openInfoWindow(html);
});
map.addOverlay(marker);
}
});
}
}
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getLatLng();
var lat = latlng.lat();
var lng = latlng.lng();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + lat + "&lng=" + lng;
GDownloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
marker.closeInfoWindow();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
在打开信息窗口时，地图应以下所示：
相关文章
- 1. 在Flex中使用GoogleMap
- 2. " + " 操做符在js中的应用
- 3. AOP思想在JS中的应用
- 4. IE7 中的JS的应用
- 5. 如何在 GoogleMap API 中调用中间件发布的卫星影像
- 6. js中replace的应用
- 7. eval在JS中的做用
- 8. 关于GoogleMap的使用经验
- 9. googleMap重复调用的问题
- 10. js的应用
- 更多相关文章...
- • Redis在Java Web中的应用 - Redis教程
- • 在Spring中使用Redis - Redis教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 在Flex中使用GoogleMap
- 2. " + " 操做符在js中的应用
- 3. AOP思想在JS中的应用
- 4. IE7 中的JS的应用
- 5. 如何在 GoogleMap API 中调用中间件发布的卫星影像
- 6. js中replace的应用
- 7. eval在JS中的做用
- 8. 关于GoogleMap的使用经验
- 9. googleMap重复调用的问题
- 10. js的应用