thinkphp 根据坐标调出地图

其实这个功能并不难，接下来我来给大家讲解一下

首先咱们要申请微信的appid，app密钥,在微信公众平台上有介绍。

咱们先弄个点击事件

<a href="javascript:;" class="weui-media-box__hd didiantb store-info" platitude="{$weidu}" plongitude="{$jingdu}" pname="{$data.place_name}"  paddr="{$data.place_name}" > COME  </a>
// {}里面的数据就是后台传来的，如经纬度，下面有讲解，不要着急

咱们再看一下thinkphp中的代码

 // 地图导航
    public function map(){
        // 获取微信配置
        $weixin_config = C('WECHATCONFIG');
        $id = I('get.id');
        $data = M('place')->where(array('id'=>$id))->find();

        $jssdk = new \Extend\JSSDK($weixin_config['appid'],$weixin_config['appsecret']);
        $signPackage = $jssdk->getSignPackage(); // 签名，随机字符串，时间戳
        // 坐标
        $data_zuobiao = explode(',',$data['zuobiao']);
        // 经度
        $jingdu = $data_zuobiao[0];
        // 维度
        $weidu = $data_zuobiao[1];
        $this->assign('signPackage', $signPackage);
        $this->assign('data',$data);
        $this->assign('jingdu',$jingdu);
        $this->assign('weidu',$weidu);
        $this->display();

下面是最重要的js调出地图了，要引入一个js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

  $(function () {
        $('.store-info').click(function () {
            var _this = $(this);
            //微信config配置信息注入
            wx.config({
                debug: false,
                appId: '{$signPackage.appId}',
                timestamp: '{$signPackage.timestamp}',
                nonceStr: '{$signPackage.nonceStr}',
                signature: '{$signPackage.signature}',
                jsApiList: ['openLocation']
            });
            wx.checkJsApi({
                jsApiList: ['openLocation'],
                success: function (res) {
                    console.log(JSON.stringify(res));
                    console.log(JSON.stringify(res.checkResult.getLocation));
                    if (res.checkResult.getLocation == false) {
                        alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                        return;
                    }
                }
            });

            wx.ready(function () {
                //自动执行的
                wx.checkJsApi({
                    jsApiList: ['openLocation'],
                    success: function (res) {
                    }
                });
                wx.openLocation({
                    latitude: parseFloat(_this.attr('platitude')), // 纬度，浮点数，范围为90 ~ -90
                    longitude: parseFloat(_this.attr('plongitude')), // 经度，浮点数，范围为180 ~ -180。
                    name: _this.attr('pname'), // 位置名
                    address: _this.attr('paddr'), // 地址详情说明
                    scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
                    infoUrl: 'http://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
                });
            });

            wx.error(function (res) {
                console.log(res.errMsg);
            });
        });
    });

就这样一切就ok了，通过经纬度来定位高德地图的位置