给地图上的标注点加上popup弹框

Question

如下图，实现标注的代码如下

标注效果如下：

如何实现点击每个标注点，出现popup，并显示相应的信息

Answer 1

您好，这个功能可以参考范例代码矢量图层选择事件。

Comments

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弹框，麻烦您看看问题在哪？

---

1.看下浏览器报错

2.看你x，y参数传进去了吗？

---

没报错，这是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) { }
                }
            }

那是贴错代码了，位置已经修改过来了

还是不出来

---

你如果就把弹出位置写死成地图中心点，能弹的出来吗