1、在这里给大家提供一个网页版的Google Map Api(英文版),
地址:http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html;
以及附件中有一个对Google Map Api的详细解析(不是很完整),以供大家的深入研究学习。
2、首先注册一个使用Google Map Api的key值,
地址:http://code.google.com/intl/zh-CN/apis/maps/signup.html;
【注意】它需要你先登录Google账户才能注册。
3、开发的时候需要导入Google Map Api的JS引用,使我们可以使用Google提供的一些类和方法。
<script src="http://map.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAnrLcdIsAekbSRWPABuH2xxRceoMQXzZaPPlfoncwAigryyE5sxT2R_vUmNgehHQnkfHRlG147cf
JAQ" type="text/javascript"></script>
key值是上面注册的;v=2是表示你使用的Google MAP的版本,我这里使用的GMap2开发。
对于API密钥,还有几点需要记下来:
1、如果使用API的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了;
2、API密钥只对网站目录或者域有效,所以,虽然你是使用同一个谷歌帐号登录后注册的密钥,但是,对不同域的网页,需要用这些域分别注册不同的密钥,对
于同一个域里的页面,直接拿你网站的域名注册一个,在这个域里的所有页面就可以通用这个密钥了。
引用:http://apps.hi.baidu.com/share/detail/119881
4、下面提供一个简单例子,需要用到GMap2,GMarker,GLatLng
function initialize(){
//GBrowserIsCompatible() 一般首先得判断浏览器是否支持Google maps的执行
if(GBrowserIsCompatible()){
var latlng = new GLatLng(39.9493,116.3975); //设置坐标
//给map指定一个容器div,第二个参数设置它的一些选项,该参数是一个对象,具体属性参见Google 地图API
var map = new GMap2(document.getElementById("map_canvas"),{size:new GSize(500,300),backgroundColor:"white"});
map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放(默认是不会滚动缩放)。
map.setCenter(latlng,13); //设置地图的中心为该坐标点,13为缩放级别(0-19;0 可以看到整个世界,19可以看到独立建筑物)
var blueIcon = new GIcon(G_DEFAULT_ICON); //定义一个标记图片
//blueIcon.image="http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";
blueIcon.image="http://labs.google.com/ridefinder/images/mm_20_red.png"; //标记的图片样式
//blueIcon.shadow="http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 阴影图片
//blueIcon.iconSize=new GSize(30,30);
//blueIcon.shadowSize=new GSize(0,0); 去掉标记图片的阴影
//在地图上的一个标记,draggable:设置该标记可以拖动;bouncy:设置该标记落下时是否弹跳一下(其他属性参见Google 地图API)
var marker = new GMarker(latlng,{icon:blueIcon,draggable:true,bouncy:false});
map.addOverlay(marker); //把这个标记添加到地图上
//对标记或者地图进行事件处理(下面的是对标记处理)
GEvent.addListener(marker,"click",function(){
map.setZoom(17); //设置地图的缩放程度
marker.openInfoWindowHtml("<span style='color:red'>这是定位的位置</span>"); //文字气球形式显示信息窗口
//map.openInfoWindowHtml(latlng,"<span style='color:red'>这是定位的位置</span>"); 上面的文字气球形式也可以这样显示
});
/*
如果地图点击发生在叠加层上,GMap2“点击”事件会传递 overlay 和 overlaylatlng(GLatLng),
否则只会传递它传递地图坐标的latlng
*/
GEvent.addListener(map,"click",function(overlay,latlng){
if(latlng){
var str = "<span style='color:blue'>坐标为:"+latlng.lat()+","+latlng.lng()+",</br>缩放级别:"+map.getZoom
()+"</span>";
map.clearOverlays(); //清除所有标记
map.addOverlay(new GMarker(latlng));
map.openInfoWindowHtml(latlng,str);
}
});
}
}
下面是对以上地图的显示形式的改变,都可以添加到以上函数中使用,看看效果;
map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放(默认是不会)。
//map.disableScrollWheelZoom(); 设置地图不能由鼠标滚轮控制缩放(默认)。
//map.enableDoubleClickZoom(); 设置可以双击缩放地图,左键双击为放大,右键双击为缩小(默认)。
//map.disableDoubleClickZoom(); 禁止双击缩放地图
//map.disableDragging(); 禁止拖拽地图到新的位置
//map.setMapType(G_SATELLITE_MAP); 直接设置地图的显示形式(如:卫星显示)
/*
标准地图类型有四种(第四种不知道啥意思):
•G_NORMAL_MAP- 默认视图
•G_SATELLITE_MAP - 显示 Google 地球卫星图像
•G_HYBRID_MAP - 混合显示普通视图和卫星视图
•G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用
*/
下面是添加控件的
map.addControl(new GLargeMapControl()); //Google 地图上使用的大平移/缩放控件
//map.addControl(new GSmallMapControl()); Google 地图上使用的小一点的平移/缩放控件
map.addControl(new GMapTypeControl()); //用户切换地图类型(例如“地图”和“卫星”,以及混合地图)的按钮
map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(5,20))); //显示地图的比例尺
//位于屏幕一角的可折叠概览地图,在这里通过GControlPosition设置了它的位置[所有的控件都可以设置位置,我发现开始的时候它还在默认
的右下方,当你点击缩小的时候才会跑到你指定的位置(很郁闷),其他的控件没有问题]、
//map.addControl(new GOverviewMapControl(),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(30,30)));
你也可以根据详细地址在地图上定位到位置(不过貌似有点慢);
//根据地址显示位置
function showAddress(address){
var map_canvas = new GMap2(document.getElementById("map_can"),{size:new GSize(500,300)});
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,function(point){
if(!point){
alert("无法解析该地址");
}else{
map_canvas.setCenter(point,point);
var mark = new GMarker(point);
map_canvas.addOverlay(mark);
mark.openInfoWindowHtml(address);
}
});
}
接下来就是简简单单的HTML页面了;
<!-- 在 Google Maps 中,GUnload()可以消除几乎所有的 IE 内存泄漏 -->
<body onload="initialize();" onunload="GUnload();">
<div id="map_canvas" style="width:400px;height:300px">
正在加载地图中....
</div>
查询的地址:<input name="ss" value="" onblur="showAddress(this.value);">
<div id="map_can"></div>
</body>
分享到:
相关推荐
基于google map的GPS轨迹定位系统项目案例点评.docx基于google map的GPS轨迹定位系统项目案例点评.docx基于google map的GPS轨迹定位系统项目案例点评.docx基于google map的GPS轨迹定位系统项目案例点评.docx基于...
基于google map的GPS轨迹定位系统项目案例点评.pdf基于google map的GPS轨迹定位系统项目案例点评.pdf基于google map的GPS轨迹定位系统项目案例点评.pdf基于google map的GPS轨迹定位系统项目案例点评.pdf基于google ...
真实好用的javaweb上使用的googlemap的demo
前端项目-jquery.googlemap,jquery插件允许您轻松地操作google map api。现在您可以创建地图、添加一些标记和创建路线。
基于Google Map的GPS轨迹定位系统项目(1)组 包括 文档,代码 , 内容十分详细
google-map-clustering-example, google地图响应的集群示例 google-map-clustering-examplegoogle-map-react的群集示例点击这里查看。 Kotatsu我受到 kotatsu 项目的强烈启发。这里项目使用 kotatsu 作为运行引擎。...
google map的开发辅助utils.zip,谷歌地图android api的便捷扩展。
谷歌地图React React 项目的更简单的 Google 地图集成...npm install --save @googlemap-react/core 一个有效的 Google Map API 密钥(用于替换下面代码片段中的占位符) import { GoogleMapProvider , HeatMap ,
需要在项目中导入Google map api。默认情况是android某个版本比如android 2.1,现在需要改为对应版本的Google apis,版本要和android版本一致。在默认的情况下Google API是没有的。这个google apis是同版本的android...
调用GoogleMap源码,点击事件在注释里面.zip项目安卓应用源码下载调用GoogleMap源码,点击事件在注释里面.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
NULL 博文链接:https://wj131.iteye.com/blog/674070
React谷歌地图 React组件使用标记渲染Google Map。...import GoogleMap from "react-google-map" import GoogleMapLoader from "react-google-maps-loader" import iconMarker from "./assets/iconMarke
该项目使用 C++ 实现了在 OpenStreetMap 上运行的 A* 路线规划器,类似于 Google 地图等专业路线规划器上使用的路线规划器。 它可以计算并绘制从a点到b点的最短路径。用户输入 x 和 y 介于 0 到 100 之间的两个坐标...
Android应用源码之写的google map api 应用.zip项目安卓应用源码下载Android应用源码之写的google map api 应用.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目...
Google Map 例子源代码~~~~~~~~~~~~~~
editorjs-googlemap Editor.js 谷歌地图内嵌工具特征允许在您的文章中添加谷歌地图预览。安装通过 NPM 安装获取包裹npm i --save-dev editorjs-googlemap 在您的应用程序中包含模块 const GoogleMap = require ( '...
毕设项目,基于google map的拼车网系统,包含数据库,部署说明等。相当完整,需要修改google map 的key。
ECharts使用心得 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个...
google map 自己平时在做gps项目时找到的资源,一些在google map api里面有的那些我也就不发了,我把个人感觉不错的 先发上来。认为好的记得留言下,谢谢 还有个如果谁有经纬度得到地址 显示是这样的 比如数码广场 ...