有遮罩层 有标记提示,可以动态查询 地址的 经纬度。下面是代码
<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>
分享到:
相关推荐
此为google地图api使用示例,有需要的朋友参考下。
Qt 谷歌地图的示例程序。 一点不懂webkit和javascript开始摸起。如有疏漏多多斧正。 例子的功能就是在标准的qt主窗口加载一个谷歌地图。webkit在(0,0)放置一个图标。地图移动后通知Qt在标准输出打印经纬度。 ...
可画线,并且有图例功能,可以选择卫星地图。 原创,所以分数高了点。请见谅。
谷歌地图应用示例源码 功能描述: 1.增加多标签 Tab 项支持 2.Javascript 脚本压缩输出 3.增加用户自定义标注支持 4.用户自定义标注点支持消息显示和回调函数自定义 CallBack 5.改进 google maps 处理流程 6.标注点...
openlayers3 调用离线谷歌切片地图 示例
Google 地图 JavaScript API 示例
人心疯google卫星地图2.0.rar ,全屏查看google的卫星地图 google 示例 google API示例 1024*768
谷歌地图示例 带有 gmaps.js 的谷歌地图示例
Google 地图 JavaScript API 示例 简单地址解析
地图测试谷歌地图示例应用程序使用的工具后端Django(Python 网络框架) Django Rest Framework(基于 Django 的 REST 框架) Postgis(PostgreSQL 的空间和地理对象)前端Angularjs(Javascript 框架) Bootstrap...
C#的谷歌地图调用示例,经测试能够正常运行。非常好用,需要的朋友尽快下载。
谷歌地图调用指南,谷歌地图调用示例,是直接写在模板里面的,大家保存就可以使用了。
Google Maps API v3离线开发包,带本地地图示例数据 需要特别说明的是: 1、本离线开发包内仅实现了功能离线,即js源码和部分控件图片的离线,地图仍然使用Google Tile。 2、从思路上讲,将Google Tile下载到本地...
自述 此自述文件通常会记录启动和运行应用程序所需的任何步骤。 您可能想要涵盖的内容: Ruby版 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列、缓存服务器、搜索引擎等) ...
PyQt-GoogleMaps 使用 Javascript APIv3 和 QWebKit 的带有 PyQt 的 Google 地图示例。
1、选点获取经纬度 2、加载marker点 3、设置不同marker点图标 4、marker点移动 5、提供相应的事件接口和marker点JSon数据结构
arcgis api for javascript 调用天地图,百度地图和google地图示例demo
Google Map API 使用示例
由于公司需求,自己修改的离线地图API....1.支持使用google地图瓦片(不建议使用,效率不高,缩放级别较高时拖动有些卡顿,建议注释该代码块:overlayTileLayer.getTilesUrl,使用google转baidu的jar转换代码,源码文章:...
已生成DLL;不需要使用单个的javascript文件来访问Google地图。在ASP.NET下仅仅需要将控件拖放到页面即可拥有Google地图功能。完全支持Google地图 API全部功能,非本地使时请到google map申请api key