有遮罩层 有标记提示，可以动态查询 地址的 经纬度。下面是代码
<html>
<head>
<title>google map v3</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function createMap(address){
if(address == null || address=="") return false;
geocoder = new google.maps.Geocoder();
if(geocoder){
geocoder.geocode({address:address},function(results,status){
if(status == google.maps.GeocoderStatus.OK){
var location = results[0].geometry.location;
var options = {
zoom:16,
center:location,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map =new google.maps.Map(document.getElementById("map_canvas"),options);
var marker = new google.maps.Marker({
map: map,
position: location,
title:address
});
var infowindow = new google.maps.InfoWindow({
content: "<div>"+address+"</div>",
size: new google.maps.Size(50,20),
position:location,
pixelOffset:new google.maps.Size(5,5)
});
infowindow.open(map);
}else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function initialize() {
createMap("your address e.g: 北京");
}
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);
map.setZoom(16);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address
});
var infowindow = new google.maps.InfoWindow({
content: "<span>"+address+"</span>",
size: new google.maps.Size(40,10),
position: results[0].geometry.location,
pixelOffset:new google.maps.Size(5,5)
});
infowindow.open(map);
}
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px;margin:0 auto;"></div>
<div>
<input id="address" type="textbox" value="your address eg:北京">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
</html>
分享到：
相关推荐
这个"谷歌地图 示例"可能是一个项目或者教程，展示了如何利用谷歌地图API进行定制化操作，如绘制线路和使用图例功能。下面将详细探讨这些知识点。 首先，谷歌地图API允许开发者在网页上嵌入地图，通过JavaScript...
在本示例中，我们将深入探讨如何利用Google地图API实现这些功能。 首先，要使用Google地图API，你需要在Google Cloud Console上创建一个项目并启用Maps JavaScript API。这会给你一个API密钥，它是连接你应用与...
Qt 谷歌地图的示例程序。 一点不懂webkit和javascript开始摸起。如有疏漏多多斧正。 例子的功能就是在标准的qt主窗口加载一个谷歌地图。webkit在（0，0）放置一个图标。地图移动后通知Qt在标准输出打印经纬度。 ...
google 地图 API 文档 Google 地图 API 是一款功能强大且广泛应用的 Web 服务，允许开发者在自己的网站中嵌入 Google 地图，添加丰富的功能和交互性，提供更好的用户体验。下面是 Google 地图 API 的基础知识点和...
谷歌地图应用示例源码 功能描述： 1.增加多标签 Tab 项支持 2.Javascript 脚本压缩输出 3.增加用户自定义标注支持 4.用户自定义标注点支持消息显示和回调函数自定义 CallBack 5.改进 google maps 处理流程 6.标注点...
谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口，允许开发者在自己的网站或应用程序中嵌入谷歌地图，以提供地图检索、...
在本示例中，我们将关注如何加载并显示谷歌地图的离线切片。 谷歌地图通常由一系列的图像切片组成，这些切片按照特定的层级和坐标系统进行组织。在OpenLayers 3中，我们可以通过创建一个新的TileLayer，并定义其源...
【标题】：Google地图应用示例源码解析 在IT领域，地图应用是不可或缺的一部分，尤其是在定位服务、导航系统和地理信息系统（GIS）中。本文将深入探讨一个以Google地图API为核心的示例源码，主要涉及以下几个核心...
"google 示例google 示例google 示例google 示例"的描述虽然重复，但我们可以从中推测，这些示例可能涵盖了多个使用场景，可能是为了帮助开发者更好地理解和应用Google的技术。这可能包括搜索API、地图API、身份验证...
人心疯google卫星地图2.0.rar ，全屏查看google的卫星地图 google 示例 google API示例 1024*768
在本文中，我们将深入探讨如何使用QT5.9.2的QWebEngineView组件来实现一个百度离线地图的示例。这个项目对于那些需要在无网络环境下使用地图功能的应用程序开发者来说非常有价值。我们将重点讲解以下几个关键知识点...
通过这个示例，我们可以学习如何使用Google地图JavaScript API进行地址解析，并在地图上显示结果。开发者可以根据需求进一步扩展，例如处理多个地址、添加事件监听器或实现更复杂的交互功能。同时，需要注意的是，...
离线Google地图API是开发者在没有网络连接时仍然可以使用谷歌地图服务的一种技术。这个API主要是基于JavaScript构建，特别是V3版本，它提供了丰富的功能，让开发者能够在本地环境中展示地图数据。本文将深入探讨离线...
谷歌地图示例 #map { height: 400px; width: 100%; } <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <div id="map"></div> ``` ...
地图测试谷歌地图示例应用程序使用的工具后端Django（Python 网络框架） Django Rest Framework（基于 Django 的 REST 框架） Postgis（PostgreSQL 的空间和地理对象）前端Angularjs（Javascript 框架） Bootstrap...
C#的谷歌地图调用示例，经测试能够正常运行。非常好用，需要的朋友尽快下载。
谷歌地图调用指南，谷歌地图调用示例，是直接写在模板里面的，大家保存就可以使用了。
这些只是Google地图JavaScript API的基本用法，实际开发中，开发者还可以根据需求进行更复杂的定制，例如添加自定义图层、使用KML数据、实现地图拖拽事件、设置地图样式、实现地理围栏等。通过不断学习和实践，可以...
本文将详细介绍如何在Asp.NET项目中使用谷歌地图控件，并展示其实现各种功能的示例。 首先，谷歌地图API是Google提供的一项服务，允许开发者在网页或应用程序中嵌入交互式地图。Asp.NET版的GoogleMap控件是基于这个...
【标题】"Google地图小示例框架"是一个关于在编程中使用Google Maps API创建简单应用的教程。这个框架提供了一个基础的起点，帮助开发者快速理解如何集成Google Maps服务到自己的项目中，尤其适用于初学者或者需要...