百度地图做网点地图-jeecms
生活随笔
收集整理的這篇文章主要介紹了
百度地图做网点地图-jeecms
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前總覺(jué)得什么插件,框架。。都有api和既有的套路去實(shí)現(xiàn),會(huì)很容易實(shí)現(xiàn)。。。。。然而今天把百度地圖用于公司設(shè)備的網(wǎng)點(diǎn)地圖,還是耗時(shí)挺多的~~這里僅僅是為了記錄一下完成了這個(gè)功能!就是把所有點(diǎn)都顯示在地圖上,開(kāi)始不知道有方法了,自己想應(yīng)該怎么去實(shí)現(xiàn),怎么才能把所有點(diǎn)放在地圖里面,獲取所有點(diǎn)x、y的最大最小值。。。。。哈哈,后面才發(fā)現(xiàn)百度已經(jīng)有做這個(gè)方法,直接扔數(shù)組進(jìn)去就o了~~~~~
網(wǎng)站用了jeecms,這里就只放js
var arr= [];
var li = [];
[@cms_content_list typeId='1' count='100' channelId='103' orderBy='4']
[#list tag_list as a5]
arr.push([${a5.attr.site}, '${a5.title}', '${a5.attr.xxdz}']);
[/#list]
[/@cms_content_list]
for(var j=0; j<arr.length; j++){
li.push(new BMap.Point(arr[j][0],arr[j][1]));
}
var map = new BMap.Map("map-box"); // 創(chuàng)建地圖實(shí)例
map.enableScrollWheelZoom(true);
map.setViewport(li); //設(shè)置所有點(diǎn)都在地圖上
for(var i = 0; i<arr.length; i++){
var opts = {
width : 250,
offset : new BMap.Size(0, -22),
title : '<span class="iwTitle" title="'+ arr[i][2] +'">'+ arr[i][2] +'</span>', // 信息窗口標(biāo)題
};
var content = '<span class="iwContent" title="'+ arr[i][3] +'">'+ arr[i][3] +'</span>';
// 創(chuàng)建標(biāo)注對(duì)象并添加到地圖
var marker = new BMap.Marker(new BMap.Point(arr[i][0], arr[i][1]));
map.addOverlay(marker);
addClickHandler(content,marker,opts);
}
function addClickHandler(content,marker,opts) {
marker.addEventListener("click",function(e){
openInfo(content,e,opts)}
);
}
function openInfo(content,e,opts){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow,point); //開(kāi)啟信息窗口
}
總結(jié)
以上是生活随笔為你收集整理的百度地图做网点地图-jeecms的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 理解 RIPv1使用广播更新路由与RIP
- 下一篇: word表格调整方法