百度地图点聚合

qweasdzxc · 发表于 2018-9-27 16:48:39

参考百度地图的点聚合方法，需要引用两个js,我的百度地图异步加载的，这两个js要怎么引才能正常使用点聚合？

<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
design="device:m;">
<div component="$UI/system/components/justep/model/model" xid="model" onParamsReceive="modelParamsReceive"/>
<div id="allmap" style="width:100%;height:200px;"/>
<style>body,html,#allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; } #golist { display: none; } @media ( max-device-width : 780px) { #golist { display: block !important; } } .anchorBL{ display:none; } #r-result,#r-result table{ width:100%; }</style>
<resource xid="resource">
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"/>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"/>
</resource>
</div>

复制代码

define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var _this, index, map, getLongitude, getLatitude, getProvince, getCity, getParam, getCurrent, firstProvince, currPoint, pointTo;
var Model = function() {
_this = this;
index = 0;
map = null;
getLongitude = null;
getLatitude = null;
getProvince = null;
getCity = null;
getParam = null;
getCurrent = null;
firstProvince = null;
currPoint = null;
pointTo = null;
this.callParent();
};
/* 异步加载百度地图 */
Model.prototype.loadMap = function(event) {
window.init = function() {
// 创建百度地图实例
map = new BMap.Map("allmap", {
enableMapClick : false
});
// 绘制地图
_this.setMap();
};
// 请求参数中ak为百度地图浏览器端密钥
require([ "http://api.map.baidu.com/api?v=2.0&ak=我的秘钥&callback=init" ], function() {
if (!(window.BMap && window.BMap.apiLoad)) {
window.init();
}
});
};
/* 绘制地图 */
Model.prototype.setMap = function() {
if (getLongitude && getLatitude)
currPoint = new BMap.Point(getLongitude, getLatitude);
else {
var curr = getCurrent.split(",");
currPoint = new BMap.Point(curr[0], curr[1]);
}
if (pointTo) {
var to = pointTo.split(",");
var point = new BMap.Point(to[0], to[1]);
// 绘制地图
map.centerAndZoom(point, 15);
} else if (firstProvince && !pointTo) {
map.centerAndZoom(currPoint, 15);
} else {
// 绘制地图
map.centerAndZoom(getProvince, 15);
}
map.setCurrentCity(getProvince);
// 右上角、仅包含缩放按钮的控件参数
var top_right_navigation = new BMap.NavigationControl({
// 控件位置为右上角
anchor : BMAP_ANCHOR_TOP_RIGHT,
type : BMAP_NAVIGATION_CONTROL_ZOOM
// 缩放控件type类型:
// BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
// BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
// BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮；
});
// 添加控件
map.addControl(top_right_navigation);
// 启用滚轮放大缩小
map.enableScrollWheelZoom(true);
// 开启拖拽
map.enableDragging();
// 标注当前地点
_this.addCurrent(currPoint);
// 标注经销商服务站
_this.addMarker();
};
/* 标注当前地点 */
Model.prototype.addCurrent = function(currPoint) {
if (currPoint) {
var myIcon = new BMap.Icon(require.toUrl("$UI/society/img/current.png"), new BMap.Size(32, 32));
var currMark = new BMap.Marker(currPoint, {
icon : myIcon
});
var opts = {
offset : new BMap.Size(-10, -20)
// 设置文本偏移量
};
var label = new BMap.Label("当前位置", opts); // 创建文本标注对象
label.setStyle({
color : "#333333",
borderColor : "#333333",
fontSize : "12px",
height : "20px",
maxWidth : "53px",
lineHeight : "15px",
fontFamily : "微软雅黑"
});
map.addOverlay(currMark);
currMark.setLabel(label);
currMark.addEventListener("click", function() {
setTimeout(function() {
map.panTo(currPoint);
}, 400);
setTimeout(function() {
map.setZoom(15);
}, 300);
});
}
};
/* 标注经销商服务站 */
Model.prototype.addMarker = function() {
if (!getParam)
return;
var markers = new Array();
for (var i = 0; i < getParam.length; i++) {
var point = getParam[i]['fLonLat'].split(",");
var marker = new BMap.Marker(new BMap.Point(point[0], point[1]));
markers.push(marker);
map.addOverlay(marker);
var name = getParam[i]['fName'];
name = '<br><div>' + name + '</div>';
addClickHandler(name, marker);
function addClickHandler(content, marker) {
marker.addEventListener("click", function(e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
}
}
//添加聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers : markers
});
};
/* 接收参数事件 */
Model.prototype.modelParamsReceive = function(event) {
getProvince = event.data.province;
getCity = event.data.city;
if (event.data.param)
getParam = $.parseJSON(event.data.param);
getLongitude = event.data.longitude;
getLatitude = event.data.latitude;
getCurrent = event.data.current;
firstProvince = event.data.isFirPro;
pointTo = event.data.pointTo;
// 异步加载百度地图
this.loadMap();
};
return Model;
});

复制代码

doudou459 · 发表于 2018-9-28 08:55:00

http://bbs.wex5.com/forum.php?mo ... d=187890&extra= 我这里分享过···· 还有demo

		自动登录	找回密码
密码			注册

[处理中3] 百度地图点聚合