Google map v3 using simple tool file google.map.util.js v 1.0
/**
* GOOGLE地图开发使用工具
* @author BOONYACHENGDU@GMAIL.COM
* @date 2013-08-23
* @notice 地图容器的(div)z-index不能小于(lt)0,否则鼠标地图无法进行地图操作(可以看到地图,不过你会万分苦恼(you will be Extremely distressed))
*/
(function(){
window.map={};
window.lineFeature=null;
window.markers=[];
window.infoWindow=null;
window.GoogleUtil={};
GoogleUtil={
CONSTANT:{
mapkey:'AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k',
container:"map",
DEFAULT_ZOOM:12,
zoomAddFeature:19,
centerLat:30.65721817,
centerLng:104.06594494,
mapstatus:false,
isnewMap:false,
ZOOM_MAX:19,
ZOOM_MIN:1,
markerSize:32
},
/**
* 控制地图显示范围为中国
*/
mapShowBounds:function(){
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(14.48003790418668, 66.28120434863283),
new google.maps.LatLng(54.44617552862156, 143.71284497363283)
);
google.maps.event.addListener(map, 'dragend',function() {
if (strictBounds.contains(map.getCenter())) return;
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
},
/**
* 控制地图的缩放级别
*/
limitShowMapZoom:function(zoom){
this.CONSTANT.zoomMax=zoom;
var limitedZoom=this.CONSTANT.zoomMax;
google.maps.event.addListener(map, 'zoom_changed',function() {
if (map.getZoom() < limitedZoom) map.setZoom(limitedZoom);
});
},
/**
* 异步加载谷歌API
*/
loadScript:function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?v=3&key="+this.CONSTANT.mapkey+"&sensor=false&libraries=drawing,places";
document.body.appendChild(script);
},
/**
* 谷歌街道
*/
initStreetMap:function(key){
this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
var mapOptions = {
center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
zoom: this.CONSTANT.DEFAULT_ZOOM,
panControl: true,
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
scrollwheel:true,
draggable:true,
overviewMapControl: true,
streetViewControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
}
};
map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions);
},
/**
* 谷歌卫星
*/
initSatelliteMap:function(key){
this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
var mapOptions = {
center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
zoom: this.CONSTANT.DEFAULT_ZOOM,
panControl: true,
zoomControl: true,
mapTypeControl: false,
scrollwheel:true,
draggable:true,
scaleControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
}
};
map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions);
},
/**
* 居中或缩放
*/
centerAndZoom:function(latlng,zoom){
if(latlng) map.setCenter(latlng);
if(zoom) map.setZoom(zoom);
},
/**
* 获取图片对象
*/
getIcon:function(imageUrl,size){
var imgSize=size||32;
var offSize=imgSize/2;
var defaultSize=new google.maps.Size(imgSize, imgSize);
var myIcon={
url: imageUrl,
size: defaultSize,
scaledSize:new google.maps.Size(imgSize,imgSize),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(offSize,offSize)
};
return myIcon;
},
/**
* 创建一个地图bounds对象
* @param points
*/
createBounds:function(points){
if(points) {
var bounds=new google.maps.LatLngBounds();
for ( var i = 0; i < points.length; i++) {
var point=points[i];
if(point){
bounds.extend(point);
}
}
return bounds;
}
return null;
},
/**
* 设置适合的地图边界范围Bounds
* @param points
*/
panToBounds:function(points){
if(points){
var bounds=this.createBounds(points);
if(bounds) map.panToBounds(bounds);
}
},
/**
* 设置合适的覆盖物显示范围(覆盖物聚合)
*/
getViewport:function(points){
if(points){
var bounds=this.createBounds(points);
if(bounds) {
map.fitBounds(bounds);
}
}
}
}; var iterator=0; GoogleUtil.tools={
/**
* 创建信息窗体
*/
createInfoWindow:function(latlng,htmlContent){
var infowindow = new google.maps.InfoWindow({
content: htmlContent,
position:latlng,
disableAutoPan:false
});
return infowindow;
},
/**
* 添加信息窗体
*/
addInfoWindow:function(latlng,htmlContent,isCenter){
if(!infoWindow){
infoWindow=this.createInfoWindow(latlng, htmlContent);
}else{
infoWindow.close();
infoWindow.setPosition(latlng);
infoWindow.setContent(htmlContent);
}
infoWindow.open(map);
if(isCenter) map.setCenter(latlng);
},
/**
* 创建标注
*/
createMarker:function(id,title,point,icon){
var marker = new google.maps.Marker({
position: point,
map: map,
icon:icon,
id:id
});
marker.id=id;
marker.setTitle(title);
return marker;
},
/**
* 添加标注
*/
addMarker:function(id,title,point,icon){
var marker =this.createMarker(id,title,point,icon);
markers.push(marker);
marker.setMap(map);
return marker;
},
/**
* 批量添加标注
*/
addMarkers:function(points){
if(points){
for ( var i = 0; i < points.length; i++) {
var point=points[i];
this.addMarker(point);
}
}
},
/**
* 添加跟踪轨迹线条
*/
addLineFeature:function(id,points,style){
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
//scale: 2,
strokeColor: 'red'
};
var defaultStyle={
path: points,
icons: [{
icon: lineSymbol,
offset: '0%'
}],
map: map
};
lineFeature = new google.maps.Polyline(style||defaultStyle);
lineFeature.id=id;
lineFeature.track=id;
markers.push(lineFeature);
return lineFeature;
},
/**
* 添加折线(轨迹,包括起点、终点)
*/
addLineFeatureAndStartAndEndPoint:function(spObj,points, startImageUrk,endImageUrk,lineStyle){
var len=points.length;
var index =len - 1;
var startPoint = points[0];
var endPoint =points[index];
var startIcon = GoogleUtil.getIcon(startImageUrk,20);
var endIcon = GoogleUtil.getIcon(endImageUrk,20);
this.addMarker("start", spObj.start, startPoint, startIcon);
this.addMarker("end", spObj.end, endPoint, endIcon);
if(len>=2){
var d=(len/2)+"";
d=parseInt(d);
GoogleUtil.centerAndZoom(points[d],12);
}
this.addLineFeature("track_line",points,lineStyle);
},
/**
* 标注动画
*/
markerAnimate:{
dropSetTimeout:{
drop:function(points){
iterator=0;
for (var i = 0; i < points.length; i++) {
setTimeout(function() {
GoogleUtil.tools.markerAnimate.dropSetTimeout.addMarker(points);
}, i * 200);
}
},
addMarker:function(points){
markers.push(new google.maps.Marker({
position: points[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
}
},
/**
* 轨迹操作
*/
track:{
/**
* 添加轨迹线条
*/
addLineTrack:function(points){
if(points){
var lineCoordinates=[];
for ( var i = 0; i < points.length; i++) {
var latlng=new google.maps.LatLng(30.65721817, 104.06594494);
lineCoordinates.push(latlng);
}
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
//scale: 2,
strokeColor: 'red'
};
lineFeature = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '0%'
}],
map: map
});
lineFeature.id="track_line";
}
},
/**
* 轨迹回放操作
*/
operate:{
count:0,
object:null,
addListener:function(){
var count=this.count;
var animate=window.setInterval(function() {
count = (count + 1) % 200;
GoogleUtil.tools.operate.count=count;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
//终点停车
if((count / 2)>=99){
clearInterval(this);
}
}, 20);
this.object=animate;
},
play:function(){
this.count=0;
this.addListener();
},
replay:function(){
this.addListener();
},
pause:function(){
if(this.object)clearInterval(this.object);
},
stop:function(){
if(this.object)clearInterval(this.object);
this.count=0;
}
}
},
getOverlayByNodeId:function(id,value){
for (var i = 0; i < markers.length; i++) {
var marker=markers[i];
if(marker[id]==value){
return marker;
}
}
return null;
},
/**
* 删除或显示覆盖物
*/
deleteOrShowMarkerOverlayers:function(map){
for (var i = 0; i < markers.length; i++) {
if(map==null) markers[i].setVisible(false);
markers[i].setMap(map);
}
if(map==null) markers = [];
},
/**
* 删除轨迹
*/
deleteTrack:function(){
if(lineFeature){
lineFeature.setVisible(false);
lineFeature.setMap(null);
}
},
/**
* 移除所有覆盖物
*/
removeAllOverlays:function(){
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
markers[i].setMap(map);
}
markers = [];
},
/**
* 移除一个覆盖物
*/
removeOverlay:function(propertyName,value){
if(value){
for (var i = 0; i < markers.length; i++) {
var marker=markers[i];
if(marker[propertyName]==value){
markers[i].setVisible(false);
markers[i].setMap(map);
}
}
}
if(propertyName=="track"||propertyName=="track_line"){
if(lineFeature){
lineFeature.setVisible(false);
lineFeature.setMap(null);
lineFeature=null;
}
}
},
/**
* 显示或隐藏标注
*/
isToShowMarkers:function(markers,bool){
if(markers){
for (var i = 0; i < markers.length; i++) {
var marker=markers[i];
marker.setVisible(bool);
}
}
},
/**
* 删除轨迹覆盖物
*/
removeTrackLineWithStartAndEndOverlay:function(){
this.removeOverlay("id", "track_line");
this.removeOverlay("id", "track");
this.removeOverlay("id", "start");
this.removeOverlay("id", "end");
if(lineFeature){
lineFeature.setVisible(false);
lineFeature.setMap(null);
lineFeature=null;
}
this.removeAllOverlays();
}
}; GoogleUtil.event={
/**
* 地图缩放事件
*/
mapZoomChanged:function(markers,zoom){
var listener=google.maps.event.addListener(map, 'zoom_changed', function(event) {
if(map.getZoom()<zoom){
var myMarkers=markers;
GoogleUtil.tools.isToShowMarkers(markers,false);//隐藏标注
markers=myMarkers;
}else{
GoogleUtil.tools.isToShowMarkers(markers,true);//显示标注
}
});
return listener;
},
/**
* 点击标注事件
*/
markerClick:function(marker){
var listener=google.maps.event.addListener(marker, 'click', function(event) {
marker.infoWindow.open(map,marker);
});
return listener;
},
/**
* 移除监听对象
*/
removeListener:function(listener){
google.maps.event.removeListener(listener);
}
}; })();
//window.onload= GoogleUtil.loadScript();
Google map v3 using simple tool file google.map.util.js v 1.0的更多相关文章
- Google map v3 using simple tool file google.map.util.js v 1.1
/** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的z-index不能小于 ...
- Google map v3 using simple tool file google.map.util.js v 1.2
更新添加日志:在1.1的基础上添加marker的文字显示.测距工具. /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 20 ...
- 使用google map v3 api 开发地图服务
Google Map V3 API 学习地址: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/article ...
- Google Maps V3 之 路线服务
概述 您可以使用 DirectionsService 对象计算路线(使用各种交通方式).此对象与 Google Maps API 路线服务进行通信,该服务会接收路线请求并返回计算的结果.您可以自行处理 ...
- Google API v3 设置Icon问题处理
1.查看API实现 //虽然比较符合API实现的思想但这个没法; //会产生Uncaught TypeError: undefined is not a function //google API n ...
- 怎样用Google APIs和Google的应用系统进行集成(2)----Google APIs的全部的RESTFul服务一览
上篇文章,我提到了,Google APIs暴露了86种不同种类和版本号的API.我们能够通过在浏览器里面输入https://www.googleapis.com/discovery/v1/apis这个 ...
- 高效率使用google,国外搜索引擎,国内顺利使用Google的另类技巧,可用谷歌镜像, 可用google学术, 如何使用robots不让百度和google收录
Google良好的搜索和易用性已经得到了广大网友的欢迎,但是除了我们经常使用的Google网站.图像和新闻搜索之外,它还有很多其他搜索功能和搜索技巧.如果我们也能充分利用,必将带来更大的便利.这里我介 ...
- [Google Guava] 强大的集合工具类:java.util.Collections中未包含的集合工具
转载的,有问题请联系我 原文链接 译文链接 译者:沈义扬,校对:丁一 尚未完成: Queues, Tables工具类 任何对JDK集合框架有经验的程序员都熟悉和喜欢java.util.Collecti ...
- Idea运行时Scala报错Exception in thread "main" java.lang.NoSuchMethodError:com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V
一.情况描述 使用idea +scala+spark,运行程序代码如下: package cn.idcast.hello import org.apache.spark.rdd.RDD import ...
随机推荐
- 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置
double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...
- 《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
- 12 个 Linux 进程管理命令介绍
执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的时候,每个进程会被动态得分配系统资源.内存.安全属性和与之相关的状态.可以有多个进程关联到同一个程序,并同时执行不会互相干扰.操作系统 ...
- hbase的thriftserver开启
说明:hbase的thriftserver默认已经编译好,可以使用,不需要跟hadoopthrift一样配置. 要使用Hbase的thrift接口,必须将它的服务启动,命令行为: hbase-deam ...
- 第06讲- DDMS中logcat的使用
1.DDMS使用 )Device选项卡 Device中罗列了Emulator中所有的进程,选项卡右上角那一排按钮分别为:调试进程.更新进程.更新进程堆栈信息.停止某个进程. )Threads选项卡 ...
- JAVA获得系统配置文件的System Properties
来个java获得系统配置文件的 public class SystemProperties { public static void main(String[] args) { Properties ...
- 零拷贝概念 -- linux内核
零拷贝(zero-copy) 备快速网络接口的主要技术. 零拷贝技术通过降低或消除关键通信路径影响速率的操作,降低传输数据的操作系统开销和协议处理开销,从而有效提高通信性能,实现快速传输数据. 零拷贝 ...
- mvc原理和mvc模式的优缺点
一.mvc原理 mvc是一种程序开发设计模式,它实现了显示模块与功能模块的分离.提高了程序的可维护性.可移植性.可扩展性与可重用性,降低了程序的开发难度.它主要分模型.视图.控制器三层. 1.模型 ...
- BZOJ 2882 工艺 (字符串最小循环同构)
题目大意: 给一个长度小于等于30W的数列,求其最小循环同构. 算法讨论: 在自动机长倍长走S后即可.注意这里面是数字,要用map存储. 今天才知道要开四倍长. Codes: #include < ...
- hdu1166 经典线段入门
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...