百度地图API调用实例之地址标注与位置显示-C/S开发框架|C/S框架网

百度地图API调用实例之地址标注与位置显示-C/S开发框架

作者:csframework|C/S框架网发布日期:2021/12/30 15:23:20

之前弄了个谷歌地图API标注的调用实例，后来要求改成百度地图。

感谢主，通过网上资料(百度地图API，百度地图API详解之地图标注)收集及研究，

终于把百度地图标注和显示功能实现出来了，具体实现方法如下：

1.依然是要弄个地图自定义控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BaiduMap.ascx.cs" Inherits="Web.UserControl.BaiduMap" %>
<!--引用百度地图API-->
<style type="text/css">
    html, body
    {
        margin: 0;
        padding: 0;
    }
    .iw_poi_title
    {
        color: #CC5522;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        padding-right: 13px;
        white-space: nowrap;
    }
    .iw_poi_content
    {
        font: 12px arial,sans-serif;
        overflow: visible;
        padding-top: 4px;
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript">
    var IsOpenCoord = '<%=this.IsOpenCoord %>';
    var curpoint; //当前点击的坐标点；
    $(function () {
        InitMap();
        map.addEventListener("click", function (e) {
            curpoint = e.point.lng + "|" + e.point.lat;

            $("#<%=hidCoord.ClientID %>").val(curpoint);

            //删除所有标注控件
            map.clearOverlays();

            //新增一个标注控件，并在点击的时候标注在地图上
            if (IsOpenCoord == "True")
                addMouseMarker();
        });
    });

    //创建和初始化地图函数：
    function InitMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件

        if (IsOpenCoord == false)
            addMarker(); //向地图中添加marker
    }
    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(120.219375, 30.259244); //定义一个中心点坐标
        map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在一定地图等级的容器中
        window.map = map; //将map变量存储在全局

    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard(); //启用键盘上下左右键移动地图

    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0 });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);
    }


    //加载时创建marker
    function addMarker() {
        //加载时标注点数组
        var markerArr = [{ title: "当前店铺地址", content: '<%=this.ShopAddress %>', point: "<%=this.Coord %>", isOpen: 1, icon: { w: 23, h: 25, l: 0, t: 21, x: 9, lb: 12} }
         ];
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[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, { icon: iconImg });
            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 index = i;
                var _iw = createInfoWindow(i);
                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);
                }
            })()
        }
    }


    //点击时创建marker
    function addMouseMarker() {
        //点击时标注点数组
        var markerArrClick = [{ point: curpoint, isOpen: 1, icon: { w: 23, h: 25, l: 0, t: 21, x: 9, lb: 12} }
         ];
        for (var i = 0; i < markerArrClick.length; i++) {
            var json = markerArrClick[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 mousemarker = new BMap.Marker(point, { icon: iconImg });
            map.addOverlay(mousemarker);
        }
    }

    //创建InfoWindow
    function createInfoWindow(i) {
        var json = markerArr[i];
        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;
    }
    //创建一个Icon
    function createIcon(json) {
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
        return icon;
    }
</script>
<!--百度地图容器-->
<div style="width: 278px; height: 200px; border: #ccc solid 1px;" id="dituContent">
</div>
<asp:HiddenField ID="hidCoord" runat="server"/>

BaiduMap.ascx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Web.UserControl
{
    public partial class BaiduMap : System.Web.UI.UserControl
    {
        Model.Product ProductModel = new Model.Product();
        Model.Users UserModel = new Model.Users();

        public string _coord;
        public bool _isopencoord;
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        #region 属性
        /// <summary>
        /// 经纬度
        /// </summary>
        public string Coord
        {
            get { return _coord; }
            set { _coord = value; }
        }

        /// <summary>
        /// 是否开启设置经纬度功能。
        /// true：确定开启；false：不开启
        /// </summary>
        public bool IsOpenCoord
        {
            get { return _isopencoord; }
            set { _isopencoord = value; }
        } 

        /// <summary>
        /// 产品编号
        /// </summary>
        public string ProductID
        {
            get
            {
                try
                {
                    return Request.QueryString["pid"].ToString();
                }
                catch (Exception)
                {
                    return string.Empty;
                }
            }
        }

        /// <summary>
        /// 会员编号
        /// </summary>
        public string UserID
        {
            get
            {
                try
                {
                    return Request.QueryString["uid"].ToString();
                }
                catch (Exception)
                {
                    return string.Empty;
                }
            }

        }
        /// <summary>
        /// 当前产品实体
        /// </summary>
        public Model.Product ProModel
        {
            get
            {
                ProductModel.ProductID = ProductID;
                ProductModel.ProductName = string.Empty;
                ProductModel.Price = 0;
                ProductModel.ProductContent = string.Empty;

                return BLL.HSSM_Public_DB.ModelToSqlOne<Model.Product>(ProductModel, "ProductID=" + ProductID);
            }
        }



        /// <summary>
        /// 会员实体（卖家）
        /// </summary>
        public Model.Users UModel
        {
            get
            {
                UserModel.Address = string.Empty;

                return BLL.HSSM_Public_DB.ModelToSqlOne<Model.Users>(UserModel, "UserID=" + UserID);
            }
        }

        /// <summary>
        /// 店铺地址
        /// </summary>
        public string ShopAddress
        {
            get { return UModel.Address; }
        }
        #endregion
    }
}

BaiduMap.ascx.cs

(1).标注：

注册地图控件：

<%@ Register Src="../UserControl/BaiduMap.ascx" TagName="BaiduMap" TagPrefix="uc5" %>

调用地图控件：

<uc5:BaiduMap ID="Map1" runat="server" />

后台指定是否启用控件标注位置功能为是：

Map1.IsOpenCoord = true;

这样，运行页面后即可点击鼠标进行标注：

百度地图API调用实例之地址标注与位置显示-C/S开发框架

因为是地址标注，所以只允许标注一次，每次新点击之后，会通过

//删除所有标注控件
map.clearOverlays();

清空之前点击的位置图标，并调用：

//新增一个标注控件，并在点击的时候标注在地图上
addMouseMarker();

新建一个位置图标固定在新的点击位置（详细代码请参考上面的控件实现代码）

（注意看，下面的绿色图标位置与上面的不一样，并且之前的图标也被移除了）：

百度地图API调用实例之地址标注与位置显示-C/S开发框架

同时把新的位置的坐标参数赋给一个隐藏域控件：

$("#<%=hidCoord.ClientID %>").val(curpoint);

然后赋给后台的一个属性，保存时获取该地图控件的经纬度属性赋给某个实体Model的属性然后调用保存方法即可；

(2).显示：

前台一样的思路，也是调用控件：

注册地图控件：

<%@ Register Src="../UserControl/BaiduMap.ascx" TagName="BaiduMap" TagPrefix="uc5" %>

调用地图控件：

<uc5:BaiduMap ID="Map1" runat="server" />

页面加载时后台指定是否启用标注功能属性值为false，同时给控件经纬度属性赋值：

Map1.Coord = Coord;//Coord是本地某个变量或属性，表示具体的经纬度值，以“|”分隔开，如：“120.219375|30.259244”
Map1.IsOpenCoord = false;

这样，页面就能显示地址图标并描述信息：

百度地图API调用实例之地址标注与位置显示-C/S开发框架

CSCODE.NETC/S开发框架 - C/S框架网专注.NET技术、C/S架构快速开发框架软件

参考文档：

C/S开发框架支持套打功能吗?
购买C/S开发框架后能升级为VIP吗？
C/S开发框架的数据访问层用LINQ吗？
C/S开发框架系统异常处理机制(Exception Handler)
C/S开发框架中讲到的ADO Direct是什么?
C/S开发框架V3.0模块引用层次关系表(原)
C/S开发框架高级版部分源码截图
C/S开发框架权限扩展与定制按钮功能详细设计
C/S开发框架Toolbar按钮的动态生成与调用关系
C/S开发框架事务处理机制
C/S开发框架企业版增加WCF服务自承载实时调试后台程序
C/S开发框架企业版数据库改名后需要修改的存储过程、函数和视图
C# 百度地图坐标获取详细地址
C/S客户端Winform窗体调用WebApi接口(C# 实例)
C#.NET百度地图定位API解决方案

旗舰版V5.1
(作者推荐)

轻量框架V2.1
(2021 release)