之前在web端做过一个地图显示坐标,现在修改了一下样式用在了微信服务号中,demo下载,先看一下效果,如下图所示:
create_map.js
/*
* 创建地图所需JS
* create 2017-05-25 for Rika
* hope this helps ^_^
*/
function getMarkerListInfo(data, mapId, myListId, panelId, radius, keywordName, projectName, defaultKeyword, defaultProject){
var map = new AMap.Map(mapId, {zoom: 9});
AMapUI.loadUI([
'misc/MarkerList',
'overlay/SimpleMarker',
'overlay/SimpleInfoWindow',
'overlay/AwesomeMarker'
],
function(MarkerList, SimpleMarker, SimpleInfoWindow, AwesomeMarker) {
// var $ = MarkerList.utils.$;//即jQuery/Zepto 表示下面可以使用$
var defaultIconStyle = 'blue', //默认的图标样式
hoverIconStyle = 'red', //鼠标hover时的图标样式
selectedIconStyle = 'green'; //选中时的图标样式
var mapRenderData = {
keyword: defaultKeyword, //右侧选择目录1
project: defaultProject, //右侧选择目录2
};
$("#" + keywordName).on('click', ".item", function (e) {
selectChangeTab($(this), keywordName);
mapRenderData.keyword = $(this).text();
loadData(data, mapRenderData.keyword, mapRenderData.project);
window.markerList = markerList;
});
$("#" + projectName).on('click', ".item", function (e) {
selectChangeTab($(this), projectName);
mapRenderData.project = $(this).text();
loadData(data, mapRenderData.keyword, mapRenderData.project);
window.markerList = markerList;
});
function selectChangeTab(currentTab, idName){
$('#' + idName + ' .item').removeClass('item-acitive');
currentTab.addClass('item-acitive');
}
var markerList = new MarkerList({
map: map,
//ListElement对应的父节点或者ID [document.getElementById("myList")]
listContainer: myListId,
//从数据中读取位置, 返回lng、Lat
getPosition: function(item) {
return [item.longitude, item.latitude];
},
//数据ID,如果不提供,默认使用数组索引,即index
getDataId: function(item, index) {
return item.id;
},
// 创建信息窗口
getInfoWindow: function(data, context, recycledInfoWindow) {
var content='<div class="info-middle" style="border:none;border-redius:4px;">'+
'<img class="info-img" width="280px" hight="100px;" src="' + data.pic + '">' +
'<div class="info-content"' +
'<div>' + data.km + '</div>' +
'</br>'+
'<div>地址:' + data.address + '</div>' +
'<div>联系人:' + data.person + '</div>' +
'<div>联系电话:' + data.phone + '</div>' +
'<a href="activity_detail.aspx?id=' + data.id + '">报名</a>' +
'</div>'+
'</div>'+
'<div class="info-bottom">'+
//'<img src="http://webapi.amap.com/images/sharp.png">'+
'</div>';
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(data.name);
recycledInfoWindow.setInfoBody(content);
return recycledInfoWindow;
}else {
return new SimpleInfoWindow({
infoTitle: '<b>'+ data.name + '</b>',
infoBody: content,
offset: new AMap.Pixel(0, -50)
});
}
},
//构造marker用的options对象, 创建一个点标记
//content和title支持模板,也可以是函数,返回marker实例,或者返回options对象
getMarker: function(data, context, recycledMarker) {
// var label = String.fromCharCode('A'.charCodeAt(0) + (context.index-1));
var label = context.index;
if (recycledMarker) {
recycledMarker.setIconLabel(label);
return;
}else{
if(data.type === 'Own' || data.type === 'competitor') {
return new AwesomeMarker({
containerClassNames: 'my-marker',
awesomeIcon: 'star',
iconStyle: selectedIconStyle,
iconLabel: {
style: {
color: '#fff',
fontSize: '13px'
}
}
});
}else {
return new SimpleMarker({
containerClassNames: 'my-marker',
iconStyle: defaultIconStyle,
iconLabel: {
innerHTML: label,
style: {
color: '#fff',
fontSize: '13px'
}
}
});
}
}
},
//构造右侧列表元素,与getMarker类似,可以是函数,返回一个dom元素,或者模板 html string
getListElement: function(data, context, recycledListElement) {
// var label = String.fromCharCode('A'.charCodeAt(0) + (context.index-1));
var label = context.index;
// var contextNow = context;
var contentOld = data.type;
// console.log('contentOld',contentOld);
// console.log('contextNow',contextNow);
// var label = context.index;
//使用模板创建
if(data.type === 'Own' || data.type === 'competitor'){
html =
'<div class="poiHover">'+
'<div class="poi-info-left">' +
' <span class="poi-point"><i class="fa fa-star"></i></span>'+
' <%- data.name %>'+
'</div>' +
'<div class="poi-info-right">' +
' <%= data.time %> ' +
'</div>'+
'</div>';
}else {
html =
'<div class="poiHover">'+
'<div class="poi-info-left">' +
' <span class="poi-point"><%- label %></span>'+
' <%- data.name %>'+
'</div>' +
'<div class="poi-info-right">' +
' <%= data.time %>' +
'</div>'+
'</div>';
}
var innerHTML = MarkerList.utils.template(html, {
data: data,
label: label
});
if (recycledListElement) { //存在可回收利用的listElement
recycledListElement.innerHTML = innerHTML; //更新innerHTML
// 判断后直接返回
// console.log(data.page);
if (data.page === '0') {
return '<div class="poibox"><h3 class="margin-0 poi-info-title">'+data.type+'</h3>' + innerHTML + '</div>';
}else {
return '<div class="poibox">' + innerHTML + '</div>';
}
}
// console.log(data.page);
if (data.page === '0') {
return '<div class="poibox"><h3 class="margin-0 poi-info-title">'+data.type+'</h3>' + innerHTML + '</div>';
}else {
return '<div class="poibox">' + innerHTML + '</div>';
}
},
//列表节点上监听的事件
listElementEvents: ['click', 'mouseenter', 'mouseleave'],
//marker上监听的事件
markerEvents: ['click', 'mouseover', 'mouseout'],
autoSetFitView: true,
});
window.markerList = markerList;
// 点击列表触发点标记联动
markerList.on('selectedChanged', function(event, info) {
// checkBtnStatus();
if (info.selected) {
if (info.selected.marker) {
//更新为选中样式
info.selected.marker.setIconStyle(selectedIconStyle);
}
//选中并非由列表节点上的事件触发,将关联的列表节点移动到视野内
if (!info.sourceEventInfo.isListElementEvent) {
if (info.selected.listElement) {
scrollListElementIntoView($(info.selected.listElement));
}
}
}
if (info.unSelected && info.unSelected.marker) {
//更新为默认样式
if(info.unSelected.data.type === 'Own' || info.unSelected.data.type === 'competitor'){
info.unSelected.marker.setIconStyle(selectedIconStyle);
}else{
info.unSelected.marker.setIconStyle(defaultIconStyle);
}
}
});
// 添加圆形范围
markerList.on('markerAddToMap markerRemoveFromMap', function(event, record) {
var marker = record.marker,
lng = record.data.longitude,
Lat = record.data.latitude;
if(record.data.type === 'Own'){
if (!marker._circle) {
//创建一个新的circle,附加在Marker上
marker._circle = new AMap.Circle({
center: new AMap.LngLat(lng, Lat),// 圆心位置
radius: radius, //半径
strokeColor: '#9cfea3', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线粗细度
fillColor: '#1afa29', //填充颜色
fillOpacity: 0.25//填充透明度
});
}
switch (event.type) {
case 'markerAddToMap':
//更新map
marker._circle.setMap(marker.getMap());
//更新position
marker._circle.setCenter(marker.getPosition());
break;
case 'markerRemoveFromMap':
marker._circle.setMap(null);
break;
}
}
if(record.data.type === 'competitor'){
if (!marker._circle) {
//创建一个新的circle,附加在Marker上
marker._circle = new AMap.Circle({
center: new AMap.LngLat(lng, Lat),// 圆心位置
radius: radius, //半径
strokeColor: '#ff8383', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线粗细度
fillColor: '#ee2200', //填充颜色
fillOpacity: 0.25//填充透明度
});
}
switch (event.type) {
case 'markerAddToMap':
//更新map
marker._circle.setMap(marker.getMap());
//更新position
marker._circle.setCenter(marker.getPosition());
break;
case 'markerRemoveFromMap':
marker._circle.setMap(null);
break;
}
}
});
// 鼠标移至点标记的状态
markerList.on('listElementMouseenter markerMouseover', function(event, record) {
if (record && record.marker) {
forcusMarker(record.marker);
//非选中的id
if (!this.isSelectedDataId(record.id)) {
//设置为hover样式
record.marker.setIconStyle(hoverIconStyle);
}
}
});
// 鼠标移出点标记的状态
markerList.on('listElementMouseleave markerMouseout', function(event, record) {
if (record && record.marker) {
if (!this.isSelectedDataId(record.id)) {
//恢复默认样式
if(record.data.type === 'Own' || record.data.type === 'competitor'){
record.marker.setIconStyle(selectedIconStyle);
}else{
record.marker.setIconStyle(defaultIconStyle);
}
}
}
});
function loadData(data,keyword,project) {
console.log('keyword',keyword);
console.log('project',project);
markerList.render(data);
// 这里是获取数据的地方,如果后台传入数据,就注释掉284行,并将下面的ajax解开注释。function参数添加一个url。
// $.ajax({
// url: url,
// type: 'post',
// dataType: 'json',
// data: {
// keyword: keyword,
// project: project
// },
// success:function(result){
// markerList.render(result);
// }
// });
}
loadData(data, mapRenderData.keyword, mapRenderData.project);
// 移动至地图中心function
function forcusMarker(marker) {
marker.setTop(true);
//不在地图视野内
if (!(map.getBounds().contains(marker.getPosition()))) {
//移动到中心
map.setCenter(marker.getPosition());
}
}
// 右侧列表联动
function scrollListElementIntoView($listEle) {
$('#'+ panelId).scrollTop($listEle.offset().top - $listEle.parent().offset().top);
//闪动一下
$listEle.one('webkitAnimationEnd oanimationend msAnimationEnd animationend');
}
});
}
index.css
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 13px;
box-sizing: border-box; }
ul,
li {
padding: 0;
margin: 0;
list-style: none; }
.outer-box {
/*height:500px;
padding-right:300px;*/
width: 100%;
height: 500px;
/*padding-right:100px;*/
/*position: relative;*/
/*margin-bottom:100px;*/
overflow: hidden; }
.container {
height: 500px;
width: 100%;
overflow: hidden; }
.panel-box {
/*position: absolute;*/
/*margin-top:500px;*/
/*right: 0;*/
/*height: 286px;*/
/*height: 436px;*/
overflow: auto;
/*width: 300px;*/
width: 100%;
z-index: 10;
border: 1px solid #eaeaea;
background: #fff;
/*padding-top: 10px;*/
box-sizing: border-box; }
.top-64 {
top: 0rem; }
.map-list {
position: absolute;
top: 0;
right: 0px;
/*width: 300px;*/
width: 100px;
height: 30px;
box-sizing: border-box;
line-height: 30px;
z-index: 20;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #2A3F54;
background: #fff; }
.map-list .item {
display: block;
float: left;
height: 28px;
line-height: 30px;
border-left: 1px solid #ddd;
text-align: center;
background: #f1f1f1;
cursor: pointer;
box-sizing: border-box; }
.w-33 {
width: 33.33%; }
.w-20 {
width: 20%; }
.map-list .item-acitive {
border-left: 1px solid #2A3F54;
border-right: 1px solid #2A3F54;
border-top: 2px solid #2A3F54;
border-bottom: 1px solid #fff;
background: #fff;
height: 29px; }
.project-name {
width: 300px;
height: 34px;
padding: 5px 8px;
position: absolute;
right: 0;
top: 30px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
box-sizing: border-box; }
.project-name .item {
display: inline-block;
height: 24px;
line-height: 24px;
padding: 0 6px;
margin-bottom: 0;
font-size: 13px;
color: #73879c;
text-align: center;
cursor: pointer;
border-radius: 2px;
border: 1px solid transparent;
margin-right: 10px; }
.project-name .item-acitive {
background: #26B99A;
border: 1px solid #169F85;
color: #fff; }
.poiHover {
border-left: 2px solid transparent;
height: 38px;
line-height: 38px;
cursor: pointer; }
.poibox.selected .poiHover {
border-left-color: #f00;
background: #f6f6f6; }
.poiHover {
height: 38px;
line-height: 38px; }
.poiHover:hover {
background: #f6f6f6; }
.poiHover:last-child {
border-bottom: none; }
.poi-title {
font-weight: 700;
columns: #333;
margin: 0 0 8px 0;
font-size: 14px; }
.poi-info-title {
font-size: 16px;
font-weight: bold;
padding: 10px 8px 8px 8px; }
.margin-0 {
margin: 0; }
.poibox .poi-info-left {
padding-left: 5px;
display: inline-block;
float: left;
width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box; }
.poi-point {
display: block;
float: left;
width: 24px;
height: 24px;
font-size: 13px;
color: #fff;
background: #38aadd;
border-radius: 50%;
text-align: center;
line-height: 25px;
margin-top: 7px;
margin-right: 6px; }
.poi-info-right {
float: right;
padding-right: 5px;
font-size: 11px;
color: #999;
width: 40%;
box-sizing: border-box;
text-align: right; }
.poi-addr {
margin: 0;
font-size: 13px;
line-height: 20px; }
.poibox .poi-imgbox {
width: 100px;
height: 74px;
vertical-align: top;
float: right;
margin: 0 8px;
overflow: hidden; }
.poibox .poi-img {
display: inline-block;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%; }
.amap-simple-marker.my-marker .amap-simple-marker-label {
font-size: 12px;
color: #eee;
font-family: sans-serif; }
.selected .amap-simple-marker.my-marker .amap-simple-marker-label {
font-size: 14px;
color: orange;
font-weight: 700; }
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1; }
25%, 75% {
opacity: 0; } }
@keyframes flash {
from, 50%, to {
opacity: 1; }
25%, 75% {
opacity: 0; } }
.flash {
-webkit-animation-name: flash;
animation-name: flash; }
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.scrollbar1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #fff; }
.scrollbar1::-webkit-scrollbar {
width: 6px;
background-color: #fff; }
.scrollbar1::-webkit-scrollbar-thumb {
background-color: #aaa; }
.scrollbar1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #fff; }
.scrollbar1::-webkit-scrollbar {
width: 6px;
background-color: #fff; }
.scrollbar1::-webkit-scrollbar-thumb {
background-color: #aaa; }
.clear {
clear: both; }
ul,
li {
padding: 0;
margin: 0;
list-style: none; }
.amap-info > div {
width: 300px; }
.sourceBtn {
position: absolute;
top: 10px;
z-index: 2; }
.sourceBtn:nth-child(1) {
left: 20px; }
.sourceBtn:nth-child(2) {
left: 90px; }
.btn-success-km {
position: absolute;
z-index: 2;
top: 0; }
.btn-success-km:nth-child(1) {
left: 0; }
.btn-success-km:nth-child(2) {
left: 80px; }
.actionWrap {
text-align: center; }
.actionWrap .tit {
padding: 10px 0; }
.banner {
text-align: center;
padding: 4% 0; }
.banner h2 {
font-family: 'Pontano Sans', sans-serif;
line-height: 1.5em;
font-size: 3em;
color: #666666;
text-shadow: 0px 1px 0px #ffffff; }
.banner h3 {
font-family: 'Shadows Into Light', cursive;
line-height: 1.8em;
font-size: 2em;
color: #FF61A0;
text-shadow: 0px 1px 0px #ffffff; }
.main2 {
display: block;
width: 1000px;
margin: 0 auto; }
.content h2 {
font-weight: 700;
line-height: 1.5em;
font-size: 1.5em;
color: #555555;
text-transform: uppercase;
padding: 10px 0;
border-bottom: 2px solid #d1d1d1; }
.grid_v ul {
list-style-type: none; }
/*.col-bootlayout-3 {
float:left;
width:250px;
height:400px;
padding-left:15px;
padding-right:15px;
overflow:hidden;
}*/
.re-size1 {
overflow: hidden;
margin-top: 20px;
border-bottom: 1px solid #f1f1f1;
float: left; }
.re-size1 img {
display: block;
margin: 0 auto;
width: 210px;
height: 150px;
overflow: hidden; }
img.zoom-img {
-webkit-transform: scale(1, 1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1, 1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms; }
img.zoom-img:hover {
-webkit-transform: scale(1.09);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 750ms;
-moz-transform: scale(1.09);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 750ms;
overflow: hidden; }
.grid-tx {
float: left; }
.grid-txt h4 {
font-family: 'Nunito-Regular';
color: #DAE246;
font-weight: 400;
font-size: 18px;
margin-bottom: 15px; }
.grid-txt p {
display: block;
height: 20px;
/*height:120px;*/
width: 210px;
font-family: sans-serif;
color: #aaa;
font-size: 13.5px;
line-height: 1.8em;
margin-bottom: 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.re-clr1 {
background: #DAE246;
border: none;
border-radius: 0;
color: #303e4b;
outline: none; }
.re-clr1:hover {
background: #fff;
border: none;
outline: none;
border-radius: none;
color: #303e4b;
transition: 0.5s all; }
.grid-txt {
float: left;
margin-left: 30px;
padding: 15px 0px 0px; }
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="activity_travel.aspx.cs" Inherits="LJWY_WX00_Main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>心理沙龙</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!--开启对web app的支持-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--主要是正对苹果手机将数字自动识别为号码-->
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="../../LJYS/css/reset.css" />
<link rel="stylesheet" href="../../LJYS/css/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//获取屏幕宽度(viewport)
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//获取html的dom
let htmlDom = document.getElementsByTagName('html')[0];
//设置html的fontsize
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
window.addEventListener('resize', (e) => {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="background:#eee">
<div class="outer-box" style="margin-top: 0px">
<div id="container" class="container" style="height:100%"></div>
<%-- <div id="mapList" class="map-list">
<asp:LinkButton ID="btn_Publish" runat="server" Text="活动列表" CssClass=""></asp:LinkButton>
</div>--%>
<%-- <div id="panelBox" class="scrollbar1 panel-box top-64" style="height:100%">
<div id="myList" class="myList">
</div>
</div>--%>
</div>
<div id="panelBox" class="scrollbar1 panel-box top-64" style="height:100%">
<div id="myList" class="myList">
</div>
</div>
</div>
<script>
//获取的数据
var strJson = '<%=strJsonString%>';
var objJson = JSON.parse(strJson);
console.log(objJson);
var result = [];
result = objJson;
var app = new Vue({
el: '#app',
data() {
return {
hdData: objJson
}
}
});
</script>
<script src="http://webapi.amap.com/maps?v=1.3&key=8f13eb006c09768e84e7604067a22695"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/create_map.js"></script>
<script>
AMapUI.load(['lib/$'], function($){
// $ 即为UI组件库最终使用的DomLibrary
drawMarkerListInfo();
});
function drawMarkerListInfo(){
/*
*result:获取的数据,如需后天传数据,应改成url路径。获取数据见create_map的280行代码
*'container':地图divName
*'myList':右侧标注展示列表内层divName
*'panelBox':右侧标注展示列表外层divName
*1000:高亮圆形半径
*'mapList':第一行分类divName
*'projectName':第二行分类divName
*'Office':默认显示选择参数1
*'Own':默认显示选择参数2
*/
getMarkerListInfo(result, 'container', 'myList', 'panelBox', 1000, 'mapList', 'projectName', 'Office' ,'Own');
}
</script>
</form>
</body>
</html>