php获取谷歌地图api接口,谷歌地图 API 开发之信息窗口
信息窗口
简介
InfoWindow 在地图上方给定位置的弹出窗口中显示内容(通常为文本或图像)。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。
通常,您会将信息窗口附加到标记,但您也可以将信息窗口附加到特定纬度/经度,如下面的“添加信息窗口”部分所述。
添加信息窗口
InfoWindow 构造函数采用了 InfoWindowOptions 对象字面量,后者为显示信息窗口指定了一组初始参数。
InfoWindowOptions 对象字面量包含以下字段:
content:其中包含要在信息窗口中显示的本文字符串或 DOM 节点。
pixelOffset:其中包含从信息窗口的顶部到信息窗口锚定位置的偏移量。实际上,您不应也无需修改此字段。您可以将其保留为默认值。
position:其中包含此信息窗口锚定位置的 LatLng。注:InfoWindow 可附加到 Marker对象(此情况下,其位置取决于标记的位置),或附加到地图本身指定的 LatLng 位置。在标记上打开信息窗口将自动更新 position。
maxWidth:用于指定信息窗口的最大宽度(以像素为单位)。默认情况下,信息窗口会根据其中包含的内容进行扩展,如果信息窗口填满地图,那么文本将会自动换行。如果您添加maxWidth,则信息窗口将自动换行以强制适应指定的宽度。如果信息窗口达到最大宽度,但屏幕上仍有垂直空间,则信息窗口可能会垂直扩展。
InfoWindow 的内容可包含文本字符串、HTML 代码段或 DOM 元素。要设置此内容,请在 InfoWindowOptions 中指定该内容,或者对 InfoWindow 显式调用 setContent()。
如果您想要显式调整内容的大小,则可将其纳入
打开信息窗口
创建信息窗口时,它不会自动显示在地图上。要使信息窗口可见,则需对 InfoWindow 调用 open() 方法,并向其传递其要在上面打开的 Map,也可以选择向其传递其要锚定到的 Marker。如果没有提供任何标记,则信息窗口将在其 position 属性指定的位置处打开。
Info window with maxWidth
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
// The maximum width of the info window is set to 200 pixels.
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '
'
'
'+
'
Uluru
'+
'
'
Uluru, also referred to as Ayers Rock, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.
'+
'
Attribution: Uluru, '+
'https://en.wikipedia.org/w/index.php?title=Uluru '+
'(last visited June 22, 2009).
'+
'
'+
'
';
var infowindow = new google.maps.InfoWindow({
content: contentString,
//maxWidth: 200
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
关闭信息窗口
默认情况下,InfoWindow 保持打开状态,直至用户点击关闭控件(信息窗口右上角的叉号)。如果您需要,可以通过调用其 close() 方法来显式关闭信息窗口。
移动信息窗口
对信息窗口调用 setPosition()
使用 InfoWindow.open() 方法将信息窗口附加到新标记上。注:如果您调用 open() 而不传递标记,InfoWindow 将使用构造时通过 InfoWindowOptions 对象字面量指定的位置。
自己的例子
php获取谷歌地图api接口,谷歌地图 API 开发之信息窗口相关推荐
- 百度地图鼠标滑过marker时打开自定义信息窗口
在百度地图上实现鼠标滑过marker时打开自定义的信息窗口,当鼠标滑出marker时关闭已打开的信息窗口. 首先,需要在地图上添加一个marker,具体如下所示: $.ajax({async:fals ...
- 网络音乐api接口,歌词api接口,免费
网络音乐api接口,歌词api接口,免费 具体请看项目地址 项目地址: http://showdoc.dagoogle.cn/index.php/4 网络音乐api开放接口 所有这些都是为了学习,交流 ...
- 免费api接口:小说api, 视频api,漫画api
免费的api接口 ,小说api, 视频api,漫画api http://api.pingcc.cn api文档:https://easydoc.net/doc/45910076
- 利用百度地图API接口自制地图
首先注册成为开发者百度地图开放平台 | 百度地图API SDK | 地图开发 创建一个服务器端应用,这个应用是为了查询地点的经纬度 把地点存一个csv文件,为了查询准确把市和区补在地点前面,通过pyt ...
- 百度地图开发自定义信息窗口openInfoWindow样式的解决方案
1.InfoWindow的样式,百度是没用提供直接使用的样式表的,目前都是热心网友在实际开发中自己的经验和实战总结: 2.百度提供了InfoBox富文本标签弹出框的接口,引入InfoBox.js,即可 ...
- android api接口文档,API 接口文档
API 接口文档 接口类说明 本文档所有接口所涉及的相关类及说明如下: 接口 说明 GsManager SDK 功能接口类,用于调用个数相关功能 GsConfig SDK 配置接口类,用于设置个数相关 ...
- 淘宝/天猫按图搜索商品API接口,以图搜商品API接口,图片搜索API接口
一.淘宝/天猫按图搜索商品API接口,拍立淘搜索图接口,以图搜商品API接口代码分享 1.公共参数: 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) s ...
- 各台平台电商API接口吊桶,API接口分类
A类标准接口 淘宝API item_get 获取商品详情 根据商品ID查询商品标题价格描述等详情数据 淘宝API item_search 按关键字搜索商品 搜索关键字,显示商品总数,标题,图片,优惠价 ...
- api接口 php_PHP关于API接口实例分享
API就是操作系统留给应用程序的一个调用接口,应用程序通过调用操作系统的 API 而使操作系统去执行应用程序的命令(动作).本文主要和大家分享PHP关于API接口实例,希望能帮助到大家. PHP生成J ...
最新文章
- 传递数组_Fortran:派生数组与数组传递进子程序耗费时间比较
- SAP MM ME21N 创建PO时报错 - Net price in CNY becomes too large – 之对策
- 【翻译】SQL Server索引进阶:第三级,聚集索引
- 【HEVC】1、HM-16.7编码器的基本结构
- eclipse的操作
- vuepress 2.x 集成 element-plus
- SOX 音频处理工具基本使用
- cnpm 网络不能连接_(二十七)通俗易懂理解——Resnet残差网络
- Teams数据统计 - 通话记录
- 编码的喜悦……以及Java中的变异测试
- [转]Eclipse插件开发之基础篇(2) 第一个Eclipse插件
- Apache Nutch 1.3 学习笔记十一(页面评分机制 LinkRank 介绍)
- 使用MyEclipse的自动提醒功能卡死MyEclipse的激活
- php源码 gd,php 源码安装没有gd库
- 有效沟通bic法则_有效沟通bic法则_合格职场人都会的3个有效的沟通法则
- 赫尔期权、期货及其他衍生产品第9版课后答案
- defy+me525+android2.3.6官方镜像包,V大DEFY/DEFY+ ME525 ME525+ 2.3.6巅峰优化版0.86(红头)...
- [敏捷开发实践] 用Sonarqube评估系统中的 Technical Debt (技术债)
- 细粒度控制Grails程序的日志输出
- Java Scanner类的方法及用法(很详细)
热门文章
- MySQL删除关联表的数据
- MySQL为表的指定字段添加数据
- Spring Boot + MyBatis + MySQL读写分离
- Java仿百度网盘,拿来学习/搞外快,都是极好的选择
- 程序员,想要彻底弄懂Redis,这15点你一定要明白~(纯干货)
- java基础(八) 深入解析常量池与装拆箱机制
- SpringMVC教程--json使用详解
- 数据库六大约束用法:主键(primary key)、外键(foreign key)、非空(not null)、默认(default)、检查(check)、唯一(unique)
- Java之枚举----小试牛刀练习
- Android中的Fragment使用