百度地圖API調用實例之地址標注與位置顯示

之前弄了個谷歌地圖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"/>

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
    }
}

2.

(1).標注：

注冊地圖控件：

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

調用地圖控件：

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

后台指定是否啟用控件標注位置功能為是：

Map1.IsOpenCoord = true;

這樣，運行頁面后即可點擊鼠標進行標注：

因為是地址標注，所以只允許標注一次，每次新點擊之后，會通過

//刪除所有標注控件
map.clearOverlays();

清空之前點擊的位置圖標，並調用：

//新增一個標注控件，並在點擊的時候標注在地圖上
addMouseMarker();

新建一個位置圖標固定在新的點擊位置（詳細代碼請參考上面的控件實現代碼）

（注意看，下面的綠色圖標位置與上面的不一樣，並且之前的圖標也被移除了）：

同時把新的位置的坐標參數賦給一個隱藏域控件：

$("#<%=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;

這樣，頁面就能顯示地址圖標並描述信息：