谈起google map,只是众多google API中的一支,在网络上也随处可以找到很多关于google map的介绍,本文主要目的把自己对google map的认识做一小结,本文需要一定的开发google map的基础,如果是新手话我建议去google map官方一步步学习其开发过程http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps
主要包括google map的实现的基本方法和一些扩展功能。
1.在HTML中加入引用文件,key=abcdef是google map需要的key,本机测试可以用abcdef,发布在服务器时必须自己去google申请一个key.
<script src='http://maps.google.com/maps?hl=en&file=api&v=2&key=abcdef&allow_bidi=false'type="text/javascript"></script>
<script type="text/javascript" src='http://ditu.google.com/maps?file=api&v=2&key=abcdef&hl=en'></script>
<script type="text/javascript" src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=abcdef&hl=en'></script>
<script type="text/javascript" src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"></script>
在body中加入一个显示地图的div
<div id="googleMap" >Loading...</div>
2.在JS文件中实现加载地图
var mapElem = document.getElementById("googleMap");//获取初始化地图的位置
map = new GMap2(mapElem);
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();//加入缩放图标
var customUI = map.getDefaultUI();
customUI.maptypes.hybrid = false;
map.setUI(customUI);
3.给实例化好的地图添加事件
GEvent.addListener(map, "Event", function(oldLevel, newLevel) {
//do something
});
Event:click、dblclick、singlerightclick、movestart、move、moveend、zoomend、addoverlay、drag、load还有好多,可以参考Google 地图 API 参考。
4.实现拖拽标志过程中显示当前标志的经纬度,在创建标志的时候
function createMarker(markPoint) {
var marker = new GMarker(markPoint, { draggable: true });
GEvent.addListener(marker, "dragend", function(latlng) {
var e_lat = latlng.lat(); //拖放后纬度
var e_lng = latlng.lng(); //拖放后经度
$(".LgtInput").val(e_lat); //赋值给前台的label
$(".LitInput").val(e_lng);
});
GEvent.addListener(marker, "drag", function(latlng) {
var e_lat = latlng.lat(); //拖放后纬度
var e_lng = latlng.lng(); //拖放后经度
$(".LgtInput").val(e_lat);
$(".LitInput").val(e_lng);
});
return marker;
}
5.在地图上画出两点之间的行车路线,参数:实例化的地图,出发点,目的地
function setDirection(map,fromAddr,toAddr)
{
var gdir = new GDirections(map);
var geocoder = new GClientGeocoder();
geocoder.getLocations(fromAddr,
function(json){
if (!json)
{
alert("解析\""+address+"\"错误");
}
else{
var addressRoute ="from:"+address+"@"+json.Placemark[0].Point.coordinates[1]
+","+json.Placemark[0].Point.coordinates[0]
+" to:"+toAddr+"@";
gdir.load(addressRoute,{travelMode:G_TRAVEL_MODE_DRIVING});
}
});
}
6.使用google local search,虽然google map API提供了地图搜索的插件,但是搜索框是google样式的,作为产品当然是不允许的,所以自己实现输入框和搜索按钮,用JS实现调用google lacol search的功能。
$(".button").click(function() {//给自己实现的按钮添加事件响应
if ($(".input").val()) {//从输入框得出搜索内容
gLocalSearch.setCenterPoint(map.getCenter());
gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);//索引结果的个数,最少为4个,最大为8个
gLocalSearch.setSearchCompleteCallback(this, function() {
if (gLocalSearch.results) { //遍历搜索结果
for (var i = 0; i < gLocalSearch.results.length; i++) {
var title = gLocalSearch.results[i].title.replace(/\<[\/]?b\>/ig, "");
var itemHtml = "<li><span title='" + title + "'><a herf='#' itemIdx=" + i + ">" + localTitle + "</a></span><span title='" + gLocalSearch.results[i].streetAddress + "'>" + localAddr + "</span><span >";
if (gLocalSearch.results[i].phoneNumbers)
itemHtml += gLocalSearch.results[i].phoneNumbers[0].number;
itemHtml+="</span><em>"+ String.fromCharCode("A".charCodeAt(0) + i) + "</em><b itemid='" + i + "'></b></li>";
//搜索结果的名称,地址,地话等信息打印
alert(itemHtml);
}
}
});
gLocalSearch.execute($(".input").val());//执行搜索操作
}
});
分享到:
相关推荐
GoogleMap+LocalSearch获取查找的地址,经纬度
### GoogleMap与BingMap接口分析 #### 一、GoogleMap API详解 ##### 1.1 前言 在地图开发领域,Google Maps API 是一个广泛使用的工具集,为开发者提供了丰富的功能来构建交互式地图应用。这些API不仅支持基本的...
在本文中,我们将深入探讨如何在Flutter应用中集成并使用高德地图插件`amap_search_fluttify-master`,以及它如何为开发者提供强大的地图功能。Flutter是一种跨平台的开发框架,允许开发者使用单一代码库构建iOS和...
The Map Search Control is a simple to use application of the Google AJAX Search API that is designed to let you easily add a searchable map to your pages, sites, and blogs. The control on the right ...
在本文中,我们将深入探讨如何将Google Map API与Google Search API进行整合,以便在地图上显示基于地理位置的搜索结果。这个整合实现的核心是一个名为`KMapSearch`的JavaScript类,它利用面向对象的设计来简化这一...
### 使用Ajax开发GoogleMap行车路线查询应用:深入解析与实践 #### 背景与技术概览 在Web 2.0时代,Web应用的开发方式经历了革新性的转变,Ajax技术成为了主流,它极大地提升了用户体验,使实时交互式应用成为可能...
### Google Map开发房产地图实例详解 #### 一、概述 本文档主要介绍如何利用Google Maps JavaScript API V3 和 Google Local Search API 来开发一个房产地图应用。通过详细步骤的讲解和示例代码的展示,帮助读者...
google map api 实例 可以实现 地址解析、单击反向地址解析并提示、Google Search Bar,等功能
"Android-位置搜索智能提示框利用了GoogleMap的Api"这个项目正是为了优化用户在搜索位置时的交互体验。Google Map API是一个强大的工具,它允许开发者将地图功能集成到自己的应用程序中,包括定位、路线规划、地理...
通过这样的C#源码示例,初学者可以学习如何与Web服务交互、处理JSON数据以及在实际项目中应用Google Maps API。这不仅有助于理解C#编程,还能提升对地理信息系统的理解。不过,要记住,Google Maps API有使用限制,...
Other web services: AMap Search, Bing Maps Elevation API, Bing Maps Location API, HERE Routing API, Open Route Service Directions, Open Route Service Geocoding, Open Street Map Nominatim, Open Street...
它是谷歌内部许多关键服务(如Google Search、Gmail和Google Maps)的基础。 - 表格结构:数据组织成表格形式,由行键、列族和列标识符构成。 - 分布式架构:数据分布在多个节点上,每个节点处理一部分行。 - ...
3. **地标搜索(Place Search)**:如果你需要在地图上显示特定类型的地点,如餐馆、咖啡馆等,可以使用 Place API 进行搜索。 4. **路径规划(Directions)**:为用户提供从一个位置到另一个位置的详细路线,包括...
在"GoogleMap-React.js-master"这个项目中,我们可以预期看到以下内容: 1. **源代码结构**:包含React组件、样式文件、配置文件等。 2. **主要组件**:可能有一个`MapComponent`负责显示地图,一个`SearchBar`组件...
var map = new google.maps.Map(document.getElementById('map'), mapOptions); }); ``` 这里我们设置了地图的中心点、缩放级别和地图类型。 然后,我们可以添加标记和信息窗口。假设你有一个包含地点信息的JSON...
它被广泛应用于Google的各种服务,如Google Search、Google Analytics和Google Maps等。BigTable的关键特性包括行式存储、多版本并发控制、以及基于Chubby锁服务的分布式一致性。 MapReduce是一种编程模型,用于...
通过整合两种不同的地理编码服务,即开源的 OpenStreetMap 和商业的 Google Maps API,novoed-search 能够提供更全面、准确的地址解析能力。地址规范化是将用户输入的非标准或不完整地址转换为一致、可定位的标准...
1996年MapQuest和Google Local Search的推出标志着商业地图服务的开始。在同一年,MapServer出现了第一批用户。MapServer在1998年变成了开源项目。2000年开放的GPS以及2001年出现的PostGIS都是重要的地理信息系统...
Bigtable的高并发读写能力,使其成为谷歌众多服务如Google Search、Google Analytics等背后的关键支撑。 这三篇论文共同构建了谷歌大数据处理的基石,它们的理念和设计思路被广泛应用于现代云计算和大数据平台,如...