最近项目用到的腾讯Map demo

作者: geeooooz | 来源:发表于2018-10-27 16:14 被阅读45次

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>为多个Marker添加事件</title>
<style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }
        .btn {
            width: 142px;
        }
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script type="text/javascript" src="/Public/wechat/js/jquery.min.js"></script>
<script>
function init(){
    var center = new qq.maps.LatLng(38.04364,114.47789);//定义中心点
    var map = new qq.maps.Map(document.getElementById("container"),{
        zoom: 12,           
        center: center,     
        panControl: true,   
        zoomControl: true, 
    });
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });
    var anchor = new qq.maps.Point(42, 20),
                size = new qq.maps.Size(80, 80),
                origin = new qq.maps.Point(0,0),
                icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
    var marker = new qq.maps.Marker({
                position: center,
                map: map
            });
    qq.maps.event.addListener(marker, 'click', function() {
        infoWin.open();
        infoWin.setContent('<div style="text-align:center;white-space:'+
        'nowrap;margin:10px;">这是Home标注,<a href="https://www.baidu.com">点击查看</a></div>');
        infoWin.setPosition(center);
    });
    //end

    var latsss = getMapdata();
    console.log(latsss);
    for(var i = 0;i < latsss.data.length; i++) {
        (function(n){
            var mapls =  latsss.data;
            var anchor = new qq.maps.Point(42, 20),
                size = new qq.maps.Size(80, 80),
                origin = new qq.maps.Point(0,0),
                icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
            var marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(mapls[n].latitude,mapls[n].longitude),
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function(){
                infoWin.open();
                infoWin.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;">这是第 ' + n + ' 个标注,<a href="https://www.baidu.com">点击查看</a></div>');
                infoWin.setPosition(new qq.maps.LatLng(mapls[n].latitude,mapls[n].longitude));
            });
        })(i);
    }
}
function getMapdata(){
    var temp;
    $.ajax({
        async: false,
        type: "POST",
        url: '{:U("Map/getMapData")}',
        dataType: "json",//回调函数接收数据的数据格式
        success: function(data){
            temp=data;
        },
        error:function(msg){
          console.log(msg);
        }
    })
    return temp;
}
</script>
</head>
<body onload="init();">
<div id="container"></div>
<p>给三个标注绑定点击事件，当点击标注时，会弹出标注的序号信息。</p>
</body>
</html>

没有的JS自己去引用

后台传入数组即可

下面的是php后台文件文件：
public function getMapData(){
        $map = M('map')->field('longitude,latitude,job_id,poiregions')->where(['id'=>array('in','64,53')])->select();
        $this->ajaxReturn(array('data'=>$map));
    }


    console值：
    Objectdata: Array(2)0: 
    job_id: "0"latitude: "38.054533213792"longitude: "114.48153307002"poiregions: "鹿城苑"__proto__: Object1: job_id: "0"latitude: "38.054533083269"longitude: "114.48121563992"poiregions: "金海华府"

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>为多个Marker添加事件</title>
<style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }

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

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }

        .btn {
            width: 142px;
        }

        #container {
            width: 100%;
            height: 100%;
        }
    </style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
function init() {
    var center = new qq.maps.LatLng(39.916527,116.397128);//定义中心点
    var map = new qq.maps.Map(document.getElementById("container"), {//打开以中心点的地图
        zoom: 12,           //设置地图缩放级别
        center: center,     //设置中心点
        panControl: false,  //不启用平移控件
        zoomControl: false, //不启用缩放控件
    });
    var infoWin = new qq.maps.InfoWindow({//添加到提示窗
        map: map
    });

    //中心点标注 以及创建点击事件 自定义标记  start
    var anchor = new qq.maps.Point(42, 20), //自定义标记
                size = new qq.maps.Size(80, 80),
                origin = new qq.maps.Point(0,0),
                icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
    var marker = new qq.maps.Marker({//创建标记
                position: center,
                map: map
            });
    qq.maps.event.addListener(marker, 'click', function() {//获取标记的点击事件
        infoWin.open();
        infoWin.setContent('<div style="text-align:center;white-space:'+
        'nowrap;margin:10px;">这是Home标注,<a href="https://www.baidu.com">点击查看</a></div>');
        infoWin.setPosition(center);
    });
    //end


    var latlngs = [  //定义要循环的要标注的点
        new qq.maps.LatLng(39.91474,116.37333),
        new qq.maps.LatLng(39.91447,116.39336),
        new qq.maps.LatLng(39.90884,116.41306)
    ];
    console.log(latlngs);
    for(var i = 0;i < latlngs.length; i++) {
        (function(n){
            var anchor = new qq.maps.Point(42, 20), //自定义标记
                size = new qq.maps.Size(80, 80),
                origin = new qq.maps.Point(0,0),
                icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
            var marker = new qq.maps.Marker({//创建标记
                icon: icon,
                position: latlngs[n],
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function() {//获取标记的点击事件
                infoWin.open();
                infoWin.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;">这是第 ' + n + ' 个标注,<a href="https://www.baidu.com">点击查看</a></div>');
                infoWin.setPosition(latlngs[n]);
            });
        })(i);
    }
}
</script>
</head>
<body onload="init();">
<div id="container"></div>
<p>给三个标注绑定点击事件，当点击标注时，会弹出标注的序号信息。</p>
</body>
</html>


没有的JS自己去引用

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>选择位置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }

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

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }

        .btn {
            width: 142px;
        }

        #container {
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
 <input type="text" name="name" id="lat"/><br>
 <input type="text" name="age" id="lng" /><br>
<input type="text" name="poiaddress" id="poiaddress" /><br>
<input type="text" name="cityname" id="cityname" /><br>
<input type="text" name="poiname" id="poiname" /><br>

    <iframe id="mapPage" width="100%" height="100%" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=6NVBZ-YA43F-UHLJY-JS3WK-26HQH-7ZBLM&referer=灵工邦" >
    </iframe>
    <div class="tuichu-box">
                <input class="weui-btn login-btn" id="button" value="提交" type="submit">
    </div>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script>
    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            $("#lat").val(loc.latlng.lat);//纬度
            $("#lng").val(loc.latlng.lng);//经度
            $("#poiaddress").val(loc.poiaddress);//详细地址
            $("#cityname").val(loc.cityname);//市
            $("#poiname").val(loc.poiname);//地址 例：XX小区 即名称
        }
    }, false);
</script>
</body>
</html>


没有的JS自己去引用

最近项目用到的腾讯Map demo

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读