【.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, //右侧选择目录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>