Google Maps 基础


创建一个简单的 Google 地图

现在让我们创建一个简单的 Google 地图。

以下是显示了英国伦敦的 Google 地图:

实例

!DOCTYPE html>
html>
head>
script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap async defer>script>

script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
script>
head>

body>
div id=googleMap style=width:500px;height:380px;>div>

body>
html>

尝试一下 »


实例解析

我们以以上实例来解析 Google 地图的创建过程。

应用为什么要声明 HTML5?

大多数浏览器使用 “标准模式” 的 HTML5 文档渲染页面,这就意味着你的应用是兼容各大浏览器的。

另外,如果没有DOCTYPE标签,浏览器则使用混杂模式 (quirks mode)进行渲染页面内容。

提示: 应该注意的是一些”混杂模式 “中的CSS并不能使用于标准模式中。在具体的应用中,所有基于百分比的大小都必须从父块元素继承 。如果在父模块中没有指定大小,默认值为 0 x 0 像素。如果你想使用百分比,可以在 标签中声明,如下所示:


html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}

这个样式声明表明地图模块的(GoogleMap)应
HTML高度为100%。


添加 Google 地图 API Key

在以下实例中第一个 标签中必须包含 Google 地图 API:

将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)

The sensor 参数是必须的,该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。

HTTPS

如果你的应用是安全的HTTP(HTTPS:HTTP Secure)应用,你可以使用 HTTPS 来加载 Google
地图 API:

异步加载

同样我们也可以在页面完全载入后再加载 Google 地图 API。

以下实例使用了 window.onload 来实现页面完全载入后加载 Google 地图 。
loadScript() 函数创建了加载 Google 地图 API 标签。此外在标签的末尾添加了
callback=initialize 参数, initialize()作为回调函数会在API完全载入后执行:

实例

function loadScript()
{
var script = document.createElement(script);
script.type = text/javascript;
script.src = https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize;
document.body.appendChild(script);
}

window.onload = loadScript;

尝试一下 »


定义地图属性

在初始化地图前,我们需要先创建一个 Map 属性对象来定义一些地图的属性:

var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

center(中心点)

中心属性指定了地图的中心,该中心通过坐标(纬度,经度)在地图上创建一个中心点。

Zoom(缩放级数)

zoom 属性指定了地图的 缩放级数。zoom: 0 显示了整个地球地图的完全缩放。

MapTypeId(地图的初始类型)

mapTypeId 属性指定了地图的初始类型。

mapTypeId包括如下四种类型:

  • google.maps.MapTypeId.HYBRID:显示卫星图像的主要街道透明层
  • google.maps.MapTypeId.ROADMAP:显示普通的街道地图
  • google.maps.MapTypeId.SATELLITE:显示卫星图像
  • google.maps.MapTypeId.TERRAIN:显示带有自然特征(如地形和植被)的地图

在哪里显示 Google 地图

通常 Google 地图使用于

元素中:

注意: 地图将以div中设置的大小来显示地图的大小,所以我们可以在

元素中设置地图的大小。


创建一个 Map 对象

var map=new google.maps.Map(document.getElementById(“googleMap”)
,mapProp);

以上代码使用参数(mapProp)在

元素 (id为googleMap) 创建了一个新的地图。

提示:如果想在页面中创建多个地图,你只需要添加新的地图对象即可。

以下实例定义了四个地图实例 (四个地图使用了不同的地图类型):

实例

var map = new google.maps.Map(document.getElementById(googleMap),mapProp);
var map2 = new google.maps.Map(document.getElementById(googleMap2),mapProp2);
var map3 = new google.maps.Map(document.getElementById(googleMap3),mapProp3);
var map4 = new google.maps.Map(document.getElementById(googleMap4),mapProp4);

尝试一下 »


加载地图

窗口载入后通过执行 initialize() 函数来初始化 Map 对象,这样可以确保在页面完全载入后再加载 Google 地图:

google.maps.event.addDomListener(window, ‘load’, initialize);

.wrapper {
/*text-transform: uppercase; */
background: #ececec;
color: #555;
cursor: help;
font-family: “Gill Sans”, Impact, sans-serif;
font-size: 20px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
white-space: nowrap;
font-size: 14px;
text-align: left;
background: #96b97d;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 14px;
pointer-events: none;
position: absolute;

-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.tooltip a {
color:#fff;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px;
content: ” “;
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}

/* CSS Triangles – see Trevor’s post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #96b97d 10px;
bottom: -10px;
content: ” “;
height: 0;
left: 20%;
margin-left: -13px;
position: absolute;
width: 0;
}
.wrapper .tooltip1 {
margin-left: 50px;
padding-top: 0px;
}
/*
.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
*/
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;
}

.lte8 .wrapper:hover .tooltip {
display: block;
}

点我分享笔记

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址

$(function() {
//初始化编辑器

var editor = new Simditor({
textarea: $(‘#mded’),
placeholder: ‘写笔记…’,
upload:false,
// upload: {url:’/api/comment_upload_file.php’,params: null,fileKey: ‘upload_file’,connectionCount: 1,leaveConfirm: ‘文件正在上传,您确定离开?’},
defaultImage: ‘http://www.runoob.com/images/logo.png’,
codeLanguages: ”,
autosave: ‘editor-content’,
toolbar: [ ‘bold’,’code’,’ul’,’ol’,’image’ ]
});
editor.on(‘selectionchanged’, function() {
$(“.code-popover”).hide();
});

// 提交数据
$(“#share_code”).click(function() {
$(“.comment-signarea”).hide();
$(“#commentform”).show();

});
$(“#user_add_note”).click(function() {
$(“.comment-signarea”).hide();
$(“#commentform”).show();
$(‘html, body’).animate({
scrollTop: $(“#respond”).offset().top
}, 200);
});

// 提交笔记
var commentform=$(‘#commentform’);
commentform.prepend(‘

‘);
var statusdiv=$(‘#comment-status’);

commentform.submit(function(e){
e.preventDefault();
var noteContent = editor.getValue();
// console.log(noteContent);
noteContent = noteContent.replace(/

/g,"
");
		noteContent = noteContent.replace(//g,"

");

// 系列化表单数据
var comment_parent = 0;
var is_user_logged_in = $("#is_user_logged_in").val();
var comment_post_ID = 3438;
var _wp_unfiltered_html_comment = $("#_wp_unfiltered_html_comment").val();
var comment = noteContent;
var author = $("#author").val();
var url = $("#url").val();
var email = $("#email").val();
if(isBlank(author) && is_user_logged_in==0) {
statusdiv.html('

请输入昵称!

').show();
} else if(isBlank(email) && is_user_logged_in==0) {
statusdiv.html('

请输入邮箱!

').show();
} else {
// var formdata=commentform.serialize() + "&comment=" + noteContent ;
// 添加状态信息
statusdiv.html('

Processing...

').show();
// 获取表单提交地址
var formurl=commentform.attr('action');

// 异步提交
$.ajax({
type: 'post',
url: formurl,
dataType:'json',
data: {"comment_parent":comment_parent,"comment_post_ID":comment_post_ID, "_wp_unfiltered_html_comment":_wp_unfiltered_html_comment,"comment":comment,"url":url, "email":email,"author":author},
error: function(XMLHttpRequest, textStatus, errorThrown){
statusdiv.html('

数据不完整或表单提交太快了!

').show();
},
success: function(data, textStatus){
if(data.errorno=="0") {
$("#submit").prop('disabled', true);
statusdiv.html('

笔记已提交审核,感谢分享笔记!

').show();
alert('笔记已提交审核,感谢分享笔记!');
}else{
statusdiv.html('

'+data.msg+'

').show();
}
commentform.find('textarea[name=comment]').val('');
}
});
setTimeout(function(){
$("#submit").prop('disabled', false);
}, 10*1000);
}
return false;

});
$(".comt-author").click(function() {
href = $(this).children("a").attr("href");
if(href.indexOf("/note/")!=-1) {
var win = window.open(href, '_blank');
win.focus();
}
});
$(".comt-author").hover(function(){
$(this).children(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
},function(){
$(this).children(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
});
$(".wrapper i").hover(function(){
$(this).siblings(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
},function(){
$(this).siblings(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
});
//Upvote.create('runoobvote-id', {callback: vote_callback});
var ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';
var callback = function(data) {
//console.log($('#runoobvote-id').upvote('upvoted'));
//console.log($('#runoobvote-id').upvote('downvoted'));
//console.log(data);
_vote_action = data.action;
console.log(_vote_action);
id_arr = data.id.split('-');
um_id= id_arr[2];
//console.log(um_id);

var re = /^[1-9]+/;
if (re.test(um_id)) {
var ajax_data = {
_vote_action: _vote_action,
action: "pinglun_zan",
um_id: um_id,
um_action: "ding"
};
//console.log(ajax_data);
$.post(ajaxurl,ajax_data,function(status){
//console.log("Data: " + data + "nStatus: " + status);
});
}
};
if($('#comments').length){
$('.upvotejs').upvote({id: 3438, callback: callback});

$.post(ajaxurl,{"action":"pinglun_zan","postid":3438},function(data){
$(data).each(function(key,value) {
$("#runoobvote-id-" + value.commid + " .upvote").addClass(value.upvotejs_class);
$("#runoobvote-id-" + value.commid + " .downvote").addClass(value.downvote_class);
$("#runoobvote-id-" + value.commid + " .count").addClass(value.upvote_count)
})
},'json');
}

});
function isBlank(str) {
return (!str || /^s*$/.test(str));
}

本文来源于互联网:Google Maps 基础




发表评论

邮箱地址不会被公开。 必填项已用*标注