JS实现百度地图自由标注并保存-Javascript-极念网

JS实现百度地图自由标注并保存

作者：翅膀的初衷来源：本站原创发布时间：2014/7/24 22:18:31查看数：59867

百度地图应用越来越受喜欢，开发也极为方便，本文介绍如何用JS通过百度地图 API接口来实现地图自由标注地标及显示。

我们需要实现以下功能：

1.城市自由定位

2.可以自定创建标注并保存到数据库

3.从数据库加载数据显示到地图

4.自由定义标注的图标

下面正式开始CODEING：

第一步：申请百度地图API KEY。登录百度开发者中心，然后进入 http://lbsyun.baidu.com/apiconsole/key 点创建应用：

申请成功后，访问应用(ak)下面的那串数据就是我们的API KEY！

第二步，加载地图，先将百度地图的API文件加载进来：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>

然后初始与创建地图：

            var map = new BMap.Map("allmap");                        // 创建Map实例
            map.centerAndZoom('长沙', 13);     // 初始化地图,设置中心点坐标和地图级别
            map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
            map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
            map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
            map.enableScrollWheelZoom();                            //启用滚轮放大缩小
            map.addControl(new BMap.MapTypeControl());          //添加地图类型控件

如果我们需要切换地图，只要执行下面的代码就行了：

map.centerAndZoom('城市名', 13);

添加标注：

            var p = new BMap.Point('经度','纬度');
            var marker = new BMap.Marker(p);//创建一个标准
            map.addOverlay(marker);//将标注添加到地图
            marker.enableDragging();//设置标注可以移动

            var label = new BMap.Label('这是我添加的', { offset: new BMap.Size(25, 0) });
            label.setStyles({
                border: "solid 1px #00f",
                color: "#00f",
                padding: "0 5px"
            });
            marker.setLabel(label); //这里是添加一个文字 ，显示在标注的右边

            var icon = new BMap.Icon('images/k.gif',  new BMap.Size(20, 20), {
                anchor: new BMap.Size(10, 22)
            });
            marker.setIcon(icon); //自定义图标，如果不需要自定义，可以删掉

标注添加完成后，我们怎么将结果保存到数据库呢？我们只要遍历标注对象，然后通过marker.getPosition()取到它的经纬度，保存即可：

上完整代码（保存下来即可直接运行，数据库数据操作略）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>地图标记</title>
    <script src="Scripts/json2.js"></script>
    <script src="http://www.jiniannet.com/Resources/Script/JQuery.js"></script>
    <style type="text/css">
        body, html, #allmap {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #bar {
        width:380px; position:absolute; background:#000000; left:50%; height:25px; border:solid 1px #808080; top:20px; background:#f5f5f5; padding:10px; margin-left:-195px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API"></script>
    <script>
        function addMarker(id, name, x, y) {
            var p = new BMap.Point(x, y);
            var marker = new BMap.Marker(p);//, px = map.pointToPixel(p);
            M.addOverlay(marker);
            marker.enableDragging();
            marker.setTitle(id);

            var label = new BMap.Label(name, { offset: new BMap.Size(25, 0) });
            label.setStyles({
                border: "solid 1px #00f",
                color: "#00f",
                padding: "0 5px"
            });
            marker.setLabel(label);


            var icon = new BMap.Icon('images/k.gif',  new BMap.Size(20, 20), {
                anchor: new BMap.Size(10, 22)
            });
            marker.setIcon(icon);

            var markerMenu = new BMap.ContextMenu();
            var ci = config.marker.index;
            markerMenu.addItem(new BMap.MenuItem('重命名', function () {
                var win = new BMap.InfoWindow('<input type="text" value="' + label.getContent() + '" id="txt_rename_' + ci + '" maxlength="20" style="width:100px" /> <input type="button" onclick="rename(' + ci + ')" value="重命名" />');
                marker.openInfoWindow(win);
            }, 100));
            markerMenu.addItem(new BMap.MenuItem('移除', function () {
                //alert('AJAX移除操作');
                //config.save = false;
                if(parseInt(id)>0){
                    $.ajax({
                        url:'Delete.aspx',
                        type:"post",
                        data:"id="+id,
                        success:function(r){
                            if(r=="ok"){
                                config.marker.remove(ci);
                            }else{
                                alert(r);
                            }
                        }
                    });
                }else{
                    config.marker.remove(ci);
                }
            }, 100));
            marker.addContextMenu(markerMenu);

            config.marker.add(marker);
        }

        var config = {
            runn: false, //是否开始拾取坐标
            marker: {
                list: [],
                add: function (data) {
                    config.marker.index++;
                    config.marker.list.push(data);
                    config.save = false;
                },
                remove: function (i) {
                    config.marker.list[i].remove();
                    config.marker.list[i] = null;
                },
                index:0
            },
            save: true //当前设置是否已保存
        };

        function save() {
            var data = [];
            var html = '';
            for (var i = 0; i < config.marker.list.length; i++) {
                var marker = config.marker.list[i];
                if (marker) {
                    data.push({
                        id: parseInt(marker.getTitle()),
                        title: marker.getLabel().getContent(),
                        x: marker.getPosition().lng,
                        y: marker.getPosition().lat
                    });
                    html += '';
                }
            }
            
            $.ajax({
                url:'Save.aspx',
                type:"post",
                data:"data="+escape(JSON.stringify(data)),
                success:function(r){
                    if(r=="ok"){
                        config.save = true;
                        alert('保存成功');
                    }else{
                        alert(r);
                    }
                }
            });
      
        }

        function rename(i) { //重命名
            if (config.marker.list[i]) {
                var t = $("#txt_rename_" + i).val();
                config.marker.list[i].getLabel().setContent(t);
                M.closeInfoWindow(M.getInfoWindow());
                config.save = false;
            }
        }

        $(function () {
            var w = $(window).width();
            var h = $(window).height();

            var map = new BMap.Map("allmap");                        // 创建Map实例
            map.centerAndZoom($("#city").val(), 13);     // 初始化地图,设置中心点坐标和地图级别
            map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
            map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
            map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
            map.enableScrollWheelZoom();                            //启用滚轮放大缩小
            map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
            var contextMenu = new BMap.ContextMenu();//添加右键菜单
            var txtMenuItem = [
              {
                  text: '放大',
                  callback: function () { map.zoomIn() }
              },
              {
                  text: '缩小',
                  callback: function () { map.zoomOut() }
              },
              {
                  text: '放置到最大级',
                  callback: function () { map.setZoom(18) }
              },
              {
                  text: '查看全国',
                  callback: function () { map.setZoom(4) }
              },
              {
                  text: '在此添加标注',
                  callback: function (p) {
                      addMarker('0', '未命名', p.lng, p.lat);
                  }
              }
            ];

            for (var i = 0; i < txtMenuItem.length; i++) {
                contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
                if (i == 1 || i == 3) {
                    contextMenu.addSeparator();
                }
            }
            map.addContextMenu(contextMenu);设置的

            $('#begin').click(function () {　//
                if (!document.getElementById('begin').disabled) {
                    map.centerAndZoom($("#city").val(), 13);
                }
            });


            window.M = map;
            
            //加载数据库中保存的数据
            $.ajax({
                url:'Output.aspx',
                type:"get",
                success:function(json){
                    for(var i=0;i<json.length;i++){
                        addMarker(json[i].id,json[i].title, json[i].x,json[i].y);
                    }
                }
            });

        });
    // 百度地图API功能
    </script>
</head>
<body>
    <div id="allmap"></div>
    <div id="bar">
        城市：<input type="text" id="city" value="长沙" /> <input type="button" id="begin" value="定位" />
        <input type="button" id="save" value="保存" onclick="save()" />
        <input type="button" id="reset" value="复位" />
    </div>
</body>
</html>

最后我们来看结果图：