天地图多个标注及点击弹出用户自定义信息窗口

最新推荐文章于 2024-05-10 14:45:41 发布

zzzzzheike

最新推荐文章于 2024-05-10 14:45:41 发布

阅读量4.3k

点赞数 1

本文链接：https://blog.csdn.net/zzzzzheike/article/details/105788947

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

天地图 JavaScript Web API

1 篇文章 0 订阅

订阅专栏

天地图3.0 web api JavaScript 标注用户自定义信息窗口

很多使用天地图WEB API的朋友都会问为什么循环添加的标注点，注册点击事件总是响应最后添加的marker？

这里介绍一个如何循环添加标注点，并且正确响应，还有自定义marker属性问题，直接上代码。
map.html

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>天地图－地图API－范例－自定义信息窗口</title> 
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=3.0&tk=您的密钥"></script> 

</head> 
<body onLoad="onLoad()"> 
	<div id="mapDiv" style="position:absolute;width:600px; height:500px;"></div> 
	<div style="position:absolute;left:620px;"> 
		<ul> 
			<li>本示例演示如何在地图上显示多个自定义信息浮窗。</li> 
		</ul> 
	</div> 
</body> 
</html>
<script type="text/javascript" src="js/map.js"></script>

map.js

var map, zoom = 12,marker,markerclick;
var customerWinInfo = null;

function onLoad() {
    //初始化地图对象
    map = new TMap("mapDiv");
    //设置显示地图的中心点和级别
    map.centerAndZoom(new TLngLat(121.44623, 31.2395), zoom);
    map.enableDoubleClickZoom();
    map.enableHandleMouseScroll();
    map.enableInertia();

    var data_info = [[121.4658, 31.22629], [121.44795, 31.22702], [121.48434, 31.22658], [121.47284, 31.221]];
    for (var i = 0; i < data_info.length; i++) {
        marker = new TMarker(new TLngLat(data_info[i][0], data_info[i][1]));
        //为marker添加属性,属性名可以自定义
        marker.id=i;
        marker.info = Math.random();
        (function(){
            var m = marker;
            markerclick = TEvent.addListener(m,"click",function (p) {
                onClose()
                var html = [];
                html.push('<div style="background:#CCCC99;height:20px;color:#000;width:135px;">');
                html.push('     <span style="width:100px;float:left;margin-left:2px;background:">自定义信息窗口</span><span  style="width:30px;float:right;margin-right:2px;" οnclick="onClose();">关闭</span>');
                html.push('</div>');
                html.push('<div id="deliver-legend-ctrl" style="background:#fff;border:1px solid #C0C0C0;">');
                html.push(' <table cellspacing="0" cellspadding="0" style="width:130px;border:1px solid #ff0000;">');
                html.push('     <tr align="center" style="height:10px;">');
                html.push('         <td></td>');
                html.push('         <td><a herf="javascript:void(0);"></a></td>');
                html.push('     </tr>');
                html.push('     <tr align="center">');
                html.push('         <td>经度:</td>');
                html.push('         <td>'+m.getLngLat().getLng()+'</td>');
                html.push('     </tr>');
                html.push('     <tr align="center">');
                html.push('         <td>纬度:</td>');
                html.push('         <td>'+m.getLngLat().getLat()+'</td>');
                html.push('     </tr>');
                html.push('     <tr style="height:10px;">');
                html.push('         <td></td>');
                html.push('         <td><a herf="javascript:void(0);"></a></td>');
                html.push('     </tr>');
                html.push(' </table>');
                html.push('</div>');
                var config = {
                    offset:new TPixel(0,0),
                    position:m.getLngLat()
                }
                customerWinInfo=new TLabel(config);
                customerWinInfo.setTitle('');
                customerWinInfo.setLabel(html.join(''));
                customerWinInfo.getObject().style.zIndex = 10000;
                map.addOverLay(customerWinInfo);
                var obj = customerWinInfo.getObject();
                var width = parseInt(obj.offsetWidth);
                var height = parseInt(obj.offsetHeight);
                var icon = this.getIcon();
                var anchor_icon = icon.getAnchor();
                var pixel = new TPixel(width/-2,height/-2-anchor_icon[1]);
                customerWinInfo.setOffset(pixel);

            })

        })();
        map.addOverLay(marker)
    }
}
function onClose(){
    map.removeOverLay(customerWinInfo);
}

onLoad();

zzzzzheike

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
天地图多个标注及点击弹出用户自定义信息窗口

天地图3.0 web api JavaScript 标注用户自定义信息窗口很多使用天地图WEB API的朋友都会问为什么循环添加的标注点，注册点击事件总是响应最后添加的marker？这里介绍一个如何循环添加标注点，并且正确响应，还有自定义marker属性问题，直接上代码。map.html<!DOCTYPE html> <html> <head> &...
复制链接

扫一扫