您的位置：首页 > Web前端 > JavaScript

JSのGoogle Map

2016-02-15 23:28 573 查看

JSのGoogle Map

实例展示

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<noscript>Your browser does not support JavaScript pluin</noscript>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">

var locationSpan = document.getElementById("location");

// 获取位置
function getLocation() {
// HTML5 navigator对象，检查浏览器是否支持
if (navigator.geolocation) {
// 获取当前位置，执行回调函数showPosition, showError
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
locationSpan.innerHTML = "Sorry, geolocation is not supported by this browser.";
}
}

// 成功回调函数，参数position包含位置信息
function showPosition(position) {
// 获取经纬度
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlon = latitude + "," + longitude;
console.log(latlon);

// 根据Google API获得size = 400x300&zoom = 14的静态图片
var img_url =
"https://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "&zoom=14&size=400x300";
document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "' />";
// 执行操作地图信息
initialize(latitude, longitude);
}

// 失败回调函数
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
locationSpan.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
locationSpan.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
locationSpan.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
locationSpan.innerHTML = "An unknown error occurred."
break;
}
}

// 操作地图
function initialize(latitude, longitude) {
// 中心位置对象
var positionCenter = new google.maps.LatLng(latitude, longitude);
// 标记对象
var markerObj = new google.maps.Marker({
position: positionCenter, // 中心位置
animation: google.maps.Animation.BOUNCE // 动态
});
// map对象参数信息
var mapProperty = {
center: positionCenter, // 中心位置
zoom: 14, // 比例
mapTypeId: google.maps.MapTypeId.ROADMAP, // 地图显示类型
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
};

// map对象
var mapObj = new google.maps.Map(document.getElementById("googleMap"), mapProperty);
// 标记
markerObj.setMap(mapObj);

// 信息窗口
var infoWindow = new google.maps.InfoWindow({
content: "Your position."
});
// 添加事件
google.maps.event.addListener(markerObj, 'click', function() {
infoWindow.open(mapObj, markerObj);
mapObj.setZoom(18);
mapObj.setCenter(markerObj.getPosition());
});

google.maps.event.addListener(mapObj, 'click', function(event) {
placeMarker(event.latLng, mapObj);
});
// 圆对象
var circleObj = new google.maps.Circle({
center: positionCenter,
radius: 500,
strokeColor: '#CCDD99',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#CCDD99',
fillOpacity: 0.4,
editable: true
});
circleObj.setMap(mapObj); // 画圆

// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new definedControl(homeControlDiv, mapObj);

//  homeControlDiv.index = 1;
mapObj.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

function placeMarker(location, mapObj) {
var markerObj = new google.maps.Marker({
position: location,
map: mapObj
});
var infoWindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infoWindow.open(mapObj, markerObj);
}

// define control button
function definedControl(controlDiv, mapObj) {
var london = new google.maps.LatLng(51.508742,-0.120850);

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);

var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);

google.maps.event.addDomListener(controlUI, 'click', function() {
mapObj.setCenter(london)
});
}
</script>
<style type="text/css">
#mapholder, #googleMap {
width: 400px;
height: 300px;
border:#CCDD99 1px solid;
}
#operate {
text-align: left;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="" style="margin: 0 auto">
<div id="mapholder"></div>
<div id="googleMap"></div>
</div>
<div id="operate">
<button type="button" onclick="getLocation()">Try it</button>
</div>
</body>
</html>


联系我

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航