【.Net微信_服务号】4.微信公众号中高德地图显示坐标点

之前在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, //右侧选择目录1project: 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、LatgetPosition: function(item) {return [item.longitude, item.latitude];},//数据ID，如果不提供，默认使用数组索引，即indexgetDataId: 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 stringgetListElement: 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) { //存在可回收利用的listElementrecycledListElement.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'://更新mapmarker._circle.setMap(marker.getMap());//更新positionmarker._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'://更新mapmarker._circle.setMap(marker.getMap());//更新positionmarker._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);//非选中的idif (!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);// 移动至地图中心functionfunction 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的domlet htmlDom = document.getElementsByTagName('html')[0];//设置html的fontsizehtmlDom.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组件库最终使用的DomLibrarydrawMarkerListInfo();});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>

【.Net微信_服务号】4.微信公众号中高德地图显示坐标点相关推荐

php公众号交友源码_个性定制微信导航源码，PHP公众号导航源码，含手机wap版，微信数据...
程序采用PHP5+MYSQL做为技术基础进行开发.2 z# c2 u. j" A 带数据,带手机版,PC版风格全网首发,大气. F h; \( x- E k7 y 程序含数 ...
微信用户绑定java实例_微信开放平台帐号管理绑定在同一个开放平台帐号下的公众号及小程序让用户unionid一致...
第三方平台在获得此权限后,可以代替已授权的公众号/小程序创建开放平台帐号或进行绑定/解绑操作. 绑定在同一个开放平台帐号下的公众号及小程序,用户unionid一致.开发者可调用"获取用户基本 ...
批量关闭公众号推送_微信喊你「批量屏蔽公众号」啦！还有其他新功能！！
原标题:微信喊你「批量屏蔽公众号」啦!还有其他新功能!! 小派有可能会迟到但尽量不缺席昨天公众号被爆出大大大的功能「可批量取消长期不阅读公众号的推送」虽然这个功能目前还是内测部分长时间不阅 ...
微信视频号重走公众号老路
你还记得微信公众号的slogan吗?它的创作初衷和视频号非常相似,即人人皆可创作.但是微信公众号已经不是一个纯UGC的平台了,普通的个体很难"出头":视频号诞生的那一刻起,人们讨论 ...
微信公众号认证、公众号与小程序关联
微信公众号认证.公众号与小程序关联 1.说明 2.账号申请.认证过程 2.1 准备 2.2 申请认证过程 1.说明本人在刚接触小程序的时候,着实被微信的各种账号申请折磨了一番,为避免读者在账号申请上 ...
微信公众号迁移丨如何迁移微信公众号最详细公众号迁移流程和方法
微信公众号迁移丨如何迁移微信公众号最详细微信公众号迁移流程和方法微信公众号如何迁移?微信公众号迁移公证书需要准备哪些资料? 怎么迁移微信公众号! 教你迁移微信公众号_迁移完成后,原账号就注销了,无 ...
用java开发微信公众号：测试公众号与本地测试环境搭建（一）
本文为原创,原始地址为:http://www.cnblogs.com/fengzheng/p/5023678.html 俗话说,工欲善其事,必先利其器.要做微信公众号开发,两样东西不可少,那就是要有一 ...
微信公众号开发-测试公众号账号及本地环境搭建（一）
https://www.cnblogs.com/fengzheng/p/5023678.html 测试公众号微信公众号有订阅号.服务号.企业号,在注册的时候看到这样的信息,只有订阅号可以个人申请,服 ...
微信小程序生态13-微信公众号自定义菜单、个性化菜单配置
文章导航微信小程序生态1-初识小程序微信小程序生态2-创建一个微信小程序微信小程序生态3-微信小程序登录流程设计微信小程序生态4-扫普通二维码进入小程序.打开短链接进入小程序微信小程序生态5 ...

【.Net微信_服务号】4.微信公众号中高德地图显示坐标点

【.Net微信_服务号】4.微信公众号中高德地图显示坐标点相关推荐

最新文章

热门文章