如何在 Google 地图中添加标记和说明
2016-03-27 21:35
567 查看
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>
效果如下:
(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>
效果如下:
相关文章推荐
- 启动Genymotion模拟器时,显示The virtual device got no IP address
- gone fishing
- HDU--1533--Going Home--KM算法
- Go语言学习(九)文件操作
- 【Algorithm】选择排序法
- 初识google多语言通信框架gRPC系列(二)编译gRPC
- Google Test
- EM算法(Expectation Maximization Algorithm)
- Google Maps API3 之 Hello World
- 搭建golang环境
- LeetCode Algorithms #107 <Binary Tree Level Order Traversal II>
- LeetCode OJ 之Merge TwoSorted Lists 解题报告
- LeetCode OJ 之 GenerateParenthesis解题报告
- 教程: Windows 7、Vista 开启ipv6支持
- 英文歌曲:my heart will go on(我心永恒)
- 文本分类与聚类(text categorization and clustering)
- Golang给目录按时间排序.正则、时间条件搜索文件
- google hosts(2)
- google hosts(2)
- google hosts(2)