最近看到朋友正在用谷歌地圖做定位項目，看到地圖實作的效果比較炫酷，很是喜歡，就模仿學習其中常用的一些效果。
我們經常寫的就是定位系統。點選marker标記彈出框。但是谷歌地圖彈出的框可能和我們的設計圖不符合，這時候我們就要認為修改設計圖來實作效果。
1.谷歌地圖的基本使用
實作效果
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>擷取地圖縮放級别</title>
<style>
body,
html {
height: %;
width: %;
margin: ;
padding: ;
}
</style>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script src="./lib/jquery.min.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyD4B4IuS7uIJvBMvgptrSBK_yaoF6rTJYE&language=EN"></script>
<!-- 中國版 -->
<!--正常版，需FQ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp"></script> -->
<script>
var mapType = google.maps.MapTypeId.ROADMAP;
var lat = , lng = , zoom = ;
var mapOptions = {
center: {
lat: ,
lng: -
},
zoom: ,
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{ "saturation": }, { "color": "#000000" }, { "lightness": }]
}, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#000000" }, { "lightness": }] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": }, { "weight": }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": }, { "weight": }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": }] }]
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions); //建立谷歌地圖
// var marker = new google.maps.Marker({
// map: map,
// position: new google.maps.LatLng(lat, lng)
// });
function HouseMarker(latlng, map, args) {
this.latlng = latlng; //for google map
this.setMap(map); //for google map
this.args = args; //自定義參數
}
HouseMarker.prototype = new google.maps.OverlayView();
HouseMarker.prototype.draw = function () {
//建立一個div，把marker和詳情框寫在一起，友善後面的展示和隐藏
$div = $("<div class='marker-container'>" +
" <div class='marker'></div>" +
" <div class='detail-info'></div>" +
"</div>");
//将div添加到它的dom元素裡面
var panes = this.getPanes();
var div = $div[];
panes.overlayImage.appendChild(div);
//根據經緯度計算div的像素位置
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
div.style.left = (point.x - ) + 'px'; //減掉marker寬度的一半，居中
div.style.top = (point.y - ) + 'px'; //減掉marker高度的一半，居中
};
// var locationMarker = {
// path: './img/green.svg'
// }
var marker = new google.maps.Marker({
map: map,
// icon: './img/green.svg',
position: new google.maps.LatLng(lat, lng)
});
var infowindow = new google.maps.InfoWindow({ content: "北京市天安門" }); //建立一個InfoWindow
infowindow.open(map, marker); //把這個infoWindow綁定在標明的marker上面
//使用谷歌地圖定義的事件，給這個marker添加點選事件
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
</script>
</body>
</html>
2.谷歌地圖自定義标記以及點選事件
實作效果
多個标記的話，隻展示一個，這時候我們要用數組儲存起來，然後通過點選對象區分是誰，然後用我們存儲的目前點選事件的索引來判斷是否是我們現在點選對象。也即是說我們要存儲起來三個值，marker标記，infowindow彈出框，還有存在目前彈框的對象索引值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地圖研究</title>
<style>
body,
html {
height: %;
width: %;
margin: ;
padding: ;
}
.gm-style div div div div div div:last-child {
background-color: rgba(, , , ) !important;
}
.gm-style div div div div div div:nth-child(2) {
background-color: rgba(, , , ) !important;
box-shadow: rgba(, , , ) px px px px !important;
}
.gm-style div div div div div div:nth-child(1) div {
/* display: none !important; */
}
.gm-style .gm-style-iw .marker-container {
width: px;
height: px;
background-color: rgba(, , , .) !important;
z-index: ;
color: #00a2ff;
border: px solid rgba(, , , .);
position: relative;
}
.marker {
width: %;
height: %;
position: absolute;
left: %;
transform: translateX(-%);
top: %;
background: url('./img/house.jpg');
}
.detail-info {
width: %;
position: absolute;
left: %;
transform: translateX(-%);
top: %;
}
.detail-info p {
margin: ;
margin-bottom: px;
}
.detail-info span {
display: block;
}
.statusAddress div {
float: left;
width: %;
}
.lastTime,
.statusAddress {
font-size: px;
}
.detail-info span:last-child {
color: rgba(, , , .);
}
</style>
</head>
<body>
<div id="map" style="width:70%;height:100%"></div>
<script src="./lib/jquery.min.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyD4B4IuS7uIJvBMvgptrSBK_yaoF6rTJYE&language=EN"></script>
<!-- 中國版 -->
<!--正常版，需FQ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp"></script> -->
<script>
var mapType = google.maps.MapTypeId.ROADMAP;
var lat = ,
lng = ,
zoom = ;
var arr = [];
var mapOptions = {
center: {
lat: ,
lng: -
},
zoom: ,
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"saturation":
},
{
"color": "#1F2B37"
},
{
"lightness":
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#1F2B37"
}, {
"lightness":
}]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}, {
"weight":
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}, {
"weight":
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#1F2B37"
}, {
"lightness":
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#131d27"
}, {
"lightness":
}]
}
]
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions); //建立谷歌地圖
var arr = [, ];
var marker = [];
var infowindow = [];
var currentIndex = -;
arr.forEach(function (item, index) {
marker[index] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat + index * , lng - index * )
});
//建立一個InfoWindow
// infowindow.open(map, marker); //把這個infoWindow綁定在標明的marker上面
//使用谷歌地圖定義的事件，給這個marker添加點選事件
infowindow[index] = new google.maps.InfoWindow({
content: "<div class='marker-container'>" +
" <div class='marker'></div>" +
" <div class='detail-info'><p class='deviceName'>heihei</p ><p class='lastTime'><span>_/_</span><span>last time</span></p ><div class='statusAddress'><div class='saLeft'><span>Alarm</span><span>status</span></div><div class='saRight'><span>120.123/30.123</span><span>address</span></div></div></div>" +
"</div>"
});
})
// 點選事件
arr.forEach(function(item,index){
google.maps.event.addListener(marker[index], "click", function () {
var flag = currentIndex === index;
if(!flag){
infowindow[index].open(map, marker[index]);
if(currentIndex >= ){
infowindow[currentIndex].close(map, marker[currentIndex]);
}
currentIndex = index;
}else{
infowindow[currentIndex].close(map, marker[currentIndex]);
currentIndex = -
}
});
})
// google.maps.event.addListener(marker, 'mouseover', function() {
// infowindow.open(map, marker);
// });
// google.maps.event.addListener(marker, 'mouseout', function() {
// infowindow.close(map, marker);
// });
function HouseMarker(latlng, map, args) {
this.latlng = latlng; //for google map
this.prototype.setMap(map); //for google map
// this.map = map,
this.args = args; //自定義參數
}
// console.log(google.maps)
// HouseMarker.prototype = new google.maps.OverlayView();
HouseMarker.prototype = google.maps.OverlayView;
// HouseMarker.prototype.draw = function () {
// //建立一個div，把marker和詳情框寫在一起，友善後面的展示和隐藏
// $div = $("<div class='marker-container'>" +
// " <div class='marker'></div>" +
// " <div class='detail-info'></div>" +
// "</div>");
// console.log(this.prototype,'gaga');
// console.log(this.prototype.getPanes)
// console.log(this.prototype.getPanes())
// //将div添加到它的dom元素裡面
// var panes = this.prototype.getPanes();
// console.log(panes)
// var div = $div[0];
// panes.overlayImage.appendChild(div);
//根據經緯度計算div的像素位置
// var point = this.prototype.getProjection().fromLatLngToDivPixel(this.latlng);
// div.style.left = (point.x - 20) + 'px'; //減掉marker寬度的一半，居中
// div.style.top = (point.y - 20) + 'px'; //減掉marker高度的一半，居中
// };
// console.log(HouseMarker.prototype)
// var marker = new HouseMarker('39.915168,116.403875',map);
// marker.draw();
// console.log(marker.draw())
// var locationMarker = {
// path: './img/green.svg'
// }
</script>
</body>
</html>