微信公众号使用百度地图创建坐标点

搜索规则为当前经纬度直径范围内10公里所有店铺信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <?php include_once MvcReg::$_moduleName . '/views/layout/head.php'; ?>
    <link href="webroot/mstore/style/reset_css.css" rel="stylesheet" />
    <link href="webroot/mstore/style/all.css" rel="stylesheet" />
    <script src="webroot/mstore/js/map.js?v=1"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度key"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox.js"></script>
    <!-- 加载百度地图样式信息窗口 -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />


    <link rel="stylesheet" type="text/css" href="webroot/css/mui/mui.min.css?v=<?php echo constant('JSCSS_VERSION') ?>" />
    <link rel="stylesheet" type="text/css" href="webroot/css/mui/mui.picker.min.css?v=<?php echo constant('JSCSS_VERSION') ?>" />
    <link rel="stylesheet" type="text/css" href="webroot/css/mui/mui.poppicker.css?v=<?php echo constant('JSCSS_VERSION') ?>" />

    <script src="webroot/js/mui/mui.min.js?v=<?php echo constant('JSCSS_VERSION') ?>"></script>
    <script src="webroot/js/mui/mui.picker.min.js?v=<?php echo constant('JSCSS_VERSION') ?>"></script>
    <script src="webroot/js/mui/mui.poppicker.js?v=<?php echo constant('JSCSS_VERSION') ?>"></script>
<!--    <script src="?md=index&cl=ajax&at=citydata&v=--><?php //echo constant('JSCSS_VERSION') ?><!--"></script>-->
    <script src="webroot/js/mui/city.data-3.js?v=<?php echo constant('JSCSS_VERSION') ?>"></script>

    <style>.shop_direct{width: 80px;
            display: block;
            margin: 0px auto 5px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            text-decoration: none;
            background: #c71249;
            border-radius: 5px;font-size:16px}
    .shop_direct:visited, .shop_direct:active, .shop_direct:hover, .shop_direct:link{color: #fff;}

        /*#Map{*/
            /*height: 470px;*/
            /*margin-top: 10px;*/
        /*}*/
        body{background:#fff;}
        .region{ padding:10px 10px 5px; position:relative;}
        .region p{ padding:0 8px; height:40px; line-height:40px; font-size:16px; color:#666; background:#f2f2f2; border-radius:4px; -moz-border-radius:4px;}
        .region:after{ width:25px; height:25px; content:""; display:block; position:absolute; right:16px; top:18px; background:url(../webroot/img/center_c3_ico.png) right center no-repeat; background-size:18px 18px;-webkit-transform:rotate(90deg); transform:rotate(90deg);}

        .input_address{ padding:0px 10px; overflow:hidden;}
        .input_address .text{ width:-moz-calc(100% - 110px); width:-webkit-calc(100% - 110px); width:calc(100%); padding:10px 8px; height:40px; line-height:20px; font-size:16px; display:block; color:#333; float:left; background:#f2f2f2; border-radius:4px; -moz-border-radius:4px; border:0px;}
        .input_address input::-webkit-input-placeholder{color:#666;}
        .input_address input::-moz-input-placeholder{color:#666;}
        .input_address input::-ms-input-placeholder{color:#666;}
    </style>

</head>
<body>
<div class="commHead_bg">
    <div class="commHead commHead_white">
        <a class="icoBack" onClick="history.go(-1);"></a>
        <h1>门店查询</h1>
        <a href="index.php" class="fhsy"></a>
    </div>
</div>


<div class="store_map_top" style="padding-top: 40px;">
    <div class="region">
        <p id="showCityPicker3">请选择 省/市</p>
    </div>
    <div class="input_address">
        <form action="" target="frameFile" onsubmit="return false;">
            <input class="text" name="" type="search" id="store_name_add" style="text-align:-webkit-left;"  placeholder="请收入您的详细收货地址"/>
        </form>
    </div>
</div>


<input type="hidden" id="lat" value="" />
<input type="hidden" id="lng" value="" />
<div style="">
    <div id="Map" >
        <!--<img src="images/map.jpg" alt="图片描述" />-->
    </div>
</div>
<!-- Map结束 -->
</body>
</html>
<script>
    var s = 0;
    var page = 0;
    var bsa = [];
    var stop = true;
    var province = '';
    var city = '';
    var provincet = '';
    var cityt = '';

    var smk = null;
    var map = new BMap.Map("Map"); // 创建地图实例
    map.enableScrollWheelZoom(true);   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom(true);    //启用地图惯性拖拽，默认禁用
    $("#Map").height(parseInt($(window).height()-140));
    function shopMarker(storename,address,tel,lng,lat,km,st){
            var point = new BMap.Point(lng, lat);
            var imgstr =  "webroot/mstore/images/1.png";
            var icon = new BMap.Icon(imgstr, new BMap.Size(20, 32),
                {
                    anchor: new BMap.Size(12, 26),
                    infoWindowAnchor: new BMap.Size(10, 0)
                });
            smk = new BMap.Marker(point, {icon: icon});
            var opts = {
                width: 20, // 信息窗口宽度
                height: 110, // 信息窗口高度
                // title: name
                // 信息窗口标题
            };
        var name_km = ' 距离：'+km;

        var scontent = updateCityShop(name, address, tel, lng, lat,name_km,storename,st);
        var infoWindow = new BMap.InfoWindow(scontent, opts); // 创建信息窗口对象

        // 添加坐标点标记文案
        // smk.setTop(true,270);
        // var myLabel = new BMap.Label(name_km, {
        //     offset : new BMap.Size(-30, -25)    //每一个标记点的标注文案 在坐标点的位置
        // });

        // 添加坐标点标记文案
        // myLabel.setStyle({
        //     "color" : "white", //颜色
        //     "fontSize" : "11px", //字号
        //     "border" : "0", //边
        //     "background" : "#00CCFF", //背景颜色
        //     "textAlign" : "center", //文字水平居中显示
        //     "lineHeight" : "20px", //行高，文字垂直居中显示
        //     "width" : "120px",
        //     "border-radius" : "5px" //圆角
        //
        // });
        // smk.setLabel(myLabel);

        // 图标 添加点击弹窗信息
        smk.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
            map.addOverlay(smk);


        // 添加 地图右下角 缩放控件
        map.addControl(new BMap.NavigationControl(
            {
                type : BMAP_NAVIGATION_CONTROL_ZOOM,
                anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
                offset : new BMap.Size(1,1)
            }
        ));

        // 拖拽停止后 获取经纬度
        map.addEventListener("dragend", function(evt){
            var offsetPoint = evt.point.lng +' ----- '+evt.point.lat;
            console.log(offsetPoint)
        });

        // 点击地图任意点 获取经纬度
        map.addEventListener("click", function (evt) {
            var offsetPoint = evt.point.lng +' ----- '+evt.point.lat;
            console.log(offsetPoint)
            // var pointClick=  new BMap.Point(e.point.lng , e.point.lat);
            // map.openInfoWindow(infoWindow, pointClick);
        });


        // 缩放后 获取经纬度
        map.addEventListener("zoomend", function(evt){
            var cp = map.getCenter();
            var offsetPoint = cp.lng + "," + cp.lat;
            console.log(offsetPoint)
        });
    }



    function updateCityShop(name, address, tel, lng, lat,name_km,storename,st) {
        name=name.replace("（加）","");
        var info = '<span ><h4>'+storename+'('+st+')</h4></span> <br/>';
         info += '<span >地址：'+ address + ' <br/> '+name_km+'&nbsp;km</span><span > <br/> 电话：'+ tel+'</span>';
         info +='<div><a href="tel:'+tel+'" class="shop_direct" style="display: inline-block;margin: 2px 28px 0 15px;">联系商家</a><a href="javascript:;" class="shop_direct"  style="display: inline-block" onclick="openLocation(this)" code="'+lng+'-'+lat+'-'+name+'-'+address+'" >一键导航</a></div>';
        return info;
    }


    // 添加原点
    function myLocation(longitude, latitude){
        console.log(longitude+'---'+latitude);
        var point = new BMap.Point(longitude, latitude);
        map.addOverlay(new BMap.Marker(point));
        map.centerAndZoom(point, 12);
    }


    var local = new BMap.LocalSearch(map, {
        onSearchComplete:findPoint
    });

// 绑定回车键
    $('#store_name_add').bind('search', function () {   // input 输入完成回车  触发搜索 
        var inpteVal = jQuery(this).val();
　　　　 if(cityt){
            console.log(provincet+s+cityt+s+inpteVal);
            local.search(provincet+s+cityt+s+inpteVal);
        }else{
            local.search(inpteVal);
        }
    });

    // 获取搜索的结果 经纬度
    function findPoint() {
        console.log(local.getResults());
        if(local.getResults().getPoi(0) == undefined){
            alert("当前城市没有找到结果，试试其他城市吧");
            return;
        }else{
            map.clearOverlays();    // 清空坐标点
            var pp = local.getResults().getPoi(0).point;
            myLocation(pp.lng,pp.lat);
            $("#lat").val(pp.lat);
            $("#lng").val(pp.lng);
            nextPage(0);
        }
    }

    (function ($, doc) {
        $.init();
        $.ready(function () {
            var cityPicker3 = new $.PopPicker({
                layer: 2
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            var cityResult3 = doc.getElementById('showCityPicker3');
            showCityPickerButton.addEventListener('tap', function (event) {　　// MUI 下拉选中 返回城市代码 由local.search()解析经纬度后 触发搜索 
                cityPicker3.show(function (items) {
                    cityResult3.innerText = (items[0] || {}).text + " " + (items[1] || {}).text;
                    // province = (items[0] || {}).value; // 城市代码
                    // city = (items[1] || {}).value;  // 城市代码
                   provincet = (items[0] || {}).text;   // 城市名称
                   cityt = (items[1] || {}).text;   // 城市名称
                    var  inpteVal = jQuery("#store_name_add").val();
　　　　　　　　　　　 if(inpteVal){
                        local.search(provincet+s+cityt+s+inpteVal);
                    }else{
                        local.search(cityt);
                    }
                });
            }, false);
        });

    })(mui, document);

    function nextPage(p) {
        var lat = $("#lat").val();
        var lng = $("#lng").val();
        var url = '?md=index&cl=index&at=nextpage2';
        page=p==0?0:page+1;
        $.ajax({
            url: url,
            // data: {"code": code, "flag": flag, lat: lat, lng: lng, "page": page,"sna":sna},
            data: {lat: lat, lng: lng, "page": page},
            type: 'post',
            dataType: 'json',
            success: function (rdata) {
                if (rdata.status === 0) {
                    bsa = rdata.bs;
                    $("#loading").remove();
                    var html = [];
                    $.each(rdata.data, function (n, value) {
                        var address = value.front_province + value.front_city + value.front_area + value.front_address;

                        shopMarker(value.storename, address, value.tel, value.longitude,value.latitude,value.km,value.st)
                    });
                }else {
                    alert("很抱歉，附近未寻找到门店");
                    // map.clearOverlays();
                    // $("#CityShopList").html('<div style="margin: 20px;font-size: 14px;">很抱歉，附近未寻找到门店</div>');

                }
            }
        });
    }
</script>

<?php
if ($_SESSION["wx_user"]["platform"]=="weixin" ){
    $Config = Config::getInstance();
    $getWechat = $Config->getWechat();
    $jssdk = new JSSDK($getWechat['appid'], $getWechat['appsecret']); //公众号
    $signPackage = $jssdk->GetSignPackage();
    $baseHost = "http://" . $_SERVER['HTTP_HOST'];
    ?>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>

        var isWeixinBrowser = (/micromessenger/i).test(navigator.userAgent);
        if (!isWeixinBrowser){
            <?php  if ($_SESSION["wx_user"]["platform_col"]!="isweixin") {?>
            $("#loading").html('欢迎光临，请手动选择您要查询的区域~');
            <?php }else {?>
            $("#loading").html('您现在环境不支持定位查询， 请手动选择您要查询的地区门店');
            <?php }?>
        }
        var share_title='门店查询';
        var share_desc='<?php echo "http://" . $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>';
        var link='<?php echo "http://" . $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>';
        var imgUrl='<?php echo $baseHost.(!empty($share_setting) && !empty($share_setting["imgUrl"])  ? '/'.$share_setting['imgUrl']: '/webroot/img/rabbit.png') ?>';

        wx.config({
            debug: false,
            appId: '<?php echo $signPackage["appId"]; ?>',
            timestamp: <?php echo $signPackage["timestamp"]; ?>,
            nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',
            signature: '<?php echo $signPackage["signature"]; ?>',
            jsApiList: [
                "getLocation",
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'openLocation',
            ]

        });
        wx.ready(function () {
            wx.getLocation({
                success: function (res) {
                    // console.log(res);
                    longitude = res.longitude;  //这就是获取的经度
                    latitude = res.latitude;  //这就是获取的纬度
                    $("#lat").val(latitude);
                    $("#lng").val(longitude);
                    myLocation(longitude,latitude);
                    nextPage(0);
                },
                cancel: function (res) {
                    //用户没有允许获取微信地理位置
                },
                fail: function (res) {
                    //获取位置失败，一般失败的错误原因是由于获取位置超时
                }});

            wx.onMenuShareAppMessage({
                title: share_title,
                desc: share_desc,
                link: link,
                imgUrl: imgUrl,
                trigger: function (res) {
                    //alert('用户点击发送给朋友');
                },
                success: function (res) {

                },
                cancel: function (res) {
                    //alert('已取消');
                },
                fail: function (res) {
                    //alert(res.errMsg);
                }
            });

            // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareTimeline({
                title: share_title,
                desc: share_desc,
                link: link,
                imgUrl: imgUrl,
                trigger: function (res) {
                    //alert('用户点击分享到朋友圈');
                },
                success: function (res) {

                },
                cancel: function (res) {
                    //alert('已取消');
                },
                fail: function (res) {
                    //alert(res.errMsg);
                }
            });


        });


        function openLocation(obj){
                var lat_long = $(obj).attr('code');
                var s_lat_long = lat_long.split('-');

                // console.log(lat_long);
                wx.openLocation({
                    type: 'gcj02',
                    latitude: parseFloat(s_lat_long[1]),
                    longitude: parseFloat(s_lat_long[0]),
                    name: s_lat_long[2],
                    address: s_lat_long[3],
                    scale: 14,
                    infoUrl: 'http://weixin.qq.com',
                    // success:function(){
                    //     alert(1111);
                    // }
                });

        }
    </script>
<?php }else {?>
    <script>
        $("#loading").html('您现在环境不支持定位查询， 请手动选择您要查询的地区门店');
    </script>
<?php }?>


效果图：
posted @ 2019-12-04 13:48 现世中的素人阅读(658) 评论(0) 收藏举报
刷新页面返回顶部
Sorr

微信公众号使用百度地图创建坐标点

公告

Sorr

微信公众号使用百度地图 创建坐标点

公告

微信公众号使用百度地图创建坐标点
