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

随机推荐

scala编程第17章学习笔记（3）
可变(mutable)集合与不可变(immutable)集合为了更易于完成不可变集合到可变集合的转换,或者反向转换,Scala提供了一些语法糖.纵使不可变集和映射并不支持真正的+=方法,Scala还 ...
SQL-重复记录查询的几种方法
1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * from people where peopleId in (select peopleId from ...
Sql Server-查询一列的数据进行拼接
select convert(VARCHAR(10),memberid) +',' from t_member where teamid = 1009 for xml path('')
jQuery cssHook的经典例子
/*--------------------------- example ------------------------------*/ $.cssHooks.foo = { get: fun ...
你使用 Web 平台安装程序命令行工具
你使用 Web 平台安装程序命令行工具获取的软件由其所有者授权给你.Microsoft 未授予你第三方软件的任何权利.已成功加载主源: https://go.microsoft.com/?linki ...
内有干货！2个人3个月怎样从零完毕一款社区App《林卡》
嘿,大家好.我是不灭的小灯灯,我赌5毛你没听说过我的名字... 好啦.这篇不是鸡汤,是经验吐槽.干货分享! 所以乱七八糟的就不多说了.直接切入正题. 先说下自己的情况背景,眼下尚未毕业.非计算机专业, ...
C#.NET常见问题(FAQ)-无法直接启动带有类库输出类型的项目怎么办
我把Driver.cs文件去掉了一行注释,发现报错右击这个解决方案,选择属性,然后再启动项目中改成MySample 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http:// ...
改进版高速排序（平均复杂度O(NlogN)）
#include<iostream> using namespace std; #define MAXSIZE 21 typedef int SqList[MAXSIZE]; #defin ...
Emmet初探2
关于Emmet Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的 ...
"高可用方案工具包" high availability toolkit 1.2 公布了。version 1.2 新增了负载均衡 load balance 的技术实现
"高可用方案工具包" high availability toolkit 1.2 公布了. version 1.2 新增了负载均衡 load balance 的技术实现. 项目 ...

Google Map 学习过程中的代码

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

随机推荐

热门专题