<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>适用门店</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/jmsp.css">
</head>
<body>
<div class="page" id="applyStore">
<div class="content">
<div id="storeMapContent"></div>
<div>
<ul>
<li class="applyStore-item">
<a class="address-selected">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
<li class="applyStore-item">
<a class="">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
<li class="applyStore-item">
<a class="">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
<li class="applyStore-item">
<a class="">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
<li class="applyStore-item">
<a class="">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
<li class="applyStore-item">
<a class="">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
<li class="applyStore-item">
<a class="">
<div class="address-desc">
<p class="address-title">国美电器</p>
<p class="address-detial">健身西路123号</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="http://api.map.baidu.com/api?v=1.5&ak=密匙"></script>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>
var baiduMap;
var list = [{"storeId":266,"name":"hh","description":"","category":1100,"categoryName":"烟酒店","address":"","subsidiaryAddress":"","latitude":34.753734000000,"longitude":113.619818000000,"image":"","companyStoreRelationId":0,"status":-100,"statusNote":"新邀请","createTime":""},
{"storeId":265,"name":"守信烟酒","description":"","category":1100,"categoryName":"烟酒店","address":"","subsidiaryAddress":"","latitude":34.753734000000,"longitude":113.619818000000,"image":"","companyStoreRelationId":0,"status":-100,"statusNote":"新邀请","createTime":""},
,
];
function createStoreMap(params){
params.longitude = params.longitude || 113.632004;
params.latitude = params.latitude || 34.760623;
baiduMap = new BMap.Map("storeMapContent");
baiduMap.centerAndZoom(new BMap.Point(params.longitude, params.latitude), 14);
baiduMap.enableScrollWheelZoom();
}
//加载麻点
function addMarker(mp, option) {// {longitude:'', latitude:'', name: '', categoryName:'', address:'', index:'', index: ''}
var jmMarker = new JMMarker(new BMap.Point(option.longitude, option.latitude), option.index);//去掉了option.index
mp.addOverlay(jmMarker);
// var infoWindow = new BMap.InfoWindow(generateInfoWindow({ name: option.name, categoryName: option.categoryName, address: option.address, storeId: option.storeId, status: option.status }), { width: 300, enableMessage: false });
// jmMarker.addEventListener('click', function () {
// mp.openInfoWindow(infoWindow, new BMap.Point(option.longitude, option.latitude));
// });
}
//自定义麻点
function JMMarker(point, text) {
this._point = point;
this._text = text;
}
JMMarker.prototype = new BMap.Overlay();
JMMarker.prototype.initialize = function (map, isChecked) {
var isChecked = isChecked || false;
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
if(isChecked) {
div.style.background = "url(images/store1.png) no-repeat";
}
else {
div.style.background = "url(images/store1.png) no-repeat";
}
div.style.background = "url(images/store1.png) no-repeat";
div.style.backgroundSize = "100% 100%"
div.style.color = "white";
div.style.height = "22px";
div.style.width = "20px";
div.style.padding = "2px";
div.style.lineHeight = "32px";
div.style.textAlign = "center";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "16px"
/*去掉 index
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
*/
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
div.onmouseover = function () {
//this.style.background = "url(/Areas/Pages/Contents/Images/marker1.png) no-repeat";
}
div.onmouseout = function () {
this.style.background = "url(images/store1.png) no-repeat";
//console.log(this.style.background);
}
baiduMap.getPanes().labelPane.appendChild(div);
return div;
}
JMMarker.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
JMMarker.prototype.addEventListener = function (event, fun) {
this._div['on' + event] = fun;
}
$(function(){
createStoreMap({});
if (baiduMap) {
baiduMap.clearOverlays();
$.each(list, function (index, value) {
value.index = index + 1;
console.dir(value)
addMarker(baiduMap, value);
});
}
else {
layer.msg(result.message);
}
})
</script>
</body>
</html>
