如何在 Google 地图中添加标记和说明
JS如下:
(function() {
window.onload = function() {
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
zoom: 12,
center: new google.maps.LatLng(40.7257, -74.0047),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.7257, -74.0047),
map: map,
title: 'Click me',
//icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'
});
var infowindow = new google.maps.InfoWindow({
content:'<div class="info">Hello world</div>'
});
infowindow.open(map, marker);
// Adding a click event to the marker
/* google.maps.event.addListener(marker, 'click', function() {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});*/
};
})();
CSS如下:
body
{
font-family:
Verdana,
Geneva,
Arial,
Helvetica,
sans-serif;
font-size:
small;
background:
#fff;
}
#map
{
width:
100%;
height:
500px;
border:
1px
solid
#000;
}
.info
{
width:
250px;
}
HTML如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My first map</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<h1>My first map</h1>
<div id="map"></div>
</body>
</html>
效果如下:
如何在 Google 地图中添加标记和说明的更多相关文章
- 如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
- 如何在google test中指定只运行一部分测试
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在google test中指定只运行一部分测试.
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 如何在Android Studio中添加注释模板信息?
如何在Android Studio中添加注释模板信息? 在开发程序的时候,我们一般都会给文件自动添加上一些关于文件的注释信息,比如开发者的名字,开发的时间,开发者的联系方式等等.那么在android ...
- 如何在RCP程序中添加一个banner栏
前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个bann ...
- 文章翻译:ABP如何在EF core中添加数据过滤器
原文地址:https://aspnetboilerplate.com/Pages/Documents/Articles%5CHow-To%5Cadd-custom-data-filter-ef-cor ...
- [译]如何在Unity编辑器中添加你自己的工具
在这篇教程中你会学习如何扩展你的Unity3D编辑器,以便在你的项目中更好的使用它.你将会学习如何绘制你自己的gizmo,用代码来实现创建和删除物体,创建编辑器窗口,使用组件,并且允许用户撤销他们所作 ...
- 如何在web项目中添加javamelody monitoring 监控。
1.在工程的maven pom中添加依赖javamelody-core <!-- monitoring监控 --><!-- https://mvnrepository.com/art ...
随机推荐
- [转帖]中国新超算彻底告别进口CPU 国产芯片已可与国外抗衡
中国新超算彻底告别进口CPU 国产芯片已可与国外抗衡 蓝天·2017-10-17·本土IC 来源: 观察者网 https://www.laoyaoba.com/html/news/newsdetail ...
- 什么是云解析DNS?
产品概述 云解析DNS(Alibaba Cloud DNS)是一种安全.快速.稳定.可扩展的权威DNS服务,云解析DNS为企业和开发者将易于管理识别的域名转换为计算机用于互连通信的数字IP地址,从而将 ...
- ajax 跨域要点
1.async: false 2.dataType: jsonp 3.返回数据格式.正常格式为{ param1: p1, param2: p2 },而jsonp跨域请求时,多了一个参数 callbac ...
- 【第一季】CH05_FPGA设计Verilog基础(二)Enter a post title
[第一季]CH05_FPGA设计Verilog基础(二) 5.1状态机设计 状态机是许多数字系统的核心部件,是一类重要的时序逻辑电路.通常包括三个部分:一是下一个状态的逻辑电路,二是存储状态机当前状态 ...
- Python 常用内置模块详解
Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...
- hdu 2767 强连通缩点处理加边问题
#include <cstring> #include <cstdlib> #include <cstdio> 缩点的好处就是可以将乱七八糟的有向图 转化为无环的有 ...
- myEclipse10安装以及破解
这里需要下载一个破解补丁 https://pan.baidu.com/s/1ivE2yauZRDdDq8zBxpK06A 可以去网盘里下载, 下载后解压,会有如下文件 然后运行run.bat,会出现这 ...
- IOS 跳转页面
1. 跳转界面,关闭自身 LoginViewController *loginViewController = [[LoginViewController alloc]initWithNibName: ...
- 基于【 springBoot +springCloud+vue 项目】三 || 项目部署
前言 今天所要讲的项目部署,并非正式环境部署,而是作为开发中的测试环境部署.随着项目模块的增多,启动的模块也随之增多,本人的电脑启动四个模块就已经卡的不行了,为了减轻电脑压力,不得不自己学着搭建一个项 ...
- 【php设计模式】代理模式
代理模式就是实现一个类代表另一个类的功能的一种结构性设计模式. 主要解决在直接访问对象时带来的问题,比如说:要访问的对象在远程的机器上.在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或 ...