关于微信公众号地图开发篇3：开发篇

最新推荐文章于 2024-12-26 10:46:55 发布

原创最新推荐文章于 2024-12-26 10:46:55 发布 · 421 阅读

CC 4.0 BY-SA版权

1：获取当前位置，规划路线图，计算一对多位置的距离和需要的时间。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

.placeholders h4 {
margin-bottom: 0;
}

.placeholder {
margin-bottom: 20px;
}

.placeholder img {
display: inline-block;
border-radius: 50%;
}

.underline_model {
padding-bottom: 5px;
border-bottom: 1px solid #eee;
}

.center-vertical {
margin-top: 25px;
}

html, body {
width: 100%;
height: 100%;
}

* {
margin: 0px;
padding: 0px;
}

#container {
min-width: 100%;
min-height: 10%;
}

.carousel-control.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, .0) 0,
rgba(0, 0, 0, .0001) 100%);
}

.carousel-control.right {
   background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0,
       rgba(0, 0, 0, .0) 100%);
}
</style>
</head>
<body >
<div id="config">
//此处是vue的简单使用，可以使用其它的原生js或者jquery给隐藏区域赋相对应的值
       <input type="hidden" id="appId" name="appId" v-model="goodsList.appid"/>
   <input type="hidden" id="timestamp" name="timestamp" v-model="goodsList.timestamp"/>
   <input type="hidden" id="nonceStr" name="nonceStr" v-model="goodsList.nonceStr"/>
   <input type="hidden" id="signature" name="signature" v-model="goodsList.signature"/>
   <input type="hidden" id="latitude" name="latitude" />
   <input type="hidden" id="longitude" name="longitude"/>
   <span v-text="result"></span>
   </div>
   <div class="container" style="background-color: rgb(242, 242, 242);">
       <div class="row ">
           <div class="col-xs-12 col-sm-12" id="normalDealer">
           </div>
       </div>
   </div>

   <div class="container" style="background-color: rgb(242, 242, 242);">
       <div class="row ">
           <div class="col-xs-12 col-sm-12">
               <label>当前位置：</label><label id="localAddress"></label>
           </div>
       </div>
   </div>
   
   <div class="container" style="background-color: rgb(242, 242, 242);">
       <div class="row ">
           <div class="col-xs-12 col-sm-12">
               <div id="container"></div>

           </div>
       </div>
   </div>
   <div class="container" style="background-color: rgb(242, 242, 242);">
       <div class="row ">
           <div class="col-xs-12 col-sm-12">
               <div id="container1"></div>

</div>
       </div>
   </div>

   <p><p>
   
   <div class="container" style="background-color: rgb(242, 242, 242);">

       <div class="row ">
           <div class="">
               <div id="dealerList">

               </div>
           </div>
       </div>
   </div>
   
   <p>
   <p>
   <p>

   //定义坐标
               new Vue({
   el:'#config',
   data:{goodsList:"",result:""},
   created:function(){
   var url=rootPath + '/config/getConfig';
   var self=this;
   $.get(url,function(data){

   self.goodsList=data;
   var intervalId=setInterval(function () {
       var ifappId=$("#appId").val()
       if(ifappId!=null && ifappId!= undefined){
           clearInterval(intervalId);
           //将公众号的唯一标识，生成签名的时间戳，生成签名的随机串，签名,传给微信服务器以便校验配置
           wx.config({
                      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                      appId: $("#appId").val(), // 必填，公众号的唯一标识
                      timestamp:$("#timestamp").val(),// 必填，生成签名的时间戳
                      nonceStr: $("#nonceStr").val(),// 必填，生成签名的随机串
                      signature: $("#signature").val(),// 必填，签名
                      jsApiList: [ 'checkJsApi', 'openLocation','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                      });
           // getLocation
           /*
               wx.getLocation({
                             type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                             success: function (res) {
                             var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                             var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                             var speed = res.speed; // 速度，以米/每秒计
                             var accuracy = res.accuracy; // 位置精度

                             }
                         });*/

               //ready
               wx.ready(function(){
                         var latitude;
                         var longitude;
                         var speed;
                         var accuracy;
                         // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                         wx.getLocation({
                         success : function(res) {
                         latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                         longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                         /* speed = res.speed; // 速度，以米/每秒计 */
                         accuracy = res.accuracy; // 位置精度
                         $("#latitude").val(latitude);
                         $("#longitude").val(longitude);
                         //代码块
                                         //定位
                                         var latitude=$("#latitude").val();//维度
                                         var longitude=$("#longitude").val();//精度；
                                     //设置地图的图层的大小以及大小，中心位置
                                         var totalheight=$(window).height();
                                         $("#container").height(totalheight * 0.5);
                                         var myOptions = {
                                             zoom : 13,
                                             center : new qq.maps.LatLng(latitude,
                                                     longitude)
                                         };
                                         map = new qq.maps.Map(document.getElementById("container"),
                                                 myOptions);
                                     info = new qq.maps.InfoWindow({map: map});

                                     geocoder = new qq.maps.Geocoder({
                                         complete : function(result){
                                             $("#localAddress").style='inline';
                                             $("#localAddress").text(result.detail.address);
                                         map.setCenter(result.detail.location);
                                         var marker = new qq.maps.Marker({
                                         map:map,
                                         position: result.detail.location,
                                         });
                                         //添加监听事件当标记被点击了设置图层
                                         qq.maps.event.addListener(marker, 'click', function() {
                                         info.open();
                                         info.setContent('<div style="width:280px;height:100px;">'+
                                         result.detail.address+'</div>');
                                         info.setPosition(result.detail.location);
                                         });
                                         }
                                 });

                                     //地图画路线
                                     directionsService = new qq.maps.DrivingService({
                                 complete : function(response){
                                 directions_routes = response.detail.routes;
                                 //所有可选路线方案
                                 for(var i = 0;i < directions_routes.length; i++){
                                 var route = directions_routes[i],
                                 legs = route;
                                 //调整地图窗口显示所有路线
                                 map.fitBounds(response.detail.bounds);
                                 //所有路程信息
                                 var steps = legs.steps;
                                 polyline = new qq.maps.Polyline(
                                 {
                                 path: route.path,
                                 strokeColor: '#3893F9',
                                 strokeWeight: 6,
                                 map: map
                                 }
                                 )
                                 }
                                 }
                                 });
                                     calcRoute(latitude,longitude);
                                     geocoder.getAddress(new qq.maps.LatLng(latitude,longitude));
                                     getDealerListForSosHelp(latitude,longitude)
                         }
                         });
                         });
       }

       }, 1000);
   })
   }
   });

               function calcRoute(latitude,longitude) {
                   $.ajax({
                   type:"GET",
                   url:rootPath + "/maintain/getDealerListForSosHelp?openId="+openId,
                   dataType:"json",
                   async: false,
                   contentType:"application/json",
                   data:null,
                   success:function(resultData){
                       var lat=resultData[0].LAT;//维度
                       var lng=resultData[0].LNG;//经度
                       var start=latitude+','+longitude;
                               var end=lat+','+lng;
                       var start_name = start.split(",");
                       var end_name =end.split(",");
                       var policy = 'LEAST_TIME';
                       directionsService.setPolicy(qq.maps.DrivingPolicy[policy]);
                       directionsService.search(new qq.maps.LatLng(start_name[0], start_name[1]), new qq.maps.LatLng(end_name[0], end_name[1]));
                       var marker = new qq.maps.Marker({
                           map:map,
                           position: new qq.maps.LatLng(end_name[0],end_name[1]),
                           icon: "http://webapi.amap.com/theme/v1.3/markers/n/end.png"
                           });
                       var marker = new qq.maps.Marker({
                           map:map,
                           position: new qq.maps.LatLng(start_name[0],start_name[1]),
                           icon: "http://webapi.amap.com/theme/v1.3/markers/n/start.png"
                           });
                   }
                   });
               }
               //调用获取位置方法
               //查询常用经销商电话
               $.ajax({
           type:"GET",
           url:rootPath + "/maintain/getNormalDealers?openId="+openId,
           dataType:"json",
           async: false,
           contentType:"application/json",
           data:null,
           success:function(data){
               var normalData=data[1];

</html>