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

随机推荐

CREATE DATABASE failed
由于环境需要, 故修改SQL Server 2012的默认的数据库的数据文件和日志文件的位置. 如下: 创建数据库, 遭遇报错. 错误信息: A file activation error occur ...
网络结构设计——负载均衡之LVS学习笔记（二）
LVS按个人理解的说就是将一台Linux服务器当作路由器等功能的技术.LVS---Linux虚拟服务器. LVS实现了三种IP负载均衡技术VS/NAT.VS/TUN.VS/DR. 今天简单分享一下我在 ...
为什么空格拷贝到linux 会变成两个
为什么空格拷贝到linux 会变成两个学习了:https://zhidao.baidu.com/question/266438357.html 在vi界面内输入:set paste 然后进行拷贝: ...
防止excel数字变成科学计数法
在网上查了很多资料知道解决办法大概有两个:一是在身份证字段前加个英文单引号,二是设置Excel的格式为文本格式. 我试用过第一种确实可以显示,但是有个“'”号在那里感觉确实不是很好,虽然听说不影响,但 ...
自己的一个js库
https://github.com/sqqihao/nono_framework.git 持续更新,慢慢写着,这样才能成长
Fusioncharts的导出图片訪问官网问题
Fusioncharts3.5使用自带的导出功能,须要訪问官网问题描写叙述:使用fusioncharts自带的exportchart方法来导出图片的时候.要訪问export.api3.fusionc ...
js条件语句之职责链数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Java从零开始学十六(多态)
一.什么是多态多态性是指允许不同类的对象对同一消息作出响应.多态性包括参数化多态性和包含多态性.多态性语言具有灵活.抽象.行为共享.代码共享的优势,很好的解决了应用程序函数同名问题.多态有两种表现形 ...
android 使用AsyncHttpClient框架上传文件以及使用HttpURLConnection下载文件
AsyncHttpClient开源框架android-async-http还是非常方便的. AsyncHttpClient该类通经常使用在android应用程序中创建异步GET, POST, PUT和 ...
Fiddler SessionFlags
Each Session object in Fiddler contains a collection of string flags, in the Session.oFlags[] collec ...

Google Map 学习过程中的代码

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

随机推荐

热门专题