在Google Maps 上点击标签后显示说明
JS如下：
(function() {
window.onload = function() {
// Creating an object literal containing the properties
// you want to pass to the map
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array which will contain the coordinates
// for New York, San Francisco and Seattle
var places = [];
// Adding a LatLng object for each city
places.push(new google.maps.LatLng(40.756, -73.986));
places.push(new google.maps.LatLng(37.775, -122.419));
places.push(new google.maps.LatLng(47.620, -122.347));
// Creating a variable that will hold the InfoWindow object
var infowindow;
// Looping through the places array
for (var i = 0; i < places.length; i++) {
// Adding the markers
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: 'Place number '
+ i
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow
infowindow.setContent('Place number '
+ i);
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
})(i, 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 Maps 上点击标签后显示说明的更多相关文章
- 在Google Maps 上点击标签显示说明并保持不消失
JS如下: (function() { window.onload = function() { // Creating an object literal containin ...
- MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白
MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVVAxOT ...
- HTML5获取地理位置信息并在Google Maps上显示
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- google浏览器打开新的标签页显示http://www.google.com.hk/url?sa=p&hl=zh-CN&……
chrome的版本:51.0.2704.106 m使用该版本的chrome后,每次打开新标签页,都会提示“无法访问此网站”.并自动跳转到一个地址“http://www.google.com.hk/ur ...
- swift 如何实现点击view后显示灰色背景
有这样一种场景,当我们点击view的时候,需要过0.几秒显示一个灰色或者别的颜色的背景 用button来实现,只有按下去的时候才会出现,往往在快速按下,快速抬起的时候是看不出这个变化的 下边是解决方案 ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google maps library的使用
公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置 但是google marker使用过程中也有个问题,就是如果在goo ...
- ［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法
在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎 ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
随机推荐
- nginx+uwsgi02---django部署（推荐）
参考 https://blog.csdn.net/weixin_39198406/article/details/79277580 https://www.cnblogs.com/alex3714/ ...
- Centos7 添加开机启动服务
1.在/usr/lib/systemd/system/下创建服务脚本xxx.service,格式如下: [Unit] Description=Scrapyd After=syslog.target n ...
- [翻译] 深入浅出Go语言调度器：第一部分 - 系统调度器
目录 译者序 序 介绍 系统调度器 执行指令 Figure 1 Listing 1 Listing 2 Listing 3 线程状态 任务侧重 上下文切换 少即是多 寻找平衡 缓存行 Figure 2 ...
- Zookeeper快速开始
具体部署流程: #下载 wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/current/apache-zookeeper-3.5. ...
- not or and 的优先级是不同的
not or and 的优先级是不同的: not > and > or 请用最快速度说出答案: not 1 or 0 and 1 or 3 and 4 or 5 and 6 or 7 an ...
- Ubuntu 提示sudo: java: command not found解决办法
ubuntu下运行sudo Java 时提示“sudo: java: command not found”.在网上找了,其中很多方法都提示要修改/etc/profile的配置,或是修改/etc/env ...
- 【bitset】Kth Minimum Clique
#include<bits/stdc++.h> #define B bitset<105> using namespace std; typedef long long ll ...
- 使用jenkins 构建时，字体图标报错的问题。
最近一个项目开发中,我们在本地进行项目打包时,可以正常打包. 但是在使用jenkins构建时,一直报错,提示无法加载字体文件.can't resolve module '....xxxx.TTF ' ...
- CentOS7安装配置redis5集群
一.服务器准备 本文准备了3台服务器 , 分别是 172.18.0.231 172.18.0.232 172.18.0.233 每台运行2个redis实例, 端口分别为7000 7001 ,即总共6个 ...
- MySQL create table语法中的key与index的区别
在create table的语句中,key和index混淆在一起,官方手册中的解释是这样: KEY is normally a synonym for INDEX. The key attribute ...