基于百度地图API与本地数据库交互的标记点功能。

来源：互联网发布：java 给微信发送消息编辑：程序博客网时间：2024/05/07 04:30

前段时间研究了一下百度地图的API文档，做了一个百度地图与数据库结合的小功能，很简单，就是把需要的点标记在地图上，进行一定的描述，然后将点坐标与描述的文字写入数据库，之后再将数据库的点显示在地图上。

下面是前台页面，主要实现了功能也没有做什么其他的东西，里面使用了3个隐藏域进行前后台的传值操作。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication8._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>添加点标注</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里改成自己的百度key"></script><script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script><style type="text/css">    /* 样式选择面板相关css */    #divStyle {        width: 280px;        height: 50px;        border: solid 1px gray;        display:block;        margin: 2px; 0px;        display:none;    }    #divStyle ul{        list-style-type: none;        padding: 2px 2px;        margin: 2px 2px    }    #divStyle ul li a{        cursor: pointer;        margin: 2px 2px;        width: 30px;        height: 30px;        display: inline-block;        border: solid 1px #ffffff;        text-align: center;    }    #divStyle ul li a:hover{        background:none;        border: solid 1px gray;         }        #divStyle ul li img{        border: none;        background:url('http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/icon.gif');    }    /* infowindow相关css */    .common {        font-size: 12px;    }    .star {        color: #ff0000;    }</style></head><body><form id="form1" runat="server"><asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><div style="width:820px;height:520px;border:1px solid gray; margin:0 auto;" id="container"></div><input type="button" value="选择标注样式" onclick="openStylePnl()" /><input type="button" value="关闭" onclick="mkrTool.close()" /><div id="divStyle" >    <ul>        <li>            <a onclick="selectStyle(0)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: 0 0" /></a>            <a onclick="selectStyle(1)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -23px 0" /></a>            <a onclick="selectStyle(2)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -46px 0" /></a>            <a onclick="selectStyle(3)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -69px 0" /></a>            <a onclick="selectStyle(4)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -92px 0" /></a>            <a onclick="selectStyle(5)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -115px 0" /></a>        </li>    </ul></div><asp:HiddenField ID="HidId" runat="server" /><asp:HiddenField ID="HidId1" runat="server" /><asp:HiddenField ID="HidId2" runat="server" /></form></body></html>

以下为主要的javascript,思路是如下：后台生成josn字符串，传值到前台，通过前台的script进行分割，然后显示为marker标注。

输出json字符串

var BASEDATA = [ <%=outhtml()%>]

//创建和初始化地图函数：function initMap(){    window.map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);    map.enableScrollWheelZoom();map.addControl(new BMap.NavigationControl());    var marker=window.addMarker(BASEDATA);    map.addOverlay(marker);//向地图中添加marker}

//创建markerwindow.addMarker = function (data){    map.clearOverlays();    for(var i=0;i<data.length;i++){        var json = data[i];        var p0 = json.point.split("|")[0];        var p1 = json.point.split("|")[1];        var point = new BMap.Point(p0,p1);       // var iconImg = createIcon(json.icon);        var marker = new BMap.Marker(point);        var iw = createInfoWindow(i);        var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});        marker.setLabel(label);        map.addOverlay(marker);        label.setStyle({                    borderColor:"#808080",                    color:"#333",                    cursor:"pointer"        });        (function(){var _json = json;var _iw = createInfoWindow(_json);var _marker = marker;_marker.addEventListener("click",function(){this.openInfoWindow(_iw);   });   _iw.addEventListener("open",function(){_marker.getLabel().hide();   })   _iw.addEventListener("close",function(){_marker.getLabel().show();   })label.addEventListener("click",function(){_marker.openInfoWindow(_iw);   })if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw);}})()    }}

//创建InfoWindowfunction createInfoWindow(json){    var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");    return iw;}  initMap();//创建和初始化地图

后台懒得贴代码了，也很简单，说一下思路。读取数据库后进行字符串拼接，然后传值给前台。

0 0