在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>

?

效果如下:

时间: 2024-10-13 16:04:08

在Google Maps 上点击标签后显示说明的相关文章

在Google Maps 上点击标签显示说明并保持不消失

JS如下: (function() { ????window.onload = function() { ????????// Creating an object literal containing the properties ????????// we want to pass to the map ????????var options = { ????????????zoom: 3, ????????????center: new google.maps.LatLng(37.09,

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状如下: 解决方案如下: MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,布布扣,bubuko.com

【技术】点击“更多”后 显示/隐藏

效果图一: 效果图二: 点击“更多”后隐藏<div class="more-wrap"> <p class="more">点击此处更多</p> <p>内容在该层上面</p> <p>内容在该层上面</p> <p>内容在该层上面</p> <p>内容在该层上面</p> <p>内容在该层上面</p> <p>内

textview显示三行多余的隐藏点击按钮后显示

首先布局 因为我这个是列表所以这只是一个item <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <Re

My97DatePicker日历的平面显示,不是文本框点击事件后显示

二. 功能及示例 2. 特色功能 平面显示 日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上 示例2-1 平面显示演示 <div id="div1"></div> <script> WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}}) </script>

laravel 文章去除html标签后显示

使用编辑器存入数据库的文章都带有html标签,标签是用来对文章格式的排版 我在网页上要显示去除html标签,使用laravel自带方法 {!!  文章  !!} 这样文章的html标签可以自己转义. 文章列表页面,不能让文章内容全部显示,所以限制字符数,使用laravel自带方法 str_limit ( $post , 100 , ... ) 第一个参数为文章内容,第二个为显示多个少个字符,第三个参数为超出的字符隐藏,用这个来显示. 原文地址:https://www.cnblogs.com/mu

Google Maps API V3 之绘图库 信息窗口

绘图库 本文档中的概念仅适用于 google.maps.drawing 库中提供的地图项.默认情况下,系统在加载 Maps JavaScript API 时不会加载该库,您必须使用 libraries 引导程序参数进行明确指定. http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing DrawingManager 类提供了一个图形界面,以供用户在地图上绘制多边形.矩形.折线.圆形和标记.DrawingManage

Google maps library的使用

公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置 但是google marker使用过程中也有个问题,就是如果在google 地图上标注了大量的Marker, 一个是容易导致google地图加载速度变慢,另一个是marker太多,地图就很 不好看,甚至是看不清楚了,因为你会发现地图就被这些Marker占据了 在Google Maps API中,提供了集群来解决这个问题,也就是MarkerClusterer, 我们之

google maps js v3 api教程(2) -- 在地图上添加标记

原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图之后,怎么往地图上添加标记呢? google为我们提供了google.maps.Marker这个构造函数,来创建标记. 这个函数有一个object类型的可选参数,常用的成员有: { position: new google.maps.LatLng(lat,lng), //标记的经纬度 map:map