微信公众号-高德地图实例

首先你需要一个高德开发账号，再到后台创建你的应用。因为是用在微信中使用JS调用所以你需要申请个 JS-API

如上申请好后用到的只有他给返的key值，放到你的页面中。

<!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'; ?>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <!-- 移动端 请务必加入 -->
    <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>

<!--    &plugin=AMap.Autocomplete 增加联想打字 输入提示  -->
<!--    &plugin=AMap.Geocoder 增加支持地理编码  -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你猜b7f27e&plugin=AMap.Autocomplete&plugin=AMap.Geocoder"></script>
    <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="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;}
        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>

    <!--    START   -->
    <!--    标记 窗口弹框信息样式  -->
    <style>
        html, body, #container {
            height: 93%;
            width: 100%;
        }

        /*单点样式*/
        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
        /*单点样式*/

        /*去除多点 自带样式 因为我比较喜欢单点样式 所以我必须拿掉多点自带样式*/
        .amap-maps .amap-info-close{display:none;}
        .amap-maps .amap-info-content{background:none; padding:0; box-shadow:none;padding-bottom:15px;}
        .amap-maps .bottom-center .amap-info-sharp{ display:none;}
        .amap-info-contentContainer:hover .amap-info-outer{box-shadow:none;}
        /*去除多点 自带样式*/
    </style>
    <!--    标记 窗口弹框信息样式  -->
    <!--    END     -->

</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 id="container"></div>
</body>
</html>
<script>
    var lo = $("#lng").val();
    var la = $("#lat").val();
    var mk = '<div class="marker-route marker-marker-bus-from"><img style="width: 35px;height: 45px;" src="webroot/mstore/images/red.png" alt=""></div>';
    var map = new AMap.Map('container',{
        resizeEnable: true,
        zooms: [4,12],  //设置地图级别范围
        zoom: 13,   //缩放级别
    });

    // 输入框联想
    var auto = new AMap.Autocomplete({
        input: "store_name_add"
    });

    // 地理编码 地址转坐标
    var geocoder = new AMap.Geocoder({
        city: "全国", // 默认：“全国” 
    });
    var marker = new AMap.Marker();
    function geoCode(P_C) {
        // console.log(P_C);
        // var address  = document.getElementById('address').value;
        geocoder.getLocation(P_C, function(status, result) {
            if (status === 'complete' && result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                // document.getElementById('lnglat').value = lnglat;
                // marker.setPosition(lnglat);
                // map.add(marker);
                // map.setFitView(marker);
                // console.log(lnglat.lng);
                // console.log(lnglat.lat);
                $("#lat").val(lnglat.lat);
                $("#lng").val(lnglat.lng);
                nextPage(0);
                myLocation(parseFloat(lnglat.lng),parseFloat(lnglat.lat))
            }else{
                log.error('根据地址查询位置失败');
            }
        });
    }// 输入框
    $('#store_name_add').bind('search', function () {
        var inpteVal = jQuery(this).val();
        if(cityt){
            geoCode(provincet+cityt+inpteVal);
        }else{
            geoCode(inpteVal);
        }
    });

    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.MapType',
        'AMap.Geolocation',
    ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());

        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        map.addControl(new AMap.OverView({isOpen:true}));

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        // map.addControl(new AMap.Geolocation());
    });

    // 创建多个点
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(17, -35)});
    function setMarker(lng,lat,content) {
        var lnglats = [parseFloat(lng), parseFloat(lat)];
        var marker = new AMap.Marker({
            position: lnglats,
            map: map,
　　　　　　　icon:'你想要更换的的 点 的图标',
        });
        marker.content = createInfoWindow(content);
        marker.on('click', markerClick);
    }

  //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();

    // 创建 标识窗口实体
    function createInfoWindow(c) {
        var t = c.shift();
        var info = c.join("<br/>");
        var d = '<div class="bottom-center amap-info-contentContainer">' +
            '<div class="custom-info input-card content-window-card">' +
            '<div class="info-top"><div>'+t+'</div>' +
            '<img onclick="closeInfoWindow()" src="https://webapi.amap.com/images/close2.gif">' +
            '</div>' +
            '<div class="info-middle" style="background-color: white;">' + info+'</div>' +
            '<div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;">' +
            '<img src="https://webapi.amap.com/images/sharp.png"></div></div></div>';
        return d;
    }

    // 创建当前定位中心点
    var MarkCenterPoint ='';
        function myLocation(longitude, latitude){
        // map.setZoomAndCenter(13, [longitude, latitude]);    //同时设置地图层级与中心点
        // 移除已创建的 marker 这里只针对中心点
        if(MarkCenterPoint){
            map.remove(MarkCenterPoint);
        }
        map.setCenter([longitude, latitude]); //设置地图中心点 [经度、纬度] 保持6位小数点 toFixed(6)
        MarkCenterPoint = new AMap.Marker({
            content:mk,
            position: [longitude, latitude],
            map: map,
        });
        // marker.setMap(map);          　　　　// 作用等同  map: map,
        // map.panTo([longitude, latitude]);   //移动中心视图,以当前经纬度为中心点  等同  map.setCenter([longitude, latitude]);
        // map.add(marker);       　　　　　　　　// 作用等同  map: map,
        // marker.on('click',onMarkerClick);
        // console.log(marker);
    }


    // MUI
    (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) {
                cityPicker3.show(function (items) {
                    cityResult3.innerText = (items[0] || {}).text + " " + (items[1] || {}).text;
                    provincet = (items[0] || {}).text;   
                    cityt = (items[1] || {}).text; 
                    var  inpteVal = jQuery("#store_name_add").val();
                    if(inpteVal){
                        geoCode(provincet+cityt+inpteVal);
                    }else{
                        geoCode(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: {lat: lat, lng: lng, "page": page},
            type: 'post',
            dataType: 'json',
            success: function (rdata) {
                if (rdata.status === 0) {
                    bsa = rdata.bs;
                    $("#loading").remove();
                    var html = [];
                    var lat = '';
                    var lon = '';
                    console.log(rdata)
                    $.each(rdata.data, function (n, value) {
                        var address = value.front_province + value.front_city + value.front_area + value.front_address;
                        if(!value.gd_longitude || !value.gd_latitude){
                            lat = value.latitude;
                            lon = value.longitude;
                        }else{
                            lat = value.gd_latitude;
                            lon = value.gd_longitude;
                        }
　　　　　　　　　　　　　　// 拼装需要的数据
                        content = [];
                        content.push(value.storename);
                        content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>"+address);
                        content.push("电话："+value.tel);
                        content.push('<a href="tel:'+value.tel+'" class="">联系商家</a>');
                        content.push('<a class="" onclick="openLocation(this)" code="'+lon+'-'+lat+'-'+value.storename+'-'+address+'">一键导航</a>');
                        setMarker(lon,lat,content)　　// 创建多点
                    });
                }else {
                    alert("很抱歉，附近未寻找到门店");
                }
            }
        });
    }

</script>

// 我这里使用微信默认定位 搜索定位范围内10公里的所有店铺
<?php
if ($_SESSION["wx_user"]["platform"]=="weixin" ){
    $Config = Config::getInstance();
    $getWechat = $Config->getWechat();
    $jssdk = new JSSDK($getWechat['appid'], $getWechat['appsecret']); //YZ公众号
    $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('欢迎光临YZ，请手动选择您要查询的区域~');
            <?php }else {?>
            $("#loading").html('您现在环境不支持定位查询， 请手动选择您要查询的地区门店');
            <?php }?>
        }
        var share_title='【YZ】门店查询';
        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 }?>

效果图：





还几张图放不了了 超字符了。
百度实例如有需要 也可以参考下我另一篇：https://www.cnblogs.com/G921123/p/11982446.html

posted @ 2020-01-09 10:56 现世中的素人阅读(1591) 评论(0) 编辑收藏举报

刷新页面返回顶部

Sorr

微信公众号-高德地图实例

公告