sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
    <meta name="referrer" content="always" />
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/vue.js"></script>
    <script src="js/vant-ui.js"></script>
    <script src="js/main.js"></script>
    <title></title>
</head>
<style>
    body {
        background: transparent;
    }

    .pageView.bdjl {
        background: transparent;
    }

    .pageView.bdjl .search {
        padding-top: 0;
        top: 0px
    }

    .doneBtn {
        font-size: 0.3rem;
        width: 40px;
        text-align: center;
        color: #fff;
        margin-left: 10px;
    }

    .pageView.bdjl {
        padding-top: 0rem;
    }

    .a-center p {
        font-size: 0.3rem
    }

    .a-center .address {
        font-size: 0.2rem;
        margin-top: 0.1rem;
        color: #999;
    }

    .addressItem {
        border-bottom: 1px solid#ccc;
        padding: 0.2rem 0;
    }
    .pagetitle {
      height: 1rem;
      font-size: 0.3rem;
      padding-top: 0.1rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="pageView bdjl">
            <div class="pagetitle">
                 <p>选择地址：{{chooseAddressDesc.address }}{{ chooseAddressDesc.sematicDescription }}</p>
            </div>
            <!-- <div class="search flex a-center">
                <div class="searchbox">
                    <svg t="1589079341958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5394" width="22" height="22">
          <path d="M883.626667 823.04l-145.066667-144.64A337.92 337.92 0 0 0 810.666667 469.333333a341.333333 341.333333 0 1 0-341.333334 341.333334 337.92 337.92 0 0 0 209.066667-72.106667l144.64 145.066667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667zM213.333333 469.333333a256 256 0 1 1 256 256 256 256 0 0 1-256-256z" p-id="5395" fill="#bfbfbf"></path>
        </svg>
                    <input type="search" placeholder="请输入地址" v-model="keyword">
                </div>
                <div class="doneBtn">确定</div>
            </div> -->
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
    apiready = function() {
        var d = api.pageParam.d;
        new Vue({
            el: '#app',
            data: {
                radio: '1',
                map: '', // 百度地图
                keyword: '', // 关键字地址
                list: [],
                d: d,
                chooseAddress: '', // 选中的标注
                chooseAddressDesc : '', // 选中的标注经纬度对应的地址
            },
            watch: {
                keyword: function(nw, ow) {
                    this.getCitysByKeyword();
                },
                chooseAddress: function(nw, ow) {
                    this.getAddressByCoor();
                }
            },
            methods: {
                init: function() {
                    var _this = this;
                    this.map = api.require('bMap');
                    if (api.systemType == 'ios') {
                        this.map.initMapSDK(function(ret) {
                            if (ret.status) {}
                        });
                    }
                    this.openMap();
                    //  监听键盘搜索时间
                    this.addEvent('doneChoose',function() {
                         _this.sendEvent('chooseDistict',{
                               lon : _this.chooseAddressDesc.lon,
                               lat : _this.chooseAddressDesc.lat,
                               p : _this.chooseAddressDesc.province,
                               c : _this.chooseAddressDesc.city,
                               d : _this.chooseAddressDesc.district,
                               a : _this.chooseAddressDesc.sematicDescription
                         })
                    })
                },
                //  通过关键字获取地址列表
                getCitysByKeyword: function() {
                    this.map.searchInCity({
                        city: this.d,
                        keyword: this.keyword,
                        pageIndex: 0,
                        pageCapacity: 20
                    }, function(ret, err) {
                        if (ret.status) {
                            console.log(JSON.stringify(ret));
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                //  打开地图
                openMap: function() {
                    var _this = this;
                    this.map.open({
                        rect: {
                            x: 0,
                            y: 50,
                            w: api.winWidth,
                            h: api.frameHeight
                        },
                        zoomLevel: 15,
                        showUserLocation: true,
                        fixedOn: api.frameName,
                        fixed: true,
                        center : {
                          lon: 116.213,       //数字类型；打开地图时设置的中心点经度
                          lat: 39.213
                        }
                    }, function(ret1) {
                        if (ret1.status) {
                            //  添加地图监听
                            _this.addMap();
                            //  获取当前订单
                            _this.ifHasPrme('location', function(ret2) {
                                if (ret2 == true) {
                                    _this.map.getLocation(function(ret3, err) {
                                        if (ret3.status == true || ret3.status == 'true') {
                                            _this.chooseAddress = ret3;
                                            _this.map.setCenter({
                                                coords: {
                                                    lon: ret3.lon,
                                                    lat: ret3.lat
                                                },
                                                animation: true
                                            });
                                            _this.addAntion();
                                        }
                                    })
                                }else if(ret2 == false){
                                  api.closeWidget({
                                    id : 'A6040771066321', //这里是应用id
                                    silent : true,
                                    retData : {
                                      name : 'closeWidget'
                                    },
                                    animation : {
                                      type : 'flip',
                                      subType : 'from_bottom',
                                      duration : 500
                                    }
                                  });
                                }
                            })
                        }
                    });
                },
                // 为地图添加点击事件
                addMap: function() {
                    var _this = this;
                    this.map.addEventListener({
                        name: 'click'
                    }, function(ret3, err) {
                        if (ret3) {
                            if (ret3.status == true || ret3.status == 'true') {
                                _this.chooseAddress = ret3;
                                _this.map.setCenter({
                                    coords: {
                                        lon: ret3.lon,
                                        lat: ret3.lat
                                    },
                                    animation: true
                                });
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                //  将经纬度转换成地址
                getAddressByCoor: function() {
                    var _this = this;
                    _this.map.getNameFromCoords({
                        lon: this.chooseAddress.lon,
                        lat: this.chooseAddress.lat
                    }, function(ret, err) {
                        if (ret.status) {
                            if(ret.status == true || ret.status == 'true'){
                              _this.chooseAddressDesc = ret;
                              _this.addAntion();
                            }
                        }
                    });
                },
                // 为地图添加标注
                addAntion: function() {
                    var _this = this;
                    var an = {
                        id: 1,
                        lon: this.chooseAddress.lon,
                        lat: this.chooseAddress.lat
                    }
                    _this.addBullde(1);
                    this.map.addAnnotations({
                        annotations: [an],
                        icon: 'widget://',
                        draggable: true
                    }, function(ret) {
                        if (ret) {
                            _this.addBullde(ret.id)
                        }
                    });
                },
                //  点击显示旗袍
                addBullde: function() {
                    return;
                    var _this = this;
                    this.map.setBubble({
                        id: 1,
                        rect: {
                            x: 10,
                            y: 5,
                            w: 300,
                            h: 100
                        },
                        content: {
                            title: this.chooseAddressDesc.address,
                            subTitle: this.chooseAddressDesc.sematicDescription,
                        },
                        styles: {
                            titleColor: '#000',
                            titleSize: 16,
                            subTitleColor: '#999',
                            subTitleSize: 12,
                            illusAlign: 'left',
                            width : 300,
                            height : 200,
                        }
                    }, function(ret) {
                        if (ret) {
                            alert(JSON.stringify(ret));
                        }
                    });
                }
            },
            mounted: function() {
                this.init();
            }
        })
    }
</script>

</html>