1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 百度地图:为标记添加点击事件显示标注

百度地图:为标记添加点击事件显示标注

时间:2018-08-06 16:24:21

相关推荐

百度地图:为标记添加点击事件显示标注

之前写了百度地图的标注,原文链接:使用百度地图API实现地图生成、标记以及标注,但是因需求更改,标注的显示需要通过点击标记才能显示。

以下为更改内容:

//给标记添加点击事件以及显示窗口信息var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + text + "</p>");marker.addEventListener("click", function () {this.openInfoWindow(infoWindow); });

效果如下:

附上完整jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%@ include file="/common/taglibs.jsp"%><html><head><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><script type="text/javascript"src="http://api./api?v=2.0&ak=你的密钥"></script><script type="text/javascript"src="<c:url value='/scripts/boostrap/jquery.min.js'/>"></script><script type="text/javascript"src="<c:url value='/scripts/layer/layer.js'/>"></script><link rel="stylesheet" type="text/css" media="all"href="/styles/layer/layer.css" /><title>标注事项地点</title><style type="text/css">body, html, #allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style></head><body><div class="container"><div id="allmap"></div></div></body></html><script type="text/javascript">$(function(){// 百度地图API功能var map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(119.847604, 31.274829), 17); // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]}));map.setCurrentCity("宜兴"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 createMakers(map);});function createMakers(map){$.ajax({type:"post",url:"/bpm/bmfw/makers",success:function(makers){for(var i in makers){var point = new BMap.Point(makers[i].pointX, makers[i].pointY);map.centerAndZoom(point, 17);var marker = new BMap.Marker(point); // 创建标记map.addOverlay(marker);createTag(marker,makers[i]);}},error:function(){alert("获取事项标注失败");}});}function createTag(marker,m){//标注var text = "<p>许可证号:" + m.bjh + "</p><p>申请人/单位:" + m.sqr+ "</p><p>许可事项:" + m.sx + "</p><p>现场照片:<a href=''>点击查看</p>";/* var label = new BMap.Label(text, {offset : new BMap.Size(-85, -120)});//设置label(标注的样式)label.setStyle({color : "black",fontSize : "12px",height : "110px",//lineHeight : "20px",fontFamily : "微软雅黑",maxWidth : "none",border : "none",display:"none"});marker.setLabel(label); *///给标记添加点击事件以及显示窗口信息var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + text + "</p>");marker.addEventListener("click", function () {this.openInfoWindow(infoWindow); });}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。