MVC5使用百度地圖API(JavaScript library庫)【檢索資訊視窗類】

風靈使發表於2018-09-08
MVC地圖APIJavaScript

##Models資料夾實體類
Area.cs

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

namespace MvcDemo.Models
{
    public class Area
    {
        public int Id { get; set; }
        public string Name { get; set; }

        public string Description { get; set; }

        public double PointX { get; set; }

        public double PointY { get; set; }

        public IQueryable<Area> GetData()
        {
            var data = new List<Area>();
            for (var i = 1; i <= 100; i++)
            {
                data.Add(new Area() { Id = i, Name = "深圳區" + i, Description = "這裡是村" + i, PointX = i + 114.059917, PointY = i + 22.545519 });
            }
            return data.AsQueryable();
        }
    }

}

##控制器層
BaiduMapController.cs

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcDemo.Models;
using Newtonsoft.Json;

namespace MvcDemo.Controllers
{
    public class BaiduMapController : Controller
    {
        public ActionResult BaiduMap()
        {
            return PartialView();
        }

        public ContentResult GetData(string name = null)
        {
            var area = new Area();
            IEnumerable<Area> data = string.IsNullOrEmpty(name)
                ? area.GetData()
                : area.GetData().Where(n => n.Name.Contains(name));//.Where(n => n.Name == name);
            var result = JsonConvert.SerializeObject(data);
            return Content(result);
        }
    }
}

##檢視
BaiduMap.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地圖Demo</title>
    <style type="text/css">
        #container {
            height: 780px;
            margin: 20px 15%;
            width: 70%;
        }

        .searchDiv {
            margin-top: 30px;
            text-align: center;
        }

        .pointDiv {
            margin-top: 5px;
            text-align: center;
        }
    </style>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=M***************1"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
</head>
<body>
    <div class="searchDiv">
        <input type="text" name="name" id="searchInput" />
        <input type="button" value="查詢" id="search" />
    </div>
    <div class="pointDiv">
        X：<input id="point-x" />
    </div>
    <div class="pointDiv">
        Y：<input id="point-y" />
    </div>
    <div id="container"></div>
    <script type="text/javascript">
    $(function() {
        setmap("");
        $("#search").click(function() {
            var val = $("#searchInput").val();
            setmap(val);
        });
    });

    function setmap(queryval) {
        var map = new BMap.Map("container", { minZoom: 1, maxZoom: 50 }); // 建立地圖例項

        map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP] })); //新增地圖型別控制元件
        map.addControl(new BMap.NavigationControl()); //新增地圖平移縮放控制元件
        map.addControl(new BMap.ScaleControl()); //新增比例尺控制元件
        if (queryval=="") {
            map.centerAndZoom(new BMap.Point(121.464715,31.264803), 12); // 初始化地圖，設定中心點座標和地圖級別
        } else {
            map.centerAndZoom(queryval, 15); // 初始化地圖，用城市名設定中心點和地圖級別

        }

        map.addEventListener("click", function(e) {
            $("#point-x").val(e.point.lng);
            $("#point-y").val(e.point.lat);
        });
        $.get('@Url.Action("GetData", "BaiduMap")', { name: queryval }, function(data) {
            data = $.parseJSON(data);

            var point = new Array(); //存放標註點經緯資訊的陣列
            var marker = new Array(); //存放標註點物件的陣列
            var content = new Array(); //存放提示資訊視窗物件的陣列
            var searchInfoWindow = new Array(); //存放檢索資訊視窗物件的陣列
            for (var i = 0; i < data.length; i++) {
                point[i] = new BMap.Point(data[i].PointX, data[i].PointY); //迴圈生成新的地圖點
                marker[i] = new BMap.Marker(point[i]); //按照地圖點座標生成標記
                map.addOverlay(marker[i]); //新增點
                if (data.length == 1)
                    map.centerAndZoom(point[0], 18); // 初始化地圖，設定中心點座標和地圖級別

                content[i] = data[i].Description; // 資訊視窗內容
                searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, content[i], {
                    //建立百度樣式檢索資訊視窗物件
                    title: data[i].Name, //標題
                    width: 290, //寬度
                    //height: 55,              //高度
                    panel: "panel", //檢索結果皮膚
                    enableAutoPan: true, //自動平移
                    enableSendToPhone: false, //是否啟動傳送到手機功能,預設開啟
                    searchTypes: [
                        //BMAPLIB_TAB_SEARCH, //周邊檢索
                        BMAPLIB_TAB_TO_HERE, //到這裡去
                        BMAPLIB_TAB_FROM_HERE //從這裡出發
                    ]
                });
                //新增點選事件
                marker[i].addEventListener("click",
                    (function(k) { // js 閉包
                        return function() {
                            //將被點選marker置為中心
                            //map.centerAndZoom(point[k], 18);
                            //在marker上開啟檢索資訊視窗
                            searchInfoWindow[k].open(marker[k]);

                        };
                    })(i)
                );
            }
        });
    }
    </script>
</body>
</html>

##執行結果如圖:
這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

相關文章