高德地图开放平台二次开发 JS API

作者: 孤傲小狼 | 来源:发表于2019-10-09 09:29 被阅读0次

效果图

目的：根据公司的客户库，寻找周边客户，方便销售人员拜访
需求：定位，自定义寻找距离，手机端和pc端自适应，拖动地图异步加载客户情况，点击手机号码自动到拨号界面，链接客户主页，规划路线（次要），其他基础功能等

有疑问可以联系我一块交流，框架mvc+ef（和直接执行sql混用），主要源码如下：
html代码:


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <title>浏览器精确定位</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/diyCircularButton.css" rel="stylesheet" />@*自定义按钮效果*@

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key值"></script>

    <script type="text/javascript">
        /*这里采用淡入效果试试*/
        $(function () {
            $(".bt").css("opacity", "1");
        });

/**/</script>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .info {
            width: 26rem;
        }

        .amap-geolocation-con {
            margin-bottom: 120px;
        }
    </style>
</head>
<body>
    <div id='container'></div>
    <div style="display :none">
        <div id="coordinate">@ViewBag.coordinate</div>@*中心点坐标*@
        <div id="cityname"></div>@*城市名称*@
        <div id="origin">@ViewBag.origin</div>@*定位坐标*@
    </div>

    <div class="input-card" style="width:50px;margin-bottom:180px;height:9rem">
        <div>
            <div class="bt" style="margin-left:-9px">
                <div class="button" id="butDistanceShow" data-toggle="modal" data-target="#setModal" data-afterContent="500"> </div>
                <div style="clear:both"> </div>
            </div>
            <div class="bt" style="margin-left:-9px;margin-top:10px">
                <div class="button" id="gruid" data-afterContent="路线"> </div>
                <div style="clear:both"> </div>
            </div>
            <div class="input-item">
                <div id="gruid" style="margin-left:-13px;"></div>
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="setModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="setModalLabel">
                        设置查询参数
                    </h4>
                </div>
                <div class="modal-body">
                    设置客户查询半径：
                    <select id="distanceSelect" style="width:200px">
                        <option value="500">500m</option>
                        <option value="1000">1km</option>
                        <option value="1500">1.5km</option>
                        <option value="2000">2km</option>
                        <option value="3000">3km</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="distanceSelectChange()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="info" id="info">
        <h4 id='status'></h4><hr>
        <p id='result'></p><hr>
        <p>由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
    </div>

    <script>
        //获取浏览器的宽度和高度大小
        var isonresize = false;
        if (isonresize == false) {
            var widthheight = document.getElementById('container');
            var diywidth = document.body.clientWidth;
            var diyheight = document.body.clientHeight;
            widthheight.style.width = diywidth + "px";
            widthheight.style.height = diyheight + "px";
            isonresize = true;
        }
        window.onresize = function () {
            var widthheight = document.getElementById('container');
            var diywidth = document.body.clientWidth;
            var diyheight = document.body.clientHeight;
            widthheight.style.width = diywidth + "px";
            widthheight.style.height = diyheight + "px";
        }
    </script>
    <script type="text/javascript">
        //定位
        var map = new AMap.Map('container', { resizeEnable: true, zoom: 20 });
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: false,   //定位成功后是否自动调整地图视野到定位点
            });
            map.addControl(geolocation);

            //地图添加放大缩小、比例尺、鹰眼功能
            AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], function () {
                map.addControl(new AMap.ToolBar());
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.OverView({ isOpen: true }));
            })

            var iscoordinate = false;
            geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                    onComplete(result)
                    if (iscoordinate == false) {
                        var coordinatediv = document.getElementById('coordinate');
                        coordinatediv.innerHTML = result.position;
                        iscoordinate = true;
                    }
                    var citynamediv = document.getElementById('cityname');
                    citynamediv.innerHTML = result.addressComponent.city;
                    var origindiv = document.getElementById('origin');
                    origindiv.innerHTML = result.position;

                } else {
                    onError(result)
                }
            });
        });


        //解析定位结果
        function onComplete(data) {
            document.getElementById('status').innerHTML = '定位成功'
            var str = [];
            str.push('定位结果：' + data.position);
            str.push('定位位置：' + data.addressComponent.city);
            str.push('定位类别：' + data.location_type);
            if (data.accuracy) {
                str.push('精度：' + data.accuracy + ' 米');
            }//如为IP精确定位结果则没有精度信息
            str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
            document.getElementById('result').innerHTML = str.join('<br>');
        }
        //解析定位错误信息
        function onError(data) {
            document.getElementById('status').innerHTML = '定位失败'
            document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
        }

        //获取当前地图的中心点并标记
        var circleMarkerCount = 0;
        var circleMarker;
        function GetCircleMarker() {
            if (circleMarkerCount == 1) {
                map.remove(circleMarker); circleMarkerCount == 0;
            } else {
                circleMarkerCount++;
            }
            var center = map.getCenter();
            circleMarker = new AMap.CircleMarker({
                center: center,
                radius: 10,//3D视图下，CircleMarker半径不要超过64px
                strokeColor: 'white',
                strokeWeight: 2,
                strokeOpacity: 0,
                fillColor: 'rgba(0,0,255,1)',
                fillOpacity: 0.5,
                zIndex: 10,
                bubble: true,
                cursor: 'pointer',
                clickable: true,
            })
            circleMarker.setMap(map);

            var coordinatediv = document.getElementById('coordinate');
            coordinatediv.innerHTML = center;
            map.getCity(function (info) {
                var citynamediv = document.getElementById('cityname');

                if (info.city != "") {
                    citynamediv.innerHTML = info.city;
                } else {
                    citynamediv.innerHTML = info.province;
                }
            })
        }

        //查询周边客户并标记点
        var markers = [];
        var marker;
        function GetCustomer(distance) {
            var getcoordinatediv = document.getElementById('coordinate');
            var coordinate = getcoordinatediv.innerHTML;//中心点坐标
            var citynamediv = document.getElementById('cityname');
            var cityname = citynamediv.innerHTML;//城市名
            map.remove(markers)

            var origin;//定位坐标
            origin = document.getElementById('origin').innerHTML;

            //var info = document.getElementById('info');
            //info.style.display = 'none';

            var str = [];
            var CustomerInfo = [];
            var index = 0;
            var count = 0;
            $.ajax({
                type: "get",
                url: '../Show/getEnterpriseLstResult',
                data: { coordinate: coordinate, cityname: cityname, distance: distance },
                ifModified: false,
                async: true,//异步执行
                cache: false, // 这里是关键
                success: function (data) {
                    count = data.rows.length;
                    data.rows.forEach(function (item, i) {
                        var sexname = "先生";
                        if (item.Sex != 1) {
                            sexname = "女士"
                        }
                        CustomerInfo[index] = '名称：' + item.CompanyName + '<br />' + '卖家：' + item.SellerName + '&nbsp;&nbsp;&nbsp;&nbsp;' + '称呼：' + sexname + '<br />' + '手机号码：' + ' <a href=\"tel:' + item.MobilePhone + '\">' + item.MobilePhone + '</a>' + '<br />' + '联系方式：' + item.Telephone + '<br />' + '网址：' + ' <a href=\"' + item.HomePageUrl + '\"   target="_blank">' + item.HomePageUrl + '</a>';
                        str[index] = item.MapCoordinates;
                        index++;

                    })
                    for (var i = 0; i < index; i += 1) {
                        marker = new AMap.Marker({
                            position: new AMap.LngLat(Getx(str[i]), Gety(str[i])),
                            title: "sdsaf",
                            map: map
                        });
                        marker.content = GetCustomerInfo(CustomerInfo[i]);
                        marker.on('click', markerClick);
                        marker.emit('click', { target: marker });
                        markers.push(marker)
                    }

                    var infodiv = document.getElementById('info');
                    infodiv.innerHTML = "寻找半径为：" + distance + "米，周边共有" + count + "个客户"
                }
            });

            var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });


            function markerClick(e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
                var Guide = document.getElementById('gruid');
                var ssss = "sdfsadfsdf('" + origin + "','" + e.target.getPosition() + "')";
                Guide.setAttribute('onclick', ssss)
                //alert(ssss)
                // Guide.innerHTML = "<a href='../Show/GuidedPlanning?origin=" + origin + "&position=" + e.target.getPosition() + "'>路线</a>";
            }


            //标记点自适应地图显示
            //map.setFitView();


            function Gety(str) {
                var q = str.replace("+", "");
                var w = q.split(',');
                y = Number(w[0]);
                return y;
            }
            function Getx(str) {
                var q = str.replace("+", "");
                var w = q.split(',');
                x = Number(w[1]);
                return x;
            }
            function GetCustomerInfo(CustomerInfo) {
                return CustomerInfo;
            }
        }
        function sdfsadfsdf(origin, Position) {
            window.location.href = "../Show/GuidedPlanning?origin=" + origin + "&position=" + Position;
        }
    </script>
    <script>
        //自定义距离改变
        function distanceSelectChange() {
            var textSelect = document.getElementById('distanceSelect');
            var butDistanceShow = document.getElementById('butDistanceShow');
            butDistanceShow.setAttribute('data-afterContent', textSelect.value)

            GetCircleMarker();
            GetCustomer(textSelect.value)
            $('#setModal').modal('hide');
            $(".modal-backdrop").remove();
        }
        //加载地图拖动事件
        window.onload = function () {
            map.on('dragend', showInfoDragend);
        }
        function showInfoDragend() {
            GetCircleMarker();
            GetCustomer($("#butDistanceShow").attr("data-afterContent"))
        }

    </script>
</body>
</html>

css （diyCircularButton.css）代码:

* {
    padding: 0;
    margin: 0;
}
/* 清除浮动 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

html, body {
    height: 100%;
}

body {
    font-family: "Microsoft YaHei";
    background: #E1E1E1;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    overflow: hidden;
}

a {
    text-decoration: none;
}
/*按钮 阴影无扩展 */
.bt {
    display: block;
    width: 50px;
    opacity: 0;
}

.button:before {
    content: "";
    width: 45px;
    height: 45px;
    display: block;
    z-index: -1;
    position: relative;
    background: #ddd;
    left: -4px;
    top: -4px;
    border-radius: 65px;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

.button:after {
    content: attr(data-afterContent);
    color: #09F;
    font-size: 12px;
    width: 100%;
    height: 100%;
    line-height: 38px;
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
}


.button {
    float: left;
    cursor: pointer;
    height: 38px;
    width: 38px;
    display: block;
    position: relative;
    color: black;
    text-align: center;
    line-height: 100px;
    border-radius: 50px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    background: #FFF;
    transition: all 0.5s ease-in;
}

.button {
    float: left;
}

高德地图开放平台二次开发 JS API

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

开发笔记