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

 

效果如下:

转载于:https://www.cnblogs.com/my4piano/p/5327140.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418730.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1851)vue之电商管理系统电商系统配置ssh

1登录到码云 2设置 生成公钥 3添加公钥 验证成功

前端学习(1852)vue之电商管理系统电商系统托管码云上

1新建仓库 2执行命令 3添加git add . 3git add files 提交

前端学习(1853)vue之电商管理系统电商系统之git安装

1下载安装包 git官网&#xff1a; https://git-scm.com/download/win git阿里镜像&#xff1a; https://npm.taobao.org/mirrors/git-for-windows/ 2安装 基本傻瓜程序 上图红框内的选项是默认勾选的&#xff0c;建议不要动。绿色框1是决定是否在桌面创建快捷方式的。绿色框…

Beaglebone Black教程Beaglebone Black的引脚分配

Beaglebone Black教程Beaglebone Black的引脚分配 Beaglebone Black的引脚分配 绝大多数的微型开发平台都提供了一些称为GPIO的输入输出端口。这些端口可以让你使用软件和硬件来控制一些电子的东西&#xff0c;每个端口都被赋予了一个特定的功能——模拟或数字。大多数的微控制…

iOS Social框架

现在很多应用都内置“社交分享”功能&#xff0c;可以将看到的新闻、博客、广告等内容分享到微博、微信、QQ、空间等&#xff0c;其实从iOS6.0开始苹果官方就内置了Social.framework专门来实现社交分享功能&#xff0c;利用这个框架开发者只需要几句代码就可以实现内容分享。下…

前端学习(1856)vue之电商管理系统电商系统之安装mysql出现mysql报错:Can’t start server: Bind on TCP/IP port: 通常每个套接字地址(协议/网络地址

2020-07-26T11:44:29.778919Z 0 [ERROR] [MY-010262] [Server] Cant start server: Bind on TCP/IP port: 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。

简单存取款机的实现---控制输入变量的规则

转载于:https://www.cnblogs.com/quanby/p/5335527.html

前端学习(1854)vue之电商管理系统电商系统之安装mysql

本地安装好数据库 source导入命令 source d:/mydb.sql

[原]Jenkins(十二)---jenkins管理员用户无法登陆解决办法Access Denied

/** * lihaibo * 文章内容都是根据自己工作情况实践得出。 *如有错误&#xff0c;请指正 * 版权声明&#xff1a;本博客欢迎转发&#xff0c;但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5337295.html */ 一、问题出现的原因&#xff1a; 如下图&#xff0c;在…

前端学习(1859)vue之电商管理系统电商系统之梳理项目结构

vue ui打开 app.vue <template><div id"app">app根组件</div> </template><script>export default {name: app,} </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: a…

前端学习(1860)vue之电商管理系统电商系统之渲染login组件并且实现路由重定向

vue ui打开 app.vue <template><div id"app"><router-view></router-view></div> </template><script>export default {name: app,} </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-s…

CAEmitterLayer实现粒子效果

在iOS 5中&#xff0c;苹果引入了一个新的CALayer子类叫做CAEmitterLayer。CAEmitterLayer是一个高性能的粒子引擎&#xff0c;被用来创建实时例子动画如&#xff1a;烟雾&#xff0c;火&#xff0c;雨等等这些效果。 CAEmitterLayer看上去像是许多CAEmitterCell的容器&#xf…

前端学习(1861)vue之电商管理系统电商系统之设置背景色并在中央绘制登录盒子

1安装less_loader依赖 2安装less 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) logi…

前端学习(1862)vue之电商管理系统电商系统之绘制默认头像

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1863)vue之电商管理系统电商系统之绘制登录表单区域

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1864)vue之电商管理系统电商系统之绘制登录表单区域带icon的输入框

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1865)vue之电商管理系统电商系统之实现表单的数据绑定

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1866)vue之电商管理系统电商系统之登录退出实现表单的数据验证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…