zoukankan      html  css  js  c++  java
  • 解决kindeditor编辑器中使用百度地图时不能拖动坐标的问题

    覆盖pluginsaidumap文件夹下的map.html代码即可

    <!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Baidu Maps </title>

        <style>
            html {
                height: 100%;
            }

            body {
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: #FFF;
            }
           #map_canvas {
                height: 100%;
                100%;
            }

        </style>
    </head>

    <body>
       
            
        <div id="map_canvas"></div>
     
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
        <script type="text/javascript">
            function getUrlParas() {
                var hash = location.hash,
                    para = {},
                    tParas = hash.substr(1).split("&");
                for (var p in tParas) {
                    if (tParas.hasOwnProperty(p)) {
                        var obj = tParas[p].split("=");
                        para[obj[0]] = obj[1];
                    }
                }
                return para;
            }
            var para = getUrlParas(),
                center = para.address ? decodeURIComponent(para.address) : "百度大厦",
                city = para.city ? decodeURIComponent(para.city) : "北京市";

            var marker_trick = false;
            var map = new BMap.Map("map_canvas");
            map.enableScrollWheelZoom();

            var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
                enableMassClear: false,
                raiseOnDrag: true
            });
            marker.enableDragging();
            map.addOverlay(marker);

            map.addEventListener("click", function (e) {
                if (!(e.overlay)) {
                    map.clearOverlays();
                    marker.show();
                    marker.setPosition(e.point);
                    setResult(e.point.lng, e.point.lat);
                }
            });
            marker.addEventListener("dragend", function (e) {
                setResult(e.point.lng, e.point.lat);
            });

            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map },
                pageCapacity: 1
            });
            local.setSearchCompleteCallback(function (results) {
                if (local.getStatus() !== BMAP_STATUS_SUCCESS) {
                    alert("无结果");
                } else {
                    marker.hide();
                }
            });
            local.setMarkersSetCallback(function (pois) {
                for (var i = pois.length; i--;) {
                    var marker = pois[i].marker;
                    marker.addEventListener("click", function (e) {
                        marker_trick = true;
                        var pos = this.getPosition();
                        setResult(pos.lng, pos.lat);
                    });
                }
            });

            window.onload = function () {
                local.search(center);
              
            };
           
            function search(address) {
               
                local.search(address);
            }
            /*
             * setResult : 定义得到标注经纬度后的操作
             * 请修改此函数以满足您的需求
             * lng: 标注的经度
             * lat: 标注的纬度
             */
            function setResult(lng, lat) {
                map.panTo(new BMap.Point(lng, lat));
               
            }
        </script>
    </body>
    </html>

  • 相关阅读:
    springmvc与servlet初识理解2
    springMVC与servlet的初识
    SpringMVC的依赖和视图解析器配置
    【内网渗透】— 内网信息收集(4)
    机械行业设计软件学习资源整理
    整理的电学课程
    redis src 目录组织结构
    解决Joi报错TypeError: Joi.Validate is not a function问题
    浅谈Node.js开发Web服务器
    JavaScript水仙花数(传递任意n位数)
  • 原文地址:https://www.cnblogs.com/lkd3063601/p/4264306.html
Copyright © 2011-2022 走看看