google map api简单范例geolocation代码及自己注释
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
/* map包含在body中，使用百分比表达时，是根据父容器的大小决定的，所以body html必须写为100% */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
//google.maps.Map类由google api提供，以下为构造，参数分别为div元素和map参数配置（{}中内容），center为设定的经纬度，zoom为地图缩放大小从0-18
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.4912, lng: 120.3119},
zoom: 12
});
//
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
//想要执行地理定位的应用必须支持 W3C 地理定位标准。请注意，以上示例代码通过 W3C navigator.geolocation 属性来确定用户的位置。
if (navigator.geolocation) {
//个人理解，对错未定，方法详细内容见https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/getCurrentPosition
//第一个function作为参数，单postion成功得到时作为唯一参数，后一个function函数作为失败时的唯一函数
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3p-98Zz9a8CiGdwv3oQO57l9Bwh7Le-s&callback=initMap">
</script>
</body>
</html>
---------------------------------------------------
机缘巧合打开了google 的api网站，只是尝试了两个范例就折腾了半天，从中发现了自己的问题：看不懂的函数竟然在那里死扣，无故浪费脑细胞。仔细找找说明书就可以迎刃而解了。也因此找到了js方法及说明的网站MDN，感觉比w3c舒服一点，可能是中文的缘故吧
也越来越喜欢谷歌了，专门去比较了下百度的，从网站设计上就看到了良心，那份对美的追求太对我的胃口了。
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
/* map包含在body中，使用百分比表达时，是根据父容器的大小决定的，所以body html必须写为100% */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
//google.maps.Map类由google api提供，以下为构造，参数分别为div元素和map参数配置（{}中内容），center为设定的经纬度，zoom为地图缩放大小从0-18
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.4912, lng: 120.3119},
zoom: 12
});
//
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
//想要执行地理定位的应用必须支持 W3C 地理定位标准。请注意，以上示例代码通过 W3C navigator.geolocation 属性来确定用户的位置。
if (navigator.geolocation) {
//个人理解，对错未定，方法详细内容见https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/getCurrentPosition
//第一个function作为参数，单postion成功得到时作为唯一参数，后一个function函数作为失败时的唯一函数
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3p-98Zz9a8CiGdwv3oQO57l9Bwh7Le-s&callback=initMap">
</script>
</body>
</html>
---------------------------------------------------
机缘巧合打开了google 的api网站，只是尝试了两个范例就折腾了半天，从中发现了自己的问题：看不懂的函数竟然在那里死扣，无故浪费脑细胞。仔细找找说明书就可以迎刃而解了。也因此找到了js方法及说明的网站MDN，感觉比w3c舒服一点，可能是中文的缘故吧
也越来越喜欢谷歌了，专门去比较了下百度的，从网站设计上就看到了良心，那份对美的追求太对我的胃口了。
评论
发表评论