如下图,实现标注的代码如下
标注效果如下:
如何实现点击每个标注点,出现popup,并显示相应的信息
您好,这个功能可以参考范例代码矢量图层选择事件。
var features = []; var map = this.globalMap; var infowin = null; var contentHTML = ""; contentHTML += "<span style=' font-size:12px; line-height: 12px;background-color: #fff'>"; contentHTML += "原始地址:" + data.ORI_ADDR + "<br />"; contentHTML += "POI地址:" + data.RES_ADDR + "<br />"; contentHTML += "数量:" + data.TOTAL + "<br />"; contentHTML += "</span>"; var callbacks = { click: function (currentFeature) { closeInfoWin(); var popup = new SuperMap.Popup.FramedCloud("popwin", new SuperMap.LonLat(0, 0), null, contentHTML, null, true); infowin = popup; map.mapObject.addPopup(popup); } }; var selectFeature = new SuperMap.Control.SelectFeature(this.vectorlayer, { callbacks: callbacks }); this.globalMap.mapObject.addControl(selectFeature); selectFeature.activate(); var style = { stroke: false, fillColor: "#0000FF", pointRadius: 5 }; for (var i = 0;i < data.length;i++){ var y = data[i].LATITUDE; var x = data[i].LONGITUDE; var xy = latLng2WebMercator2(x, y); var pt = new SuperMap.Geometry.Point(xy[0], xy[1]); //this.pointFeature = new SuperMap.Feature.Vector(pt); features[i] = new SuperMap.Feature.Vector(pt, null, style); } this.globalMap.mapObject.addLayer(this.vectorlayer); this.vectorlayer.addFeatures(features); this.globalMap.setLocation(features); function latLng2WebMercator2(lng, lat) { var x = lng * 20037508.34 / 180; var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180); y = y * 20037508.34 / 180; return [x, y]; } function closeInfoWin() { if (infowin) { try { infowin.hide(); infowin.destroy(); } catch (e) { } } }
您还,我是这样写的,还是出不来popup弹框,麻烦您看看问题在哪?
没报错,这是popup的信息,x,y坐标都传进去了。
你这张图的(0,0)在什么位置?我看你写的弹窗出现在(0,0)点
this.target = data var features = []; var map = this.globalMap; var infowin = null; var style = { stroke: false, fillColor: "#0000FF", pointRadius: 5 }; for (var i = 0; i < this.target.length; i++) { var y = this.target[i].LATITUDE; var x = this.target[i].LONGITUDE; var popwin = "popwin_" + i; var contentHTML = ""; contentHTML += "<span style=' font-size:12px; line-height: 12px;background-color: #fff'>"; contentHTML += "原始地址:" + this.target[i].ORI_ADDR + "<br />"; contentHTML += "POI地址:" + this.target[i].RES_ADDR + "<br />"; contentHTML += "数量:" + this.target[i].TOTAL + "<br />"; contentHTML += "</span>"; var callbacks = { click: function (currentFeature) { closeInfoWin(); var popup = new SuperMap.Popup.FramedCloud(popwin, new SuperMap.LonLat(x, y), null, contentHTML, null, true); infowin = popup; map.mapObject.addPopup(popup); } }; var selectFeature = new SuperMap.Control.SelectFeature(this.vectorlayer, { callbacks: callbacks }); this.globalMap.mapObject.addControl(selectFeature); selectFeature.activate(); var xy = latLng2WebMercator2(x, y); var pt = new SuperMap.Geometry.Point(xy[0], xy[1]); //this.pointFeature = new SuperMap.Feature.Vector(pt); features[i] = new SuperMap.Feature.Vector(pt, null, style); } this.globalMap.mapObject.addLayer(this.vectorlayer); this.vectorlayer.addFeatures(features); this.globalMap.setLocation(features); function latLng2WebMercator2(lng, lat) { var x = lng * 20037508.34 / 180; var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180); y = y * 20037508.34 / 180; return [x, y]; } function closeInfoWin() { if (infowin) { try { infowin.hide(); infowin.destroy(); } catch (e) { } } }
那是贴错代码了,位置已经修改过来了
还是不出来