怎么在地图上js实现点击出现弹出框每点击一次地图就出现一个marker

后使用快捷导航没有帐号?
暂时没有人问过相似的问题,你可以做第一个提问题的人
查看: 4676|回复: 8
如何获取地图上marker?如何代码模拟click事件?
用addOverlay 添加了不少marker到地图上,可以用getOverlays获取所有覆盖物,但是返回的overlay就只有几个方法
请问,既然是把marker加到地图上,怎么获取?
另外在添加marker的时候注册了click事件,click事件可以打开对应的信息窗;
请问可以通过JS代码来模拟click事件实现信息窗打开么?直接用marker.click()行不通》。。。。。。。
在添加marker时附加一个id属性
获取marker时
var markers = map.getOverlays();
& && && && &for (var i = 0; i & markers. i++) {
& && && && && & if (markers[i].toString() == &[object Marker]&) {
& && && && && && &&&if (markers[i].id == 你附加的id属性值) {
& && && && && && && && &处理自己的业务
& && && && && && &&&}
& && && && && & }
& && && && &}
我也遇到了getOverlays()这个问题,请问楼主解决了吗?
我也遇到了getOverlays()这个问题,请问楼主解决了吗?
用个数组 缓存 你当前地图上所有的mardker,用索引获取marker。
& & 能说清楚点吗 ? 我现在就这问题很迷茫
下面搞定这个事情:
//添加一个模拟打开窗口的方法,调用:marker.openMyInfoWindow();
BMap.Marker.prototype.openMyInfoWindow=function(){
& & & & for(key in this){
& & & & & & & & if($(this[key]).hasClass(&BMap_noprint&)){
& & & & & & & & & & & & $(this[key]).trigger(&click&);
& & & & & & & & & & & &
& & & & & & & & }
在添加marker时附加一个id属性
获取marker时
var markers = map.getOverlays();
你好啊,属性怎样添加诶,直接用marker.id=id?
Powered bysponsored links
请教各位关于百度地图api标注点marker的click事件问题
百度地图在地图中给标注点marker添加后click事件后
marker.addEventListener("click", function(){})
如何在其他地方自动触发这个marker点击事件?
因为输出marker是一个对象,所以并不能marker.click()
想做的就是如百度地图那样点击左边搜索结果栏右边标注点自动点击一次
感觉api确实不太好用,想出来俩解决方案。
1.可以定义好事件处理函数,想要触发时执行一遍:
marker.addEventListener('click',func);
function func(){
// 想要触发时,直接调用func
2.发现marker有一个属性B指向标记DOM,但B只在地图加载完成后才有值,否则为null,所以可以在地图加载完成后给给B绑定事件.
map.addEventListener("tilesloaded",function(){
marker.B.addEventListener('click',function(){
/* 使用zepto或jQuery
$(marker.B).on('click',function(){
// 注意触发时要保证地图加载完成
marker.B.click();
$(marker.B).trigger('click');
也可以不等地图加载完,定义marker后就直接绑定,但触发时还是触发marker.B也是可以的。
marker.addEventListener('click',function(){
// 注意触发时要保证地图加载完成
marker.B.click();
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ ----------------------------------------------------------------------------------------- ...
原文: 百度地图API详解之事件机制,function&闭包&解决for循环和监听器冲突的问题:
百度地图API详解之事件机制 日 星期二 下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制.本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及 ...
任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA的爱意吧! 如何实现: 给地图增加一个事件监听,addEventListener: 当鼠标点击地图时,首先获取改点坐标,其次在改点坐标处增加一个红色标注. 图示: 运行代码,请点击这里. 代码如下: &!DOCT ...
当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API&script type=&text/javascript& src=&http://api. ...
IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽IOS百度地图开发POISearch搜索附近停车场,附近加油站IOS百度地图视角跳到用户当前位置IOS百度地图开发实时路况IOS开发百度地图自动导航IOS开发百度地图在大头钉上加文字和图片,点击这个整体再弹出气泡IOS开发百度地图实现经纬度导航,无需地名.
第一部分--牛刀小试 百度地图零基 ...博客分类:
在上一版本上增加了标记新点的功能,初始化显示一个点,通过修改在地图上增加一个单词点击监听事件,并根据用户的点击标记新的点,隐藏原有显示,并记录下当前点击坐标位置
后面就是对于标记点的保存了
恢复可以显示初始化时候标记的点信息及弹出信息框(我没有改动上面的Y和X,初始值在$G.y和$G.x中保存)
PS:google区别于人们的原有思想,即google的地图对于 x y 的定义是y轴在前,x轴在后(y:南北纬 x:东西经)
&!DOCTYPE html&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&
&meta http-equiv="Content-Type" content="text/charset=utf-8" /&
&title&Google 地图 JavaScript API 示例: 简单的地图&/title&
html,body{height:100%;margin:0;padding:0;}
#map_canvas{height:87%;}
@media print{
html,body{height:}
#map_canvas{height:100%;}
&script type="text/javascript" src="/maps/api/js?sensor=false&language=zh-CN"&&/script&
&script type="text/javascript"&
var $G,$O,$M,$L,$I;
(function(undefined){
O = function (id) {
return "string" == typeof id ? document.getElementById(id):
point:function(y,x){
return new google.maps.LatLng(y,x);
getCanvas:function(id){
var mapid = id?id:'map_canvas';
return document.getElementById(mapid);
options:function(center,z){
zoom: z?z:14,
center: center?center:this.getCenter(),
navigationControl: true,
scaleControl: true,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
mark:function(map,latLng,title){
return new google.maps.Marker({
icon: this.icon,
position: latLng,
title:title
return new google.maps.Marker({
//icon: this.icon,
position: latLng,
add:function(info,latLng,w,h){
return new Window({
content: info,
size: new google.maps.Size(w,h),
position: latLng
else if(latLng)
return new Window({
content: info,
position: latLng
return new Window({
content: info
//event 事件
listen:null,
add:function(dom,event,fn){
return google.maps.event.addDomListener(dom, event, fn);
addOnce:function(dom, event, fn){
return google.maps.event.addListenerOnce(dom, event, fn)
&script type="text/javascript"&
$G.y=39.8;
$G.x=116.12;
var z = 15;
var inf = "222";
var point = $G.point($G.y,$G.x);
//初始中心点
var info = $I.add(inf,point);
function initialize(){
map = new google.maps.Map($G.getCanvas("map_canvas"), $G.options(point,z));
//初始化地图
mark = $M.mark(map,point);
info.open(map);
$L.add(mark,"click",function(){info.open(map)});
function editmap(){
$L.addOnce(map,"click",function(event){
if(tempmark)tempmark.setMap(null);
mark.setMap(null);
info.setMap(null);
$O("y").value=event.latLng.lat();
$O("x").value=event.latLng.lng();
tempmark = $M.mark(map,event.latLng);
function cancelmap(){
if(tempmark)tempmark.setMap(null);
map.panTo(point);
mark.setMap(map);
info.setMap(map);
&body onload="initialize()"&
&div style="50margin-left:300padding-top:15"&
&button onclick="editmap()"&修改&/button&&button onclick="cancelmap()"&恢复&/button&Y:&input type="text" id="y"&X:&input type="text" id="x"&
&div id="map_canvas"&&/div&
另外鼠标右键点击地图并在点击位置显示菜单的功能基本实现,先上图
原理是监听event事件的时候可以获得 map_canvas 中鼠标的 position:relative 所对应的浏览器x,y点信息。然后动态改变地图中弹出框所在的坐标位置
有离线的写法么?别想了~ 谷歌国内都打不开了你还关注~ 换百度用吧~
浏览: 241302 次
来自: 天津
ehcache.xml文件中配置的cache定义的name必须 ...
技术的进步,在于源源不断的创新,感谢楼主带我入门
准备去试试
确实Calendar getTime是精确到毫秒的,这样添加如 ...
其实增加这样一句就可以解决了calendar.set(Cale ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'百度地图给map添加右键菜单(判断是否为marker)
作者:屠龙灬世家
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下
废话不多说了,直接给大家贴代码了。
map.addEventListener("rightclick",function(e){
if(e.overlay){//判断右键单击的是否是marker
s = e.point.//经度
w = e.point.//维度
RightClick();//右键单击map出现右键菜单事件
//右键单击map出现右键菜单事件
function RightClick(){
//alert('你点击的是地图');
var createMarker = function(map){//右键更新站名
if (confirm("要新建站点吗?")){
$(".AllSetMassage").show();
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('新建站点',createMarker.bind(map)));
map.addContextMenu(markerMenu);//给标记添加右键菜单
右键单击map(非marker)
右键单击marker:
PS:百度地图给多个marker添加右键菜单(删除、更新)
$.getJSON("./GetStationPlaceServlet",function(json){
for(var i=;i&json.i++){
var obj = eval(json);
//获取经纬度
fStationlon = parseFloat(obj[i].Stationlon);
fStationlat = parseFloat(obj[i].Stationlat);
var pt = new BMap.Point(fStationlon,fStationlat);
var myIcon = new BMap.Icon("photo/station.png",new BMap.Size(,),{ anchor: new BMap.Size(, ) });
var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker); //将标注添加到地图中
var strRes = parseFloat(obj[i].StationId);
addClickHandler(strRes,marker);//左键单击marker事件
RightClickHandler(strRes,marker);//右键单击marker出现右键菜单事件
RightClick();//右键地图出现右键菜单事件
//右键单击marker出现右键菜单事件
function RightClickHandler(stationId,marker){
var removeMarker = function(e,ee,marker){//右键删除站点
var json={
"StationId":stationId,
if (confirm("要删除站点"+stationId+"吗?")){
$.getJSON("./DeleteStationServlet",{json:JSON.stringify(json)},function(json){
if(json.result==true){
alert("删除站点"+stationId+"成功!");
map.removeOverlay(marker); //将地图中的标记删除
var updateMarker = function(marker){//右键更新站名
if (confirm("要修改站点"+stationId+"的站名吗?")){
$(".AllUpdateMassage").show();
$("#stationId").val(stationId);
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除站点',removeMarker.bind(marker)));
markerMenu.addItem(new BMap.MenuItem('修改站名',updateMarker.bind(marker)));
marker.addContextMenu(markerMenu);//给标记添加右键菜单
//鼠标左键单击marker事件
function addClickHandler(stationId,marker){
marker.addEventListener("click",function(e){
var p = marker.getPosition(); //获取marker的位置
var staId={
"StationId":stationId,
$.getJSON("./GetStationInfoServlet",{json:JSON.stringify(staId)},function(json){
for(var i=;i&json.i++){
var obj = eval(json);
stationName = obj[i].stationN
var content = "站点编号:"+stationId+"&br/&"+ "站点名称:"+stationN
openInfo(content,e);
//左键单击marker弹出窗口事件
function openInfo(content,e){
var p = e.
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = Window(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
//修改站点站名
function update(){
var stationId=$("#stationId").val();//编号
var stationName=$(".AllUpdateMassage_name").val();//名字
var json={
"StationId":stationId,
"StationName":stationName
$.getJSON("./UpdateStationServlet",{json:JSON.stringify(json)},function(json){
if(json.result==true){
alert("站点"+stationId+"站名修改成功!");
$(".AllUpdateMassage").hide();
alert("失败!");
地图上和数据库中都已删除此点信息:
我在实现这个时,发现有人只能在一个marker上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 js实现手机端点击复制 的文章

 

随机推荐