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
});
})
}