Google Map 学习过程中的代码

<!DOCTYPE html>
<html>
<head>
<title>Simple click event</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#hiddenUI , #showUI , #delUI , #addUI , #removePathUI{
background-color: #fff;
border: 2px solid #fff;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
cursor: pointer;
float: left;
margin-bottom: 22px;
text-align: center;
}
#hiddenText , #showText , #delText , #addText , #removePathText{
color: rgb(25,25,25);
font-family: Roboto,Arial,sans-serif;
font-size: 15px;
line-height: 25px;
padding-left: 5px;
padding-right: 5px;
}
#showUI , #delUI , #addUI ,#removePathUI{
margin-left: 5px;
}
</style>

</head>
<body>
<div id="map"></div>
<script>
// 存储marker
var markers = [];
// marker范围
var bounds = {
north: 36.104595,
south: 36.063254,
east: 120.349731,
west: 120.428695
};
// 具体范围
var lngSpan = bounds.east - bounds.west;
var latSpan = bounds.north - bounds.south;

// 设置地图样式
var styledMap = new google.maps.StyledMapType(styles,
{name: "自定义Map"});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: qingdao,
rotateControl: true, // 旋转控件只在放大到一定比例时才可以使用
// mapTypeId : google.maps.MapTypeId.SATELLITE,// 显示卫星地图
mapTypeId : google.maps.MapTypeId.ROADMAP, // 道路地图
heading: 180 // 表示偏离北方的角度
});
// 自定义地图样式
var mapOptions = {
zoom: 12,
center: qingdao,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
// 对地图重新设置
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);

// 显示45度图像 0 为不显示
map.setTilt(45);
// 设置样式
map.mapTypes.set('map_style', styledMap);
// map.setMapTypeId('map_style');

// 设置地图样式
// map.setOptions({styles: styles});

var marker = new google.maps.Marker({
position: qingdao,
// map: map, 可是通过 marker.setMap(map);来显示
title: 'hello marker'
});

// 设置显示marker
// marker.setMap(map); // 设置为空为不显示

function Control(controlDiv, map) {

// 隐藏按钮
var hiddenUI = document.createElement('div');
hiddenUI.id = 'hiddenUI';
hiddenUI.title = 'Click to hidden all marker';
controlDiv.appendChild(hiddenUI);

// Set CSS for the control interior.
var hiddenText = document.createElement('div');
hiddenText.id = 'hiddenText';
hiddenText.innerHTML = '隐藏标记';
hiddenUI.appendChild(hiddenText);

// 显示按钮
var showUI = document.createElement('div');
showUI.id = 'showUI';
showUI.title = 'Click to show all marker';
controlDiv.appendChild(showUI);

var showText = document.createElement('div');
showText.id = 'showText';
showText.innerHTML = '显示标记';
showUI.appendChild(showText);

// 删除按钮
var delUI = document.createElement('div');
delUI.id = 'delUI';
delUI.title = 'Click to delete all marker';
controlDiv.appendChild(delUI);

var delText = document.createElement('div');
delText.id = 'delText';
delText.innerHTML = '删除标记';
delUI.appendChild(delText);

// 添加标记按钮
var addUI = document.createElement('div');
addUI.id = 'addUI';
addUI.title = 'Click to delete all marker';
controlDiv.appendChild(addUI);

var addText = document.createElement('div');
addText.id = 'addText';
addText.innerHTML = '添加标记';
addUI.appendChild(addText);

// 移除线路按钮
var removePathUI = document.createElement('div');
removePathUI.id = 'removePathUI';
removePathUI.title = 'Click to delete path';
controlDiv.appendChild(removePathUI);

var removePathText = document.createElement('div');
removePathText.id = 'removePathText';
removePathText.innerHTML = '去除路线';
removePathUI.appendChild(removePathText);

// 隐藏所有标记
hiddenUI.addEventListener('click', function() {
setMapOnAll(null);
});
// 显示所有标记
showUI.addEventListener('click', function() {
setMapOnAll(map);
});
// 清除所有标记
delUI.addEventListener('click', function() {
setMapOnAll(null);
markers = [];
});
// 添加一个随机标记
addUI.addEventListener('click', function() {
randomMarker(map);
});
// 去除路线
removePathUI.addEventListener('click', function() {
flightPath.setMap(null);
workStart.setMap(null);
workEnd.setMap(null);
})

}
var centerControlDiv = document.createElement('div');
var centerControl = new Control(centerControlDiv, map);
// centerControlDiv.index = 1;
centerControlDiv.style['margin-top'] = '10px';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

// 划折线
var flightPlanCoordinates = [
{lat: 36.075620815001415, lng: 120.43020844459534},
{lat: 36.074025246504746, lng: 120.4285454750061},
{lat: 36.069949462636, lng: 120.43118476867676},
{lat: 36.06604691846644, lng: 120.42285919189453},
{lat: 36.074025246504746, lng: 120.4139757156372},
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

var workStart = new google.maps.Marker({
position: flightPlanCoordinates[0],
label: "起",
title: "上班起点",
map: map
});
var workEnd = new google.maps.Marker({
position: flightPlanCoordinates[(flightPlanCoordinates.length-1)],
label: "终", // label 只显示第一个字符
title: "上班终点",
map: map
});

// 绘制多边形
var triangleCoords = [
{lat: 36.06602136399105, lng: 120.35249282982409},
{lat: 36.082132409147086, lng: 120.42076576221541},
{lat: 36.10016285436, lng: 120.3873546955059},
{lat: 36.06602136399105, lng: 120.35249282982409},
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#32CD32',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#3CB371',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

// 绘制矩形
var rectangle = new google.maps.Rectangle({
draggable: true, // 是否可拖动
editable: true, // 是否可编辑
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: 36.114595,
south: 36.104595,
east: 120.369731,
west: 120.349731
}
});
// 绘制圆形
var cityCircle = new google.maps.Circle({
draggable: true, // 是否可拖动
editable: false, // 是否可编辑
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: qingdao,
radius: 600 // 单位米
});

// var marker = new google.maps.Marker({
// position: myLatlng,
// map: map,
// title: 'Click to zoom'
// });

// map.addListener('center_changed', function() {
// // 3 seconds after the center of the map has changed, pan back to the
// // marker.
// window.setTimeout(function() {
// map.panTo(marker.getPosition());
// }, 3000);
// });

// map.addListener('zoom_changed', function(){
// alert('当前坐标：'+JSON.stringify(myLatlng)+'\n缩放级别：'+map.getZoom());
// });

// marker.addListener('click', function() {
// map.setZoom(8);
// map.setCenter(marker.getPosition());
// });

// 设置窗口
var infowindow = new google.maps.InfoWindow({
content : "<p>改变缩放级别</p>",
position : qingdao
});
// 开启窗口
infowindow.open(map);
// 添加缩放监听事件
map.addListener('zoom_changed',function() {
infowindow.setContent('zoom: '+map.getZoom());
});

// map.addListener('click', function(e) {
// var latLng = e.latLng;

// // 添加Dom监听事件
// // var listener = google.maps.event.addDomListener(map, 'click', function() {
// // 点击后移除
// // var listener = google.maps.event.addDomListenerOnce(map, 'click', function() {
// // window.alert('坐标：'+latLng);
// // });
// // 删除监听事件
// // google.maps.event.removeListener(listener);
// // 从一个特定实例中删除所有侦听器
// // google.maps.event.clearInstanceListeners(map);

// // 添加标记
// placeMakerAndPanTo(latLng, map);

// });

// 绘图监听事件
map.addListener('click',addLatLng);

poly = new google.maps.Polyline({
draggable: true, // 是否可拖动
editable: true, // 是否可编辑
strokeColor: '#00FA9A',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);

}
// 绘制线路
var poly;
function addLatLng(event) {
var path = poly.getPath();
path.push(event.latLng);
}

// 四舍五入
function ForDight(Dight,How){
Dight = Math.round(Dight*Math.pow(10,How))/Math.pow(10,How);
return Dight;
}
// label显示
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

// 添加标记
function placeMakerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
draggable: true,// 标记可移动
animation: google.maps.Animation.DROP,//掉下来效果 BOUNCE 反弹效果
label: labels[labelIndex++ % labels.length],//取余数显示
// icon: url, 用自定义图片显示
map: map
});
//添加到数组
markers.push(marker);
map.panTo(latLng);
// var changeLatLng = JSON.stringify(latLng);
// console.log(changeLatLng[0]);
var infowindow = new google.maps.InfoWindow();
marker.addListener('click', function() {
infowindow.setContent("坐标：" + latLng);
infowindow.open(marker.get('map'),marker);
});

}
// 设置标记
function setMapOnAll(map) {
for(var i = 0; i < markers.length; i++){
markers[i].setMap(map);
}
}
// 随机降落
function randomMarker(map) {
var marker = new google.maps.Marker({
position:{
lat: bounds.south + latSpan * Math.random(),
lng: bounds.west + lngSpan * Math.random()
},
draggable: true,// 标记可移动
animation: google.maps.Animation.BOUNCE,//掉下来效果 BOUNCE 反弹效果
map: map
});
markers.push(marker);

// 显示坐标
var infowindow = new google.maps.InfoWindow({
content: '坐标：'+marker.getPosition()
});
marker.addListener('click', function() {
infowindow.open(marker.get('map'),marker);
});
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0DE981xQTW4qS9XKyqL-Ay_ImoKlHlc8&callback=initMap" async defer>
</script>
</body>
</html>

Google Map 学习过程中的代码的更多相关文章

Google Map API Version3 ：代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图通过代添加和删除mark标 ...
Google Map API 使用总结
Google Map API (一):显示一个最基本的地图 1 实现一个地图:<head>中引用: <script type="text/javascript" ...
房产地图google map的初步应用点滴.2)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...
ArcGIS for Flex中引入google map作底图
上篇文章到在ArcGIS View中引入google map,这里讲ArcGIS for Flex中引入google map作底图. 同样道理,以google map作底图,需要编写继承自TiledM ...
Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解
在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...
如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑收藏在你 ...
Google Map API V3开发（6）代码
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
ArcGIS Viewer for Flex中引入google map作底图
在ArcGIS Viewer for Flex开发中,经常需要用到google map作为底图,我们不能通过ArcGIS Viewer for Flex - Application Builder轻易 ...
ArcGIS Viewer for Flex中引入google map作底图 (转)
在ArcGIS Viewer for Flex开发中,经常需要用到google map作为底图,我们不能通过ArcGIS Viewer for Flex - Application Builder轻易 ...

随机推荐

利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
BZOJ 3732 Network Link-Cut-Tree (我是认真的！！
题目大意:给定一个n个点m条边的无向连通图.k次询问两点之间全部路径中最长边的最小值 LCT的裸题! 首先维护一个动态的最小生成树,然后每次增加边时删除两点间路径上权值最大的边.最后询问时直接求x到y ...
Oracle中的字符处理方法
向左补全字符串 lpad(字段名,填充长度,填充的字符) ,') from dual; 向右补全字符串 rpad(字段名,填充长度,填充的字符) ,') from dual; 返回字符串小写 sele ...
Linux-cpu分析-vmstat
转载:https://blog.csdn.net/ty_hf/article/details/63394960 一. 前言为了更方便的理解本篇内容含义,所以请最好看看如下繁琐的概念,更容易理解. 没 ...
linux time 命令详解
用途说明time命令常用于测量一个命令的运行时间,注意不是用来显示和修改系统时间的(这是date命令干的事情).但是今天我通过查看time命令的手册页,发现它能做的不仅仅是测量运行时间,还可以测量内存 ...
本地文件夹变远程仓库并且提交Github
//初始化本地仓库 $ git init Initialized empty Git repository in C:/Users/root/Desktop/vue-music/.git/ root@ ...
jquery选中以什么开头的元素
$("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择
java 将Map拷贝到另一个Map对象当中
java 将Map拷贝到另一个Map对象当中 CreateTime--2018年6月4日09点46分 Author:Marydon 1.需求说明将一个MapA对象中所有的键值对完全拷贝到另一个M ...
SoapUI 测试接口演示
SoapUI 测试接口演示 CreateTime--2018年4月2日15:54:05 Author:Marydon 以webservice为例 1.安装: SoapUI-x64-5.4.0-E ...
Eclipse 如何创建Web项目
Eclipse 如何创建Web项目 CreateTime--2018年3月8日16:43:33 Author:Marydon 第一步: 右键-->New-->Dynamic Web P ...

Google Map 学习过程中的代码

Google Map 学习过程中的代码的更多相关文章

随机推荐

热门专题