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

最新推荐文章于 2019-11-07 15:26:42 发布

keithlover001

最新推荐文章于 2019-11-07 15:26:42 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/keithlover001/article/details/19411747

本文介绍了一种利用百度地图API实现地图点标注的方法，并详细展示了如何将这些标注点与数据库结合，实现点位的存储与读取。文章提供了前端页面代码示例及关键的JavaScript逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间研究了一下百度地图的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
}

//创建marker
window.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);
			}
		})()
    }
}

//创建InfoWindow
function 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();//创建和初始化地图

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