百度地图-自定义mark以及为其添加信息搜索窗口

来源：互联网发布：三星电视上不了网络编辑：程序博客网时间：2024/06/10 10:01
最近项目中要百度地图，学习了一下，以下是个简单的案例
废话不多说，直接贴代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{height:560px;width:100%;}#r-result{width:100%;}.anchorBL{display:none}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的key"></script>    <script type="text/javascript" src="<%=path%>/scripts/map/SearchInfoWindow_min.js"></script>    <script type="text/javascript" src="<%=path%>/scripts/easyui/jquery.easyui.min.js"></script><link rel="stylesheet" href="<%=path%>/scripts/map/SearchInfoWindow_min.css" /><title>测试</title></head><body><div id="allmap"></div><div></body><script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map('allmap');    //设置百度地图中心点以及缩放比例    map.centerAndZoom(new BMap.Point(xxx.xx, xxx.xx), 12);    map.enableScrollWheelZoom(true);        //设置获取展示数据的链接    var url = "action/xxaction_methods";$.post(url, function(data) {if (data != null || data != "") {var list = data.mapItems;var point = new Array(); //存放标注点经纬信息的数组var marker = new Array(); //存放lable对象的数组var info = new Array(); //存放提示信息窗口对象的数组var polygon = new Array();//存放图形对象数组var searchInfoWindow = new Array();//存放详情窗口点for ( var i = 0; i < list.length; i++) {    //创建marker对象    point[i] = new BMap.Point(list[i].mapX, list[i].mapY);    marker[i] = new BMap.Label("<a href='javascript:void(0);' style='text-decoration : none;color:#000000'>"+(i+1)+"</a>", //为lable填写内容    {offset:new BMap.Size(-10,-26),                  //label的偏移量，为了让label的中心显示在点上    position:point[i]});                             //label的位置    marker[i].setStyle({                             //给label设置样式，任意的CSS都是可以的    fontSize:"16px",                 //字号    border:"0",                      //边    height:"25px",                   //高度    width:"19px",                    //宽    textAlign:"center",              //文字水平居中显示    //lineHeight:"20px"              //行高，文字垂直居中显示    background:"url(scripts/map/marker_red_sprite.png)",    //背景图片});map.addOverlay(marker[i]);                             //把label添加到地图上//搜索窗口的创建searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map,list[i].messageText, {title : list[i].lableText, //标题width : 290, //宽度height : 105, //高度panel : "panel", //检索结果面板enableAutoPan : true, //自动平移enableSendToPhone: false,//禁用发送到手机offset:new BMap.Size(0,24),//设置偏移位置searchTypes : [ BMAPLIB_TAB_TO_HERE, //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]}); //为lable添加点击事件marker[i].addEventListener("click", (function(k) {// js 闭包return function() {searchInfoWindow[k].open(new BMap.Point(list[k].mapX, list[k].mapY));};})(i)); //拼接图形的坐标点var shape =[];var listshape = list[i].mapLists[0];if(undefined!=listshape){for ( var j = 0; j < listshape.length; j++) {    shape.push(new BMap.Point(listshape[j].y,listshape[j].x));}//添加形状    polygon[i] = new BMap.Polygon(shape,{strokeColor : "red",strokeWeight : 2,strokeOpacity : 0.5}); //创建多边形    map.addOverlay(polygon[i]);   //增加多边形}}} else {console.log("位置加载失败！");}}); //添加带有定位的导航控件var navigationControl = new BMap.NavigationControl({// 靠左上角位置anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位enableGeolocation: true }); map.addControl(navigationControl);</script></html>
注：这里使用了lable作为标注，在其监听事件上打开搜索窗口。坐标形式为百度坐标。
最终的效果如下：
1 0