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

效果图

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

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

    
    
    
    
    
    
    
    
    
    @*自定义按钮效果*@

    

    
    


    

    

        
@ViewBag.coordinate
@*中心点坐标*@
        
@*城市名称*@
        
@ViewBag.origin
@*定位坐标*@
    

    

        

            

                
 
                
 
            
            

                
 
                
 
            
            

                

            
        
    

    
    

        

            

                

                    
                        ×
                    
                    

                        设置查询参数
                    
                
                

                    设置客户查询半径：
                    
                        500m
                        1km
                        1.5km
                        2km
                        3km
                    
                
                

                    
                        关闭
                    
                    
                        确定
                    
                
            
        
    

    

        

        

        
由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。
    

    
    
    

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;
}