html - 在百度地图自定义的Marker被覆盖了
本文介绍了html - 在百度地图自定义的Marker被覆盖了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在百度地图上定义了些marker，经纬度数据是从数据库里通过java取出来的。
以下是该jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="<%=path %>/js/baiduMap/jquery.js"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o5SEftV0lhmEmXgfLVf0xY0S4K9VOSrq"></script> -->
<script type="text/javascript" src="<%=path %>/js/baiduMap/api.js"></script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body class="bgcolor3" style="height:100%">
<input id="data" value="${lampPosition}" style="display:block;"/>
<div id="allmap"></div>
</body>
<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.setMapStyle({style:'grayscale'});
map.centerAndZoom("珠海", 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("珠海"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(); //开启鼠标滚轮缩放
var myIcon = new BMap.Icon("<%=path %>/images/icon/bulb_green.png", new BMap.Size(32,32));
var data_info=$("#data").val();
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "灯杆信息" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
for(var i=0;i<data_info.length;i++){
var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:myIcon}); // 创建标注
var content = data_info[i][2];
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content,marker);
}
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
</script>
</html>
但每次刷新marker的图片就闪现了一下就消失了，随后地图出来了。（其实过程很快大概就零点几秒）
把 map.centerAndZoom("珠海", 11);注释掉出来了下图:
数据获取是正常的，但却显示不了marker:
更新：input标签中输出的经纬度数据只有片段，简直了。。。为什么呢？？
突然觉得码农们都是一个个名侦探柯南，不断地找Bug的问题所在。
［已解决］感谢kikong的提醒！原来传输的数据中有双引号（即使双引号已经转义过），所以传输的数据只剩下双引号前的片段！！把双引号换成单引号之后数据就被完整传输过去了。但仍然出现闪灭的现象，这时候万能的eval派上了用场。把var data_info=$("#data").val();改成var data_info=eval($("#data").val());。诶！欧了！～再次感谢kikong同志！
解决方案
var data_info=$("#data").val();返回的数据格式是字符串而不是数组
而下面代码需要一个数组
for(var i=0;i<data_info.length;i++){
var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:myIcon}); 这篇关于html - 在百度地图自定义的Marker被覆盖了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
