<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('无法确定地址在这个位置。');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(31.1933370274183, 121.43890661621094);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 11,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
//icon:"logo.png",
map: map,
draggable: true
});
google.maps.event.addListener(marker, "mouseover", function() {
//marker.setImage('logo.png');
});
google.maps.event.addListener(marker, "mouseout", function() {
//marker.setImage('logo.png');
});
// 更新当前的位置信息
updateMarkerPosition(latLng);
geocodePosition(latLng);
// 添加拖动事件监听器
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('正在搜索...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('正在搜索...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('搜索结束');
geocodePosition(marker.getPosition());
});
}
// 加载载应用程序。
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapCanvas" style="height: 600px"></div>
<div id="markerStatus">1</div>
<div id="info">2</div>
<div id="address">3</div>
</body>
</html>
分享到：
相关推荐
在Windows Forms应用中，GMap.NET是一个强大的库，它提供了Google Maps API的桌面端实现，使得开发者可以在应用程序中集成地图功能。"Gmap鼠标拖拽Marker"是一个关于如何在GMap.NET控件中实现标记（Marker）的拖放...
在使用Google Maps API进行Web开发时，经常需要在地图上添加标记（Marker）来指示特定的位置。本教程将深入探讨如何在Google Maps中控制Marker的显示与隐藏，以实现更灵活的地图交互体验。 首先，我们需要了解...
首先，我们要理解"标记（Marker）"在谷歌地图中的概念。标记是Google Maps API中用于在地图上显示特定位置的一种元素，通常用来表示具体的地址、兴趣点等。它们可以包含自定义图标，附加信息窗口（InfoWindow）等，...
这款库的核心特性在于其能够直接在谷歌地图上渲染React组件，极大地扩展了地图的可定制性。 首先，`react-googlemap-react`库通过JavaScript API与Google Maps服务进行通信，为React应用提供了一种声明式的、基于...
总之，这个示例源码展示了如何利用Google地图API创建具有互动性的地图应用，包括获取地理位置、显示和操作Marker以及处理地图事件。通过学习和理解这个源码，开发者可以进一步掌握Google地图API的使用，为自己的项目...
或在手机上打开谷歌地图应用。 2. 搜索或拖动地图找到第一个点，点击地图上的位置以放置一个标记。 3. 继续搜索或拖动，找到第二个点，再次点击地图放置第二个标记。 4. 在两个标记之间，谷歌地图会自动显示两点间的...
3. **定位功能**：使用`navigator.geolocation`对象可以获取用户的位置信息，结合谷歌地图API可以在地图上显示用户当前位置。 4. **添加标记（Markers）**：标记用于在地图上指定位置。创建一个`google.maps.Marker...
1. **理解Google Maps API**: 谷歌地图API是谷歌提供的一套JavaScript库，它允许开发者在网站上嵌入交互式地图。API提供了丰富的功能，如创建地图、设置地图样式、添加标记、绘制形状、获取地理位置信息等。 2. **...
5. **添加标记（Markers）**：通过`google.maps.Marker`类可以向地图上添加点标记，表示特定的地理位置。你可以自定义标记的图标、点击事件等。 6. **信息窗口（InfoWindows）**：当你点击地图上的标记时，可以弹出...
综上所述，"jsp,java实现谷歌地图，查询地图功能"项目涵盖了JSP基础、Servlet交互、Google Maps API集成、地图查询功能实现等多个关键知识点。通过学习和实践这些内容，开发者可以构建出功能丰富的地图应用，提供...
Google Maps API V3 是 Google Maps 提供的一款强大的地图应用程序接口，允许开发者在网站或应用程序中轻松嵌入谷歌地图。该 API 的 JavaScript 版本提供了丰富的功能和灵活的配置选项，帮助开发者快速构建复杂的...
4. **路径绘制**：如果你需要在地图上展示路线或路径，谷歌地图API的`DirectionsService`和`DirectionsRenderer`可以帮你实现。它们可以计算两点或多点之间的行驶路线，并以线段形式显示在地图上。 5. **事件监听**...
4. 标记与信息窗口：在地图上添加标记（Marker）可以指示特定的位置，通过点击标记可以弹出信息窗口（InfoWindow）显示详细信息。这是模仿Google地图常用的功能之一。 5. 路线规划：地图接口可以计算两个或多个地点...
在这个特定的场景中，我们关注的是如何使用Google地图JavaScript API来展示站点标识，并在地图上动态地添加或移动这些标识。下面将详细介绍这个过程及其相关知识点。 首先，要使用Google地图JavaScript API，我们...
谷歌地图API是Google提供的一项强大的服务，允许开发者在自己的应用程序中集成地图功能。这个压缩包文件可能包含了关于如何使用Flex（一种基于ActionScript的富互联网应用程序框架）来调用谷歌地图API的资源和文档。...
谷歌地图源码是一种基于JavaScript技术实现的Web应用程序，它提供了丰富的地图交互功能，包括地图的显示、缩放、平移以及关键的是，支持地图上的搜索功能。这一源码对于开发者来说具有很高的学习和参考价值，可以...
在JavaScript中，谷歌地图API（Google Maps API）是一种强大的工具，允许开发者在网页上集成交互式的地图服务。本文将深入探讨如何使用这个API来在页面上显示谷歌地图，以及涉及的相关知识点。 首先，我们需要理解...
在Android开发中，集成并使用Google地图是一项常见的需求。Google地图API为开发者提供了丰富的功能，如显示地图、添加标记、绘制路径、测量距离等。本文将深入探讨如何在Android应用中实现这些功能。 首先，要使用...
这些只是Google地图JavaScript API的基本用法，实际开发中，开发者还可以根据需求进行更复杂的定制，例如添加自定义图层、使用KML数据、实现地图拖拽事件、设置地图样式、实现地理围栏等。通过不断学习和实践，可以...
- 地图事件：如`google.maps.event.addListener()`用于监听地图上的事件，如点击、拖动等，以便响应用户操作。 - 标记（Marker）：通过`new google.maps.Marker()`创建标记，可以设置标记的位置、图标、信息窗口等。...