腾讯地图调取

最新推荐文章于 2023-02-20 16:46:34 发布

黑脸樵夫

最新推荐文章于 2023-02-20 16:46:34 发布

阅读量904

点赞数

分类专栏：腾讯地图调取文章标签：腾讯地图

本文链接：https://blog.csdn.net/u013521005/article/details/97804807

版权

腾讯地图调取专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>腾讯地图</title>
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="format-detection" content="telephone=no">

   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=MZJBZ-MORW3-JOA36-3QI4P-5YTVJ-7GBVJ"></script>
   <script src="https://lbs.qq.com/web/library/jquery-1.11.0.min.js"></script>
</head>
<body class="childrenBody" >
   <div id="container" style='height: 500px;'></div>
   <div style="position: absolute;left: 80px;top: 10px;">
       <form class="layui-form" action="">
           <div class="layui-form-item">
           <label class="layui-form-label">选择框</label>
           <div class="layui-input-inline">
               <select id='address' name='address' style='width:100px;' lay-filter="aihao">
                       <option value='{$xaxis}#{$yaxis}#{$dizhi}'>{$dizhi}</option>
                   </select>
           </div>
           <div class="layui-btn huichuan">确定</div>
           </div>
       </form>
   </div>
   <input type="text" id='xaxis' value='{$xaxis}'>
   <input type="text" id='yaxis' value='{$yaxis}'>
   <input type="text" id="dizhi" value='{$dizhi}'>
   <script type="text/javascript" src="__PUBLIC__layui/layui.js"></script>
</body>
<script type="text/javascript">
   layui.use(['form','layer','upload','laydate'],function(){
       var form = layui.form,
   upload = layui.upload,
layer = parent.layer === undefined ? layui.layer : top.layer,
laydate=layui.laydate,
$ = layui.jquery;
var xaxis=$('#xaxis').val(),
   yaxis=$('#yaxis').val(),
   dizhi=$('#dizhi').val();
var city1='三明市';
       var city='';
       var map,markersArray = [];
   console.log(xaxis);
       if(yaxis==''){
           var xaxis=26.263360;
           var yaxis=117.596268;
       }
       var center = new qq.maps.LatLng(xaxis,yaxis);
      map = new qq.maps.Map(document.getElementById("container"),{
   center: center,
   zoom: 13
   });
   //绑定单击事件添加参数
   qq.maps.event.addListener(map, 'click', function(event) {
   $('#xaxis').val(event.latLng.getLat());
   $('#yaxis').val(event.latLng.getLng());
   deleteOverlays();
   addMarker(event.latLng);
   });
   //调用地址解析类
   geocoder = new qq.maps.Geocoder({
   complete : function(result){
       console.log(result.detail.location);
       $('#xaxis').val(result.detail.location.lat);
       $('#yaxis').val(result.detail.location.lng);
   map.setCenter(result.detail.location);
   var marker = new qq.maps.Marker({
   map:map,
   position: result.detail.location
   });
   markersArray.push(marker);
   }
   });
       addMarker12(center);
       //添加标记
       function addMarker(location) {
       var marker = new qq.maps.Marker({
       position: location,
       map: map
       });
       console.log(location);
       $.ajax({
           type: 'get',
           url:'https://apis.map.qq.com/ws/geocoder/v1',
           dataType:'jsonp',
           data:{
               location:location.lat+','+location.lng,
               get_poi:1,
               key:'MZJBZ-MORW3-JOA36-3QI4P-5YTVJ-7GBVJ',
               output: "jsonp"
           },success:function(ret){
               xaxis=ret.result.location.lat;
               yaxis=ret.result.location.lng;
               dizhi=ret.result.address;
               var html='<option value="'+ret.result.location.lat+'#'+ret.result.location.lng+'#'+ret.result.address+'" checked>'+ret.result.address+'</option>';
               for (var i = ret.result.pois.length - 1; i >= 0; i--) {
                   html+='<option value="'+ret.result.location.lat+'#'+ret.result.location.lng+'#'+ret.result.pois[i].title+'">'+ret.result.pois[i].title+'</option>';
               }
               $('#address').html(html);
               form.render();

           }
       })
       markersArray.push(marker);
       }
       function addMarker12(location) {
       var marker = new qq.maps.Marker({
       position: location,
       map: map
       });
       markersArray.push(marker);
       }
       //删除标记
       function deleteOverlays() {
       if (markersArray) {
       for (i in markersArray) {
       markersArray[i].setMap(null);
       }
       markersArray.length = 0;
       }
       }
       form.on('select(aihao)', function(data){
           huoqu=data.value.split("#");
           var dingwei=[];
           addMarker12(new qq.maps.LatLng(huoqu[0],huoqu[1]));
           xaxis=huoqu[0];
           yaxis=huoqu[1];
           dizhi=huoqu[2];
       });
       $('.huichuan').click(function(){
           if(dizhi==''){
               layer.msg('请选择地址');
               return false;
           }
           var index = parent.layer.getFrameIndex(window.name);
parent.setRel(xaxis,yaxis,dizhi);
parent.layer.close(index);
return false;
       })
   })
</script>
</html>

黑脸樵夫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
腾讯地图调取

直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>腾讯地图</title> <meta name="renderer" content="webkit"> <meta http-equiv="X...
复制链接

扫一扫