ASP.NET使用百度地图JS的API的Marker事件问题

我给地图设置了点击事件,然后会在鼠标点击的位置生成一个marker,然后我在生成这个marker的方法里面从数据库获取了临近点的坐标,并生成另外的marker添加到地图上,并且添加了点击事件,但是现在有两个问题,
1.我想设置点击新生成的标签时候不触发点击地图事件,应该如何做?
2.在方法里新生成的那些标签我设置了点击事件,但是在创建这些标签的时候触发了,而点击却没有触发,这是为什么?
希望大神们帮忙解答一下,感激不尽
以下是相应JS代码

 // 添加地图标记,点击添加标记,然后地图中心设置为点击地点
    map.addEventListener("click", function (e) {
        //map.removeOverlay(onlyMarker);
        map.clearOverlays();
        point.lat = e.point.lat;
        point.lng = e.point.lng;
        onlyMarker.setPosition(point);
        circle.setCenter(point);
        circle.setRadius(1000);
        map.addOverlay(onlyMarker);
        map.addOverlay(circle);
        map.setCenter(point);

        document.getElementById("lat").value = point.lat;
        document.getElementById("lng").value = point.lng;

        $.ajax({
            url: '/Main/GetShopList',
            type: 'POST',
            datatype: 'json',
            data: { lon: point.lng, lat: point.lat },
            success: function (data) {
                var list = JSON.parse(data);
                var tempPoint = new BMap.Point();
                var myIcon = new BMap.Icon("marker.png", new BMap.Size(25, 30));

                for (var i = 0; i < list.length; i++) {
                    tempPoint.lat = list[i].Pos_lat;
                    tempPoint.lng = list[i].Pos_lon;
                    var shoppoint = new BMap.Marker(tempPoint);
                    map.addOverlay(shoppoint);
                    shoppoint.addEventListener("click", function pointclicked(e) {
                        alert("点击了标签"+list[i].ID);
                    });
                }
            },
            error: function (msg) {
                alert("获取失败,请重试");
            }
        })
    });

这种情况下是点击地图会出现点击地点的标记,然后会显示周围的点的标记,同时会提示“点击了标签XX”,但是我点击周围的点都无法触发点击事件,反倒是地图中心点在跟着点击的点换位置,我想让他点击其他标注点不触发地图中心点的点击事件,同时让新增的点的点击事件可用,希望大神们帮忙解决,谢谢

1个回答

因为i为list.length, alert("点击了标签"+list[i].ID);执行这个报错了list[i]为null,要做好闭包

至于创建标记会alert,你这个代码没看出什么问题。。自己检查其他代码

   function createEvt(i) {
        return function () { alert("点击了标签" + list[i].ID); }
    }
    for (var i = 0; i < list.length; i++) {
        tempPoint.lat = list[i].Pos_lat;
        tempPoint.lng = list[i].Pos_lon;
        var shoppoint = new BMap.Marker(tempPoint);
        map.addOverlay(shoppoint);
        shoppoint.addEventListener("click", createEvt(i))
    }
showbo
支付宝加好友偷能量挖 回复BlinkZero: 肯定不能放外面,放外面引用不到list数组了。
3 年多之前 回复
BlinkZero
BlinkZero 谢谢谢谢,解决了一个问题了,感激不尽,我尝试过您这种方法,不过我是把您例子里的createEvt放到了最外面,原来是放到里面就好了,十分感谢
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
百度地图API删除指定marker
刚入行前端小菜鸟一个,自己琢磨的一种实现方式,第一次写博客,语言和代码可能有不够清晰的地方,欢迎大神批评指正~ 闲话不多说,最近在开发公司管理后台的派工系统,要求是所有商户位置正常标注,报修的商户位置高亮显示。开始有两种构思: 第一种构思是同时接收所有商户位置与报修位置,遍历两个位置后进行匹配,将报修位置以高亮的icon标注,其余位置正常标注; 第二种构思是添加所有商户位置到地图中,引用后端数
百度地图Marker
百度地图实现自定义覆盖物图标以及点击事件
百度地图 - marker
百度API基础功能 var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别 添加覆盖物:Marker(point: Point, opts: Marke...
关于百度地图js api的使用
本人不会js,想做一个百度地图的应用,用户能够在地图上设计路线,然后把路径点转换成GPS坐标,仿照百度demo编写代码,主要代码如下:rnrn[code=javascript]rnrnrnrnrn rn rn rn rn 地图展示rnrnrn rnrnrn rn[/code]rnrn结果鼠标点击事件响应不正确,每次点2下才能绘制路线,且不能进入translateCallback 函数,请各位大神帮忙看看,不胜感激
百度地图API 移动的marker,移动marker点击事件及动态改变速度
前段时间研究了路书想用来监控公交但发现路书很多功能不足,比如说路书移动时点击事件不能触发,路书动态改变移动速度需要移动完两点之间的距离才能改变,添加多个路书会移动其他的移动速度等。后来自己用marker写了个类似路书的东西,如下:(注释很详细,这里不多说,有疑问可在下方留言)<html> <head> <meta charset="utf-8"> <meta
百度地图JS api给marker和label添加点击事件
话不多说,直接上代码: var points = []; //坐标点数组 var label = []; //label数组 var marker = []; //marker数组 $.each(data, function(index,value){ var myIcon = new BMap.Icon(&quot;https://api.map.baidu.com/im...
百度地图api之Marker类--标记点固定
一.首先引入所申请的ak密钥 二.简单样式处理一下 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}//下面的样式就是处理图片固定位置的#map span{display:block; width:20px; height:32px;background:url(h
百度地图API之覆盖物和事件
前言 之前已经介绍了如何添加地图上一些控件,添加一些控件后就会实现一些常用的功能。具体请参考上一篇博文。下面主要介绍如何添加覆盖物及给地图、地标等添加响应事件。 覆盖物相关API介绍 地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
百度地图添加大量marker问题
使用百度地图搜索银行之类的地图上显示2000+marker不卡,rn查询数据库显示2000+marker,地图就特别卡,基本不能拖拽、缩放之类的操作了,查询数据也就1-2秒,但是往地图里加载时就特别慢,加载(大约30-40秒)完成后地图上是显示2000+marker了,但是地图基本上就卡死了,这其中有什么区别,求高手解答啊,不要说什么聚合抽希的,我们项目需求就这样要求的。。。求大神帮忙啊!
百度地图动态添加marker的图片显示问题
最重要的就是加载完成图片之后在子线程添加Marker操作 网上说的通过view转成bitmap感觉没什么用 代码如下:代码如下: Glide.with(mContext).load(mjbBean.getPicUrl()).into(new SimpleTarget() { @Override public vo
js百度地图marker与swiper轮播图联动
项目需求,安卓、ios引入webview地图内容与轮播联动,效果与百度题图wabapp效果相同,调用自己数据,地图里面放坐标,地图下部放轮播,并且单击maker坐标时候轮播图滑到相应位置,滑动轮播图,相应坐标弹出信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewpor
百度地图-marker 标 内容
效果: 动态变化,而不是直接使用图片;public class MarkerWithText {private static final int RECT_PADDING = 6;public static Bitmap getMarkerWithText(int color, String text, Context context) { return drawTextToBitma
百度地图Marker隐藏/显示
1. 隐藏Marker function hiddenMarker(eventtype){ var allOverlay = map.getOverlays(); for (var i = 0; i if(allOverlay[i]["layerType"]==eventtype){ map.removeOverlay(allOverlay[i]); } } } 2
百度地图添加marker
百度地图添加自定义marker 详见:http://www.cnblogs.com/wangfengdange/p/5640867.html
百度地图——自定义覆盖物Marker
最近写项目用到百度地图。项目需要自定义覆盖物,还需要单击事件。研究很久发现还是使用Marker。代码也挺简单。单击事件就是setOnMarkerClickListener就不多说了。下面就是代码:TextView textView = new TextView(getContext()); textView.setText("自定义的覆盖物"); textView.s
百度地图Marker平滑移动
代码参考了三位大佬的文章,文章末尾会附链接 功能要求:实时从后台获取位置数据,然后标注在地图上,Marker从一个点到另个点之间要平滑移动,不能出现蹦蹦跳跳的情况。 实现思想:之所以会出现Marker跳动的情况,是因为每次迈的步子过大,或者说是距离过长,如果能把每段的距离都分成更多段更小的距离,这样Marker可以慢慢地小碎步移动过去,这样从视觉上来看就是平滑地移动过去。既然是要把两点之间的距...
关于百度地图marker的点击事件
在最开始学习使用百度地图,marker的点击事件,很容易实现点击弹出框; 像这样: baiduMap.setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() { @Override public boolean onMarkerClick(Marker marker) { baiduMap
百度地图 Marker 点击弹出窗口
  Android 百度地图 SDK v3.0.0 添加覆盖物Marker与InfoWindow的使用   我们先看效果图片:    我下载过 百度的 官网演示,感觉写的不是很详细。 我在开发的时候也磕磕碰碰的,注释也的很清楚了,下面是代码:   先看布局文件: 一: Fragment 碎片的布局文件 fragment_check_map:     &amp;lt;?xml ver...
百度地图--marker,弧线,框选
主流浏览器都可以打开。
百度地图Marker的定位和方向
原文: http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=83704 今天做百度地图需要在显示很多车辆的位置信息。并显示车辆的角度和行驶方向。 需要用到设置标注的方向。 资料不多,特此记录,备忘。
js调用百度地图API
javacript 百度地图API
JS百度地图api使用方法
首先,引入百度地图的脚本:[javascript] view plain copy&amp;lt;script src=&quot;http://api.map.baidu.com/api?v=2.0&amp;amp;ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH&quot;&amp;gt;&amp;lt;/script&amp;gt;  然后根据api定义自己的:[javascript] view plain copyvar po...
百度地图JS api Demo
百度地图 demo JavaScript 链接:https://pan.baidu.com/s/1U10qZq33xz1EFz92alUY8w 提取码:xq8h
【js调用百度地图api 】
百度地图api上根据浏览器定位,在IE10的兼容模式下只偏差了几米,但在谷歌浏览器下则提示服务不可用,在火狐浏览器上则偏差了一个区去了rn rn 请教大神们这是怎么回事?在windowphone手机上IE 也是偏差单位以区来计算了
百度地图 js api
该文档为网页js版。包括了开发指南和类参考,内容非常详细
js 百度地图api使用方法
首先,引入百度地图的脚本:&amp;lt;script src=&quot;http://api.map.baidu.com/api?v=2.0&amp;amp;ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH&quot;&amp;gt;&amp;lt;/script&amp;gt;然后根据需求定义自己的:var points = [{ id: 1, lng: 113.9278789384, //经度...
js调用百度地图api
/*服务网点*/                          #wrap {                 width: 1196px;                 height: 540;                 margin: auto;                 overflow: hidden;             }
js 百度地图api
js调用百度地图,实现地图显示功能
百度地图api for js 优化
首先先准备一个div <div id="infoWindow" class="map_info_window"> <a href="/mobile/resource/case/$broker_case.id$"> <h4 class="map_info_title">$broker_case.title$</h4> <img
百度地图,自定义Marker
效果图 自定义Marker布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="
百度地图自定义Marker(android)
android版百度地图自定义Marker
android 百度地图api使用问题
问题1: 07-09 03:38:07.591: W/dalvikvm(9386): threadid=1: thread exiting with uncaught exception (group=0xb4100180) 07-09 03:38:07.621: E/AndroidRuntime(9386): FATAL EXCEPTION: main 07-09 03:38:07.621...
百度地图API & 高德地图API 使用问题汇总
百度地图API & 高德地图API 使用问题汇总registerLocationListenerregisterLocationListener问题. 高德地图鉴权失败问题 SDKInitializer.initialize() NullPointerException 问题 设置地图填充颜色问题
百度地图api下自定义覆盖物的事件问题
我在百度地图下自定义了一个覆盖物ComplexCustomOverlay作为标注点,覆盖物是放在div里面的,然后我设置了自定义覆盖物的事件rnComplexCustomOverlay.prototype.addEventListener = function (event, fun) rn this._div['on' + event] = fun;rn rn然后我写了三个事件click mouseover mouseout,rnclick事件是点击显示信息窗口rnmap.openInfoWindow(infoWindow1, new BMap.Point(116.407845, 39.914101));rnmouseover事件和mouseout事件都是显示一段文字,这段文字放在div控件的span里面rndocument.getElementsByTagName("span")[0].innerHTML = mouseoverTxt;rn然后当我把鼠标放在上面的时候是正常的,但是点击了这个覆盖物以后,那些文字就不是显示在div里面了,而是到了外面,并且竖着显示,求指导 为什么!!!rn[code=html]rn var map = new BMap.Map("container"); // 创建Map实例rn var point = new BMap.Point(116.404, 39.915); // 创建点坐标rn map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。rnrn //1、定义构造函数并继承Overlayrn // 定义自定义覆盖物的构造函数 rn function ComplexCustomOverlay(point, text, mouseoverText) rn this._point = point;rn this._text = text;rn this._overText = mouseoverText;rn rn // 继承API的BMap.Overlayrn ComplexCustomOverlay.prototype = new BMap.Overlay();rn rnrn //2、初始化自定义覆盖物rn // 实现初始化方法 rn ComplexCustomOverlay.prototype.initialize = function (map) rn this._map = map;rn var div = this._div = document.createElement("div");rn div.style.position = "absolute";rn div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);rn div.style.backgroundColor = "#EE5D5B";rn //div.style.border = "1px solid #BC3B3A";rn div.style.color = "white";rn div.style.height = "18px";rn div.style.padding = "2px";rn div.style.lineHeight = "18px";rn div.style.whiteSpace = "nowrap";rn //div.style.MozUserSelect = "none";rn div.style.fontSize = "12px"rn var span = this._span = document.createElement("span");rn div.appendChild(span);rn span.appendChild(document.createTextNode(this._text));rn var that = this;rnrn var arrow = this._arrow = document.createElement("div");rn arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";rn arrow.style.position = "absolute";rn arrow.style.width = "11px";rn arrow.style.height = "10px";rn arrow.style.top = "22px";rn arrow.style.left = "10px";rn arrow.style.overflow = "hidden";rn div.appendChild(arrow);rn // 将div添加到覆盖物容器中 rn map.getPanes().labelPane.appendChild(div);rn // 保存div实例 rn this._div = div;rnrn // 需要将div元素作为方法的返回值,当调用该覆盖物的show、 rn // hide方法,或者对覆盖物进行移除时,API都将操作此元素。 rn return div;rn rnrn //3、绘制覆盖物rn // 实现绘制方法 rn ComplexCustomOverlay.prototype.draw = function () rn var map = this._map;rn var pixel = map.pointToOverlayPixel(this._point);rn this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";rn this._div.style.top = pixel.y - 30 + "px";rn rnrn //6、自定义覆盖物添加事件方法rn ComplexCustomOverlay.prototype.addEventListener = function (event, fun) rn this._div['on' + event] = fun;rn rnrn //7、添加自定义覆盖物 rn var txt = "银湖海岸城", mouseoverTxt = txt + "| " + parseInt(Math.random() * 1000, 10) + "套";rnrn var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845, 39.914101), "银湖海岸城", mouseoverTxt);rn map.addOverlay(myCompOverlay);rnrn //8、 为自定义覆盖物添加点击事件rn var infoWindow1 = new BMap.InfoWindow("普通标注", offset: new BMap.Size(30, -30) );rn myCompOverlay.addEventListener("click", function () rn map.openInfoWindow(infoWindow1, new BMap.Point(116.407845, 39.914101));rn //map.setCenter(new BMap.Point(116.407845, 39.914101));rn );rnrn myCompOverlay.addEventListener("mouseover", function () rn if (this._div) rn this._div.style.backgroundColor = "#6BADCA";rn rn document.getElementsByTagName("span")[0].innerHTML = mouseoverTxt;rn );rnrn myCompOverlay.addEventListener("mouseout", function () rn if (this._div) rn this._div.style.backgroundColor = "#EE5D5B";rn rn document.getElementsByTagName("span")[0].innerHTML = txt;rn );rn[/code]rn
百度地图批量删除同类型marker
百度地图批量删除同类型marker
百度地图API的使用示例
刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用。百度地图API,集成简单好用,全面,兼容问题,文档全面; 官方文档: http://lbsyun.baidu.com/jsdemo.htm#d0_1 选择百度地图的一个很重要的原因是百度地图支持离线地图,开发者发布App前...
百度地图api的基本使用
百度地图坐标拾取系统链接: http://api.map.baidu.com/lbsapi/getpoint/index.html   最近业务需求,需要在网页上地图。关于地图的使用,主流的就是高德地图,百度地图。经比较以后,发现两种地图的使用的方式几乎一模一样。 于是,我使用了百度地图。   1、注册百度账号,在http://lbsyun.baidu.com/apiconsole/k...
百度地图API使用小记
百度地图API使用小记
百度地图 API 使用
百度地图 JavaScriptAPI使用时,一开始使用配置都没问题了,控制台源代码显示 DOM中以后含有百度地图的元素,但是地图不显示。反复查看发现以下问题: 地图会包裹在如下的 div 中<div id="mapDiv"></div>如果这个 div 的父节点是 body,那么要设置 body 和 html 的 width 和 height;如果 div 的父节点是其他的元素,那么久设置其父元素
百度地图api的使用心得
//1.首先引入百度api(ak需要自己去注册一个)     &amp;lt;script type=&quot;text/javascript&quot; src=&quot;http://api.map.baidu.com/api?v=2.0&amp;amp;ak=izIGFelUO4Ivt4odWZUlLyk1TivAv9IW&quot;&amp;gt;&amp;lt;/script&amp;gt; //2.在boby标签中添加 &amp;lt;div id=&quot;allma...
相关热词 c# 去空格去转义符 c#用户登录窗体代码 c# 流 c# linux 可视化 c# mvc 返回图片 c# 像素空间 c# 日期 最后一天 c#字典序排序 c# 截屏取色 c#中的哪些属于托管机制