怎么用vs2013实现带有百度地图搜索功能的网页

使用VS2013,用asp.net开发一个百度地图项目,图片说明

有没有好心的大哥指点一记啊!!

申请百度地图密钥,自己啃api了。:http://developer.baidu.com/map/index.php?title=jspopular

要调用百度的API,地理解码类:BMap.Geocoder

  • 请百度地图密钥,用摆渡的api
  • 自己建立地名、位置(经纬度)数据库,替掉百度,你自己就可给其他人提供API了。哈哈

给你个思路
1、使用.net mvc。
2、要有的地图点的数据库。
3、开发应用的工作量很大我只能给一个大概的架构。
前端代码:

 @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=yjL9PdwLfm1qC3EliLpDe2bw"></script>
    <script type="text/javascript">
        var map = new BMap.Map("baiduMap"); // 创建地图实例
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 15);

        $("#btn1").on('click', function () {
            getPoints("来两个点");
        });

        $("#btn2").on('click', function () {
            getPoints("来三个点");
        });

        //获取点
        //@@ {string} keyword 关键词
        function getPoints(keyword) {
            $.ajax({
                url: "/Map/GetPoints",
                type: "POST",
                dataType: 'json',
                data: { keyword: keyword },
                success: function (data, textStatus, jqXHR) {
                    render(data.points);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("连接服务器出错" + textStatus);
                }
            });
        }

        //渲染在地图上
        function render(data) {
            map.clearOverlays(); //清空地图上所有的点
            //遍历从服务器上获取的点
            for (var i = 0, item; item = data[i]; i++) {
                map.addOverlay(new BMap.Marker(new BMap.Point(item.Longitude, item.Latitude))); //添加到地图上面
            }
        }

    </script>
}
<style type="text/css">
    #navigation {
        float: left;
        position: relative;
        height: 800px;
        width: 20%;
    }

    #baiduMap {
        float: left;
        position: relative;
        height: 800px;
        width: 80%;
    }
</style>
<div id="main">
    <!--导航-->
    <dl id="navigation">
        <dd><button id="btn1">给爷来2个点</button></dd>
        <dd><button id="btn2">给爷来3个点</button></dd>
    </dl>
    <section id="baiduMap"></section>
</div>


服务器代码

 using System.Collections.Generic;
using System.Web.Mvc;

namespace BaiduMap.Controllers
{
    public class MapController : Controller
    {
        /// <summary>
        /// 返回界面给浏览器
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetPoints(string keyword)
        {
            var points = new List<MapPoint> {
                new MapPoint{Longitude = 116.405,Latitude=39.915},
                new MapPoint{Longitude = 116.408,Latitude=39.913},
            };

            if (keyword.Equals("来三个点")) points.Add(new MapPoint { Longitude = 116.404, Latitude = 39.918 });

            return Json(new { points });//返回点集合
        }
    }

    public class MapPoint
    {
        /// <summary>
        /// 经度
        /// </summary>
        public double Longitude { get; set; }
        /// <summary>
        /// 纬度
        /// </summary>
        public double Latitude { get; set; }
    }
}

最后的结果图
图片说明

帮助文档
https://api.jquery.com/jQuery.ajax/
http://developer.baidu.com/map/index.php?title=jspopular/guide/cover
http://developer.baidu.com/map/jsdemo.htm#c1_1