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轻易 ...

随机推荐

OpenCV学习(30) 轮廓defects
上一篇教程中,我们学习了如何计算轮廓的凸包,其实对一个轮廓而言,可能它的凸包和它本身是重合的,也有可能不是重合的.比如下面左边图像的轮廓本身就是凸包,而右边图像的轮廓则不是.我们可以通过函数bool ...
判断大小端的方法(java和c++)
首先我们给出大小端的定义: 小端:较高的有效字节存放在较高的的存储器地址,较低的有效字节存放在较低的存储器地址. 大端:较高的有效字节存放在较低的存储器地址,较低的有效字节存放在较高的存储器地址. 将 ...
常用sql001_partition by 以及 row_number()和 dense_rank()和rank()区别
create table student ( sid varchar2(10), --学号 sname varchar2(10), --姓名 classid varchar2(10), --班级号 s ...
：Windows下RabbitMQ安装及入门
1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...
Loadrunner视频教程汇总
小布老师视频:测试工具概述,兼LoadRunner介绍 -1-4http://www.boobooke.com/v/bbk1046http://www.boobooke.com/v/bbk1046.z ...
operator++()和operator++(int)的区别
很久以前(八十年代),没有办法区分++和--操作符的前缀与后缀调用.这个问题遭到程序员的报怨,于是C++语言得到了扩展,允许重载increment 和 decrement操作符的两种形式. 然而有一个 ...
申请红帽企业版Linux开发者订阅
导读注册成为开发者计划的成员现在可以得到一套免费的 Red Hat Enterprise Linux 许可证,RHEL 开发套件将为程序员提供一个构建企业应用的稳定发展平台.红帽开发订阅成员还可以免 ...
What's the difference between - (one hyphen) and — (two hyphens) in a command?
bash中看到这样的命令, curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install - ...
perl install-module.pl DateTime 执行无效问题的解决
运行./checksetup.pl,总说DateTime模块需要安装,但是执行提示的perl install-module.pl DateTime 多次也还是说DateTime模块需要安装. 在神奇的 ...
(笔试题)删除K位数字
题目: 现有一个 n 位数,你需要删除其中的 k 位,请问如何删除才能使得剩下的数最大? 比如当数为 2319274, k=1 时,删去 2 变成 319274 后是可能的最大值. 思路: 1.贪心算 ...

Google Map 学习过程中的代码

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

随机推荐

热门专题