如何在腾讯地图上设置多种颜色的点位和自定义背景弹出框

1.引入地图js

 <script >
        var now = new Date();
        var number = now.getYear().toString() + now.getMonth().toString() + now.getDate().toString()
            + now.getHours().toString() + now.getMinutes().toString() + now.getSeconds().toString();
        document.write('<script language="javascript" type="text/javascript" src=/js/map.js?' + number + '"><\/script\>');
    </script>

2.html内容

<div id="mapD" style="padding:0;width:100%;height:100%;"></div>

3.设置多种颜色点位

var pointMap = new Map;
var weixinmap;
var city_lon=120.000000;
 var city_lat=27.000000
function loadData(currentPage){
    var _url=path()+"getData.do";
    var zoom=12;
    $.ajax({
        async: true,
        type:'POST',
        url:_url,
        dataType:'json',
        data: {currentPage:currentPage,pageSize:9999},
        success:function(data){
           var gg_pos1 = bd09togcj02(city_lon, city_lat);//转化腾讯坐标系
            weixinmap = new qq.maps.Map(document.getElementById("mapD"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(gg_pos1[1],gg_pos1[0]),
                zoom:zoom,
                disableDefaultUI: true
            });
            weixinmap.setMapTypeId(qq.maps.MapTypeId.HYBRID);
            $.each(data,function(i,c){
                if(i<11){
                    c.red_type=1//设置另外颜色点位的状态
                }
            })
            add_overlay(data,0)
        },
        error:function(){
        }
    });
}

4.设置覆盖物

var chooseInfoWin;
function add_overlay(data,page_num){
    var page_size=50;
    for(var i=page_size*page_num;i<data.length && i<page_size*(page_num+1);i++){ //循环按一定数量拉点位
        (function(x){
            c=data[x]
            var gg_pos = bd09togcj02(c.lon, c.lat)
            var  marker = new qq.maps.Marker({
                map : weixinmap,
                position : new qq.maps.LatLng(gg_pos[1],gg_pos[0]),
            });
            var _html="";
            _html+="<div style='width:282px;height:250px;background: url(images/bg.png) no-repeat;z-index:99'>"//背景图片
            _html+="<h1 style='color: #fff;font-size: 18px;margin: 0px 0px 0px 22px;width:230px;position: relative;height: 30px;top: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>"+c.company_name+"</h1>"
            _html+="<img src="+head_img+" style='width: 215px;height: 140px;border-radius: 8px;margin: 20px 0px 0px 30px;'>"
            _html+="<div><img src='imagesSwyt/mapdw.png' style='width: 16px;height: 21px;float: left;margin: 5px 5px 0 5px;'>"
            _html+="<h2 style='color:#fff;width: 150px;font-size: 16px;line-height: 35px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>"+addrs+"</h2></div>"
            _html+="<div style='position: absolute;right: 10px;top: 195px;'><img src='imagesSwyt/mapsx.png' style='width: 20px;height: 17px;float: left;margin: 10px 5px 0px 10px;'>"
            _html+="</div></div></div>"
            //设置不同颜色点位
           设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，
            // 该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
            if(c.red_type>0){
                var anchor = new qq.maps.Point(0, 0),
                    size = new qq.maps.Size(25, 31),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage(
                        "images/mapdw2.png",
                        size,
                        origin,
                        anchor
                    );
                marker.setIcon(icon);
            }else{
                var anchor = new qq.maps.Point(0, 0),
                    size = new qq.maps.Size(25, 31),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage(
                        "images/mapdw1.png",
                        size,
                        origin,
                        anchor
                    );
                marker.setIcon(icon);
            }
            var info = new qq.maps.InfoWindow({
                map: weixinmap,
                maxWidth:400,
                maxHeight:500,
                size : new qq.maps.Size(10, 10)
            });
            //自定义点击点位弹出框
            qq.maps.event.addListener(marker, 'click', function() {
                if(chooseInfoWin!=null)
                {
                    chooseInfoWin.close();
                }
                $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4)").css({"opacity":"0"})
                info.open();
                info.setContent(_html);
                info.setPosition(new qq.maps.LatLng(gg_pos[1],gg_pos[0]));
                chooseInfoWin=info;
               //隐藏地图自带的白色多块背景
                setTimeout(function () {
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(2)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(3)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(4)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(5)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(6)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(7)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(8)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(9)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(10)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(11)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(12)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(13)").css({"width":"1px","height":"1px"})
                    $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(14)").css({"top":"-255px","left":"-135px"})
                },300)
                setTimeout(function () {
                $("#mapD > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(4)").css({"opacity":"1"})
                },310)
            });
            info.close();
            qq.maps.event.addListener(weixinmap, 'click', function() {
                chooseInfoWin.close();
            });
        })(i);
    }
    if(i<data.length ){
        setTimeout(function () {
            add_overlay(data,page_num+1);
        }, 1);
    }else{
        drawPolygon()//画区域边线
    }
}

// 5.设置区域边线

function drawPolygon(){
    $.getJSON('../map/china-main-city/taoshandw.json', function (data) {//获取json中的区域点位
        console.log(data[0][0]+","+data[0][1])
            var a=new Array();
        for(var j=0;j<data.length;j++){
            var gg_pos1 = bd09togcj02(data[j][0], data[j][1]);
            a.push(new qq.maps.LatLng(data[j][1],data[j][0]));
        }
        var WxColor=qq.maps.Color.fromHex("#9a9a9a", 0.1);//填充颜色
        var polygon = new qq.maps.Polygon({
            path:a,
            strokeColor: "#0db9c9",
            strokeOpacity:1,
            strokeWeight: 2,
             fillColor: WxColor,
             fillOpacity:0.1,
            map: weixinmap
        });
    })

}