- 综合排序
- 最热优先
- 最新优先
- 来自专栏跟牛老师一起学WEBGIS
lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
用过Arcgis Server for JavaScript API肯定知道InfoWIndow，你在用InfoWindow的时候会发现各种问题，例如不能完全显示的问题，遮盖对象的问题等等，所以呢我在实现这个功能的时候动了下脑子 样式方面还得好好下下功夫，东西是差不多实现了，下面说说思路： 首先，DIV定义，这个样式，我定义了5个div，分别是infowin，title，colse，content，arrow，其中，infowin是整个InfoWindow arrow { background-image:url(arrow.png); height:30px; } </style> 样式定义完之后就得考虑事件了，一般InfoWindow initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Feature Layer - display results as an InfoWindow
97320发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
在前面的两篇相关的文章里面，实现InfoWindow是通过div的东西实现的，本文要讲的是通过集成InfoWindowBase实现infowindow的。 实现后InfoWindow主要修改了arcgis原来的样式，并加入了InfoWindow出界的处理。 源代码奉上： InfoWindow.js define([ "dojo/Evented", "dojo/parser", "dojo/on", "dojo/_base/declare _content = null; } }); return InfoWindow; }); InfoWindow.js .myInfoWindow { position: absolute = new InfoWindow({ domNode: domConstruct.create("div", null, dom.byId("mapDiv")) }
83340发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
lzugis——Arcgis Server for JavaScript API之自定义InfoWindow（续）
同样的标题后面加了一个括弧，不是为了增减博文数量，而确实是上个功能的完善，标注为续，意思是继续上次的内容，来说说如何自定义InfoWindow。 在上一讲中，实现了InfoWindow的显示，但是并没有实现地图拖动地图InfoWindow随着联动，以及缩放地图InfoWindow随着联动的问题，在本文章中，就上述两个问题提供一个解决思路。 首先，说说拖动地图InfoWindow的联动。 拖动地图时，地图并未做缩放，所以只是做一个位置的偏移，因此，定义一个公共变量，记录InfoWindow出来时候的屏幕位置，拖动鼠标时获取鼠标的相对变化，再讲InfoWindow做一相对应的偏移即可： var 接着，我们说说缩放时InfoWindow的联动。缩放时的联动的逻辑是记录InfoWindow首次出现的地图点的坐标，当缩放结束后将首次出现的地图点转换为屏幕坐标，再将其显示出来。
1.3K30发布于 2018-10-23 - 来自专栏c#开发者
GoogleMaps api for javascript demo 动态按顺序加载marker
= 'undefined') infowindow.close(); infowindow = new google.maps.InfoWindow({ content: "position:" + marker.position + ";" }); infowindow.open(map, = 'undefined') infowindow.close(); }); } </script> </head> <body onload="initialize = new google.maps.<em>InfoWindow</em>({ content: "loading..." }); } function (this.html); infowindow.open(map, this); });
1.2K60发布于 2018-04-12 - 来自专栏javascript趣味编程
如何在vue单页应用中使用百度地图
--信息窗体--> <bm-info-window :position="{lng: <em>infoWindow</em>.info.lng, lat: <em>infoWindow</em>.info.lat }" :title="<em>infoWindow</em>.info.name" :show="<em>infoWindow</em>.show" @close="infoWindowClose" @open="infoWindowOpen 在现有的百度提供的<em>InfoWindow</em>组件中是没有封装这个属性的，所以我们通常有两种办法：1.扩展组件源码（耗时）2.直接dom操作。 这里我选择第二种，因为快。 --信息窗体--> <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat }" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen
2K20发布于 2021-08-13 - 来自专栏全栈程序员必看
高德地图实现多点标注功能
', {}); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar()); }); var infoWindow = new AMap.InfoWindow({}); //创建信息窗口对象 ps.高德目前不支持多信息窗口，即使创建多个窗口对象，也只会显示一个 var lnglats= [["116.4123"," +data[i].name; //标记点的title // if(data[i].id==2){ //默认打开第二个点的信息窗口 infoWindow.setContent(content.join(" ，请参考http://lbs.amap.com/api/javascript-api/example/infowindow/infowindow-has-search-function/ //给Marker (e.target.content.join('
')); infoWindow.open(map, e.target.getPosition()); } //地图加载完成事件 map.on('1.1K10编辑于 2022-08-26 - 来自专栏WordPress技术文章
非插件方式实现wordpress网站调用腾讯地图
要实现通过腾讯地图API调用并将信息框(InfoWindow)居中显示在地图中心坐标点，需遵循腾讯地图API规范，核心步骤包括：引入API、初始化地图、创建信息框并绑定到中心坐标，同时通过样式/配置确保信息框居中显示 创建信息框（InfoWindow） const infoWindow = new qq.maps.InfoWindow({ map: map, // 强制信息框显示（默认创建后需手动open，或初始化时显示） infoWindow.open(); // 可选：监听地图移动，保持信息框始终在中心 三、核心要点说明1.信息框居中关键配置position绑定中心坐标：infoWindow.setPosition(map.getCenter())或初始化时position: centerLatLng， 四、常见问题解决信息框未显示：检查API Key是否有效、坐标格式是否正确(纬度在前，经度在后)、是否调用infoWindow.open()。
26801编辑于 2025-12-03 - 来自专栏码农笔录
vue2（webpack）调用amap高德地图及其UI组件
因为后边要使用高德的infowindow，最简单的不好扩展，而且没有点击事件，所以用用到了高德的ui。 4、地图添加标记物和信息框 marker和infowindow 因为我从后台取到的点是gps定位的点，因为坐标系不同，所以要将gps的点转成高德坐标系的点；点击marker显示infowindow,并给 infowindow添加点击事件 // 后台取到的点，新建LngLat对象 let lngLat = new AMap.LngLat(lanlet[0].trim (mapObj, e.target.getPosition()) // 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container ()会返回这个infowindow（jquery）对象 let infoEle = infoWindow.get$Container()
2.8K10发布于 2018-06-29 - 来自专栏前端之攻略
百度地图使用记录
:{InfoWindow}, data() { return { showinfoWindow:false, BDMap:null, markers:[] = new BMapGL.InfoWindow(this. $refs.infoWindow. (e.target.extraData.name) e.target.openInfoWindow(infoWindow) this. $nextTick(()=>{ infoWindow.redraw() }) this.
80630编辑于 2022-12-21 - 来自专栏灰小猿技术社区
Java文本框内文字显示不同颜色、字号等属性【函数调用一键实现】
文本域中的内容进行写入，其中传入的参数分别是：“写入文本框的内容、字体颜色、是否粗体、字号”，JTextPane文本域布局完成后，直接调用该函数就可对文本写入， 函数代码中的 Document doc = infoWindow.getDocument (); 中的infoWindow为JTextPane文本域的名称，调用函数时注意修改！ StyleConstants.setBold(attrSet, bold);//设置粗体 } StyleConstants.setFontSize(attrSet, fontSize);//设置字号 /*********infoWindow 为JTextPane文本域的名称*****************/ Document doc = infoWindow.getDocument(); str = "\n" + str; try
2.1K30发布于 2020-09-23 - 来自专栏全栈程序员必看
【vue引用原生高德地图并多点标注】
var map = new AMap.Map("container", { resizeEnable: true});//初始化地图 //信息窗口实例 var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30)}); //遍历生成多个标记点 for (var i = 0 target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体 } function markerClick(e) { infoWindow.setContent (e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView
94640编辑于 2022-08-26 - 来自专栏全栈程序员必看
vue中引入高德地图并多点标注
var map = new AMap.Map("container", { resizeEnable: true});//初始化地图 //信息窗口实例 var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30)}); //遍历生成多个标记点 for (var i = 0 target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体 } function markerClick(e) { infoWindow.setContent (e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView
1.2K30编辑于 2022-08-31 - 来自专栏世界第一语言是java
vue2（webpack）调用amap高德地图及其UI组件vue2（webpack）调用amap高德地图及其UI组件和标记物#
因为后边要使用高德的infowindow，最简单的不好扩展，而且没有点击事件，所以用用到了高德的ui。 这里写图片描述 4、地图添加标记物和信息框 marker和infowindow### 因为我从后台取到的点是gps定位的点，因为坐标系不同，所以要将gps的点转成高德坐标系的点；点击marker显示infowindow ,并给infowindow添加点击事件 // 后台取到的点，新建LngLat对象 let lngLat = new AMap.LngLat(lanlet[0].trim (mapObj, e.target.getPosition()) // 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container ()会返回这个infowindow（jquery）对象 let infoEle = infoWindow.get$Container()
2K30发布于 2018-06-13 - </template> <script> export default { data() { return { overlay: null, infoWindow id:"" }; }, methods: { initialize(e) { this.overlay = e.overlay; this.infoWindow = e.infoWindow; this.id = e.id, console.log(this.id) }, //关闭 close() { = new AMap.InfoWindow({ isCustom: true, //使用自定义窗体 autoMove: true, content:this : infoWindow }); }, createInfoWindow(title) { var info = document.createElement("来自专栏前端之攻略
高德地图信息框作为组件
67510编辑于 2022-01-20
高质量编码-地图弹窗
image.png image.png image.png image.png infoWindow其实只是一个DOM容器，其实就是map.infoWindow对象 image.png image.png 下文我们将介绍一下infoWindow setContent方法的使用。
Silverlight中的三维效果和3D动画
(PlaneProjection.RotationX)" Storyboard.TargetName="InfoWindow" d:IsOptimized="True"/> < (CompositeTransform.TranslateX)" Storyboard.TargetName="<em>InfoWindow</em>" d:IsOptimized="True"/> </ (PlaneProjection.RotationX)" Storyboard.TargetName="<em>InfoWindow</em>"> <EasingDoubleKeyFrame (CompositeTransform.ScaleX)" Storyboard.TargetName="<em>InfoWindow</em>"> <EasingDoubleKeyFrame (CompositeTransform.ScaleY)" Storyboard.TargetName="<em>InfoWindow</em>"> <EasingDoubleKeyFrame
百度地图展示公司地址示例
opts = { width: 350, height: 100, title: "xxx技术有限公司", message: "xxx技术有限公司" } var infoWindow = new BMapGL.InfoWindow("北京市朝阳区xx8层A-xxx", opts); map.openInfoWindow(infoWindow, point); marker.addEventListener ("click", function () { map.openInfoWindow(infoWindow, point); }); </script>
高德地图绘制多边形与编辑
{ // console.log(e.target.id) console.log(e.originEvent.pageX); return; var infoWindow = new AMap.InfoWindow({ isCustom: true, //使用自定义窗体 autoMove: true, content: this $el, offset: new AMap.Pixel(16, -45) }); infoWindow.open(this.GDMap, e.target.getPosition $refs.infoWindowComponent.initialize({ id: e.target.id, overlay: "info", infoWindow : infoWindow }); },
实现地图天气预报的显示
.attr("src",url); content.append(weatherIframe); map.infoWindow.setTitle (title); map.infoWindow.setContent(content[0]); map.infoWindow.resize (340,125); map.infoWindow.show(evt.graphic.geometry); }); 实现后，效果如下： ?
腾讯位置服务入门 使用JavaScript API GL自定义3D地图
源码 //初始化infoWindow var infoWindow = new TMap.InfoWindow({ map: map, position: center, // 初始位置 ，必须设置 offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素 }); infoWindow.close();//初始关闭信息窗关闭 //监听标注点击事件 marker.on("click", function (evt) { //设置infoWindow infoWindow.open(); //打开信息窗 infoWindow.setPosition (evt.geometry.position);//设置信息窗位置 infoWindow.setContent(evt.geometry.properties.title);//设置信息窗内容
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号