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

随机推荐

Objective-C:内存管理的小结
内存管理: 1.OC的对象都是分配在堆里的 Perosn *person = [[Person alloc]init]; Person *person //指针类型的 ...
go语言基础之append扩容特点
1.append扩容特点示例: package main //必须有个main包 import "fmt" func main() { //如果超过原来的容量,通常以2倍容量扩容 ...
SQL Server中的database checkpoint
基于性能方面的考虑, 数据库引擎会在内存(buffer cache)中执行数据库数据页(pages)的修改, 不会再每次做完修改之后都把修改了的page写回到磁盘上. 更准确的说, 数据库引擎定期在每 ...
iOS开发-多线程之GCD(Grand Central Dispatch)
Grand Central Dispatch(GCD)是一个强有力的方式取执行多线程任务,不管你在回调的时候是异步或者同步的,可以优化应用程序支持多核心处理器和其他的对称多处理系统的系统.开发使用的过 ...
Spark Streaming updateStateByKey案例实战和内幕源码解密
本节课程主要分二个部分: 一.Spark Streaming updateStateByKey案例实战二.Spark Streaming updateStateByKey源码解密第一部分: upda ...
Cognos报表展示图片小技巧
场景:在销售行业,比如手机,服装行业,如果仅仅的显示数字.文字那就显得不是很生动了,例如可以显示一下图片,那种样子的产品受大家喜欢. 样例1:在报表头都喜欢加上一些公司的logo,让报表看上去专业点. ...
js 特效
栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1->菜单4 栏目2 栏目2->菜单1 栏目2->菜单2 栏目2->菜单3 栏目2-> ...
（LeetCode 83）Remove Duplicates from Sorted Lists
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
redis学习笔记——主从同步（复制）
在Redis中,用户可以通过执行SLAVEOF命令或者设置slaveof选项,让一个服务器去复制(replicate)另一个服务器,我们称呼被复制的服务器为主服务器(master),而对主服务器进行复 ...
iOS 获取流量
#include <arpa/inet.h> #include <net/if.h> #include <ifaddrs.h> #include <net/i ...

Google Map 学习过程中的代码

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

随机推荐

热门专题