Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
67659feb 1 parent 0c24acf2

fix

Inline Side-by-side
Showing 16 changed files with 194 additions and 135 deletions
# 地图测试Demo
[437759,214079] ~ [437763,214079]
[437759,214080] ~ [437763,214080]
[437759,214081] ~ [437763,214081]
[437759,214082] ~ [437763,214082]
[437759,214083] ~ [437763,214083]
[437759,214084] ~ [437763,214084]
[437759,214085] ~ [437763,214086]
35个格子 128
[218879,107039] ~ [218882,107039]
[218879,107040] ~ [218882,107040]
[218879,107041] ~ [218882,107041]
[218879,107042] ~ [218882,107042]
16个格子 256
[109439,53519] ~ [109441,53519]
[109439,53520] ~ [109441,53520]
[109439,53521] ~ [109441,53521]
9个格子 256
......
......@@ -92,27 +92,17 @@ var spotInfo = [
{
name: '三宝楼',
position: [120.587519, 31.315924],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
},
{
name: '法云堂',
position: [120.587884, 31.3152],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
},
{
name: '西花园湖心亭',
position: [120.586253, 31.315273],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
},
{
name: '四百岁神龟',
position: [120.585948, 31.315095],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
},
{
name: '罗汉堂',
position: [120.58764, 31.315011],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。
......@@ -122,12 +112,12 @@ var spotInfo = [
除了俯瞰的“田”字，在罗汉堂地下，还有一项隐秘而巧妙的设计——西边放生池的水源经过罗汉堂地下隐秘水道弯曲绕行，流经罗汉堂，最终汇聚到大雄宝殿露台前的香花桥下。这不仅让西园寺内基础水池串联成一片活水，更重要和巧妙地解决了罗汉堂内的湿度调节问题。因五百罗汉为泥胎雕塑，过于干燥的空气将会造成古老的泥塑造像干裂、风化、剥落等一系列问题，而地下隐暗水道的设计，则有效保证罗汉堂内的湿度能控制在一定范围内。于此，不得不叹服先人的智慧。
罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。`
罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。`,
},
{
name: '大雄宝殿',
position: [120.587249, 31.314722],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
......@@ -142,7 +132,7 @@ var spotInfo = [
内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。
两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`
两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`,
},
];
......@@ -150,15 +140,33 @@ var toiletInfo = [
{
name: '厕所',
position: [120.588351, 31.31449],
icon: '//a.amap.com/jsapi_demos/static/resource/img/洗手间.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
},
];
var activityInfo = [
{
name: '西花园湖心亭',
position: [120.586253, 31.315273],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
},
{
name: '四百岁神龟',
position: [120.585948, 31.315095],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
},
];
const publicInfo = [
{
name: '出入口',
position: [120.587788, 31.313383],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
},
{
name: '素食',
position: [120.587152, 31.314396],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
},
];
......@@ -168,4 +176,5 @@ export default {
spotInfo,
toiletInfo,
activityInfo,
publicInfo,
};
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-31 15:25:25
* @LastEditTime: 2023-06-01 17:42:52
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -11,23 +11,12 @@
<div class="nav-bar-wrapper">
<div class="hideScrollBar"
style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 0 ? 'checked' : '', 'item']"
@click="setNavLayer(0)">
<div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
@click="setNavLayer(item, index)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">景区信息</span>
</div>
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 1 ? 'checked' : '', 'item']"
@click="setNavLayer(1)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">卫生间</span>
</div>
<div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 2 ? 'checked' : '', 'item']"
@click="setNavLayer(2)">
<van-icon name="shop-o" size="1.25rem" /><br />
<span style="font-size: 0.85rem;">活动中心</span>
<span style="font-size: 0.85rem;">{{ item.name }}</span>
</div>
<div style="width: 4rem;flex-shrink: 0;"></div>
<div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;">
<div style="padding-top: 40%;">
<van-icon v-if="!show_nav_popup" name="arrow-down" @click="handleNavPopup" size="1.15rem" />
......@@ -59,10 +48,10 @@
</div>
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<div class="item" @click="setTitleLayer">
<!-- <div class="item" @click="setTitleLayer">
<i class="fa fa-cube"></i><br />
贴片
</div>
</div> -->
<div v-if="show_walk_route" class="item" @click="setWalkRoute">
<i class="fa fa-eye"></i><br />
步行
......@@ -198,6 +187,7 @@ export default {
spotInfo: [], // 景点信息实体
toiletInfo: [], // 厕所信息实体
activityInfo: [], // 活动场所信息实体
publicInfo: [], // 公共设施信息实体
show_popup: false,
dialog_show: false,
xys_lng: '',
......@@ -215,9 +205,23 @@ export default {
showInfoWindow: false,
infoWindow: {},
infoWindowTitle: '',
navBarList: []
}
},
mounted() {
this.navBarList = [{
key: 'spot',
name: '景区信息'
}, {
key: 'activity',
name: '活动设施'
}, {
key: 'public',
name: '公共设施'
}, {
key: 'toilet',
name: '卫生间'
}]
// 初始化地图
this.initMap();
// this.loadPublicEquipment();
......@@ -227,7 +231,7 @@ export default {
// 使用之前都要再获取一下地址
this.getLocation()
// 打开贴片地图
// this.setTitleLayer()
this.setTitleLayer()
},
watch: {
show_popup(val) {
......@@ -241,31 +245,6 @@ export default {
}
},
methods: {
// addMarker () {
// // axios.get('http://api.map.baidu.com/location/ip?ak=CzpAXV4bhyqCKnWpQqLRkS1i&coor=bd09ll')
// axios.get('https://restapi.amap.com/v5/ip?ip=114.88.176.153&type=4&key=d50d6e58d65408db18af05c0a9422a44')
// .then(res => {
// if (res.statusText === 'OK') {
// console.warn(res.data);
// //
// let marker = new AMap.Marker({
// icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
// position: [121.54431, 31.30164],
// offset: new AMap.Pixel(-13, -30)
// });
// marker.setMap(this.map);
// } else {
// console.warn(res);
// this.$vux.toast.show({
// type: 'warn',
// text: res.data.msg
// });
// }
// })
// .catch(err => {
// console.error(err);
// })
// },
initMap() {
// 初始化地图
this.map = new AMap.Map('container', {
......@@ -274,7 +253,7 @@ export default {
showIndoorMap: false,
defaultCursor: 'pointer', // 地图默认鼠标样式
showBuildingBlock: false, // 是否展示地图 3D 楼块
zooms: [17, 18], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
showLabel: true, // 是否展示地图文字和 POI 信息
zoom: 18, // 设置地图显示的缩放级别
pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
......@@ -450,7 +429,7 @@ export default {
styles: [{
icon: {
img: coord.spotInfo[i].icon,
size: [16, 16], // 可见区域的大小
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
......@@ -465,24 +444,11 @@ export default {
}],
zoomStyleMapping
});
let infoWindowContent =
'<div className="custom-infowindow input-card">' +
'<label style="color:grey">公共厕所</label>' +
// 为 infowindow 添加自定义事件
'<div id="lnglat2container" class="btn">我要走过去</div>' +
'</div>';
// 创建一个自定义内容的 infowindow 实例
let infoWindow = new AMap.InfoWindow({
position: coord.spotInfo[i].position,
offset: new AMap.Pixel(0, -30),
content: infoWindowContent
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
// infoWindow.open(this.map);
this.show_popup = true;
this.popup_title = x.name;
this.popup_content = x.note;
......@@ -502,7 +468,7 @@ export default {
styles: [{
icon: {
img: coord.toiletInfo[i].icon,
size: [16, 16], // 可见区域的大小
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
......@@ -517,24 +483,11 @@ export default {
}],
zoomStyleMapping
});
// let infoWindowContent =
// '<div className="custom-infowindow input-card">' +
// '<label style="color:grey">公共厕所</label>' +
// // 为 infowindow 添加自定义事件
// '<div id="lnglat2container" class="btn">我要走过去</div>' +
// '</div>';
// // 创建一个自定义内容的 infowindow 实例
// let infoWindow = new AMap.InfoWindow({
// position: coord.spotInfo[i].position,
// offset: new AMap.Pixel(0, -30),
// content: infoWindowContent
// });
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
// infoWindow.open(this.map);
this.show_popup = true;
})
//
......@@ -552,7 +505,7 @@ export default {
styles: [{
icon: {
img: coord.activityInfo[i].icon,
size: [16, 16], // 可见区域的大小
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
......@@ -567,24 +520,11 @@ export default {
}],
zoomStyleMapping
});
// let infoWindowContent =
// '<div className="custom-infowindow input-card">' +
// '<label style="color:grey">公共厕所</label>' +
// // 为 infowindow 添加自定义事件
// '<div id="lnglat2container" class="btn">我要走过去</div>' +
// '</div>';
// // 创建一个自定义内容的 infowindow 实例
// let infoWindow = new AMap.InfoWindow({
// position: coord.spotInfo[i].position,
// offset: new AMap.Pixel(0, -30),
// content: infoWindowContent
// });
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
// infoWindow.open(this.map);
this.show_popup = true;
})
//
......@@ -593,6 +533,43 @@ export default {
})
this.map.add(this.activityInfo);
},
loadPublicMaker() { // 加载公共设施标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.publicInfo, (x, i) => {
var marker = new AMap.ElasticMarker({
position: coord.publicInfo[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: coord.publicInfo[i].icon,
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 18, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
},
label: {
content: coord.publicInfo[i].name,
position: 'TM',
minZoom: 18
}
}],
zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.show_popup = true;
})
//
this.publicInfo.push(marker);
})
this.map.add(this.publicInfo);
},
setMapBoundary() { // 地图描边
new AMap.Polygon({
cursor: 'pointer',
......@@ -610,20 +587,6 @@ export default {
hidePublic() {
this.map.remove(this.facilities);
},
addLayer() {
this.layerMap();
// this.loadPublicEquipment();
this.loadScenicSpot();
// this.loadPlant();
this.setMapBoundary();
},
removeLayer() {
this.initMap();
// this.loadPublicEquipment();
this.loadScenicSpot();
// this.loadPlant();
this.setMapBoundary();
},
setLocation() { // 开启定位服务
// this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
if (!this.current_lng || !this.current_lat) {
......@@ -685,9 +648,9 @@ export default {
this.current_route = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: 'red',
outlineColor: '#7F7F7F',
borderWeight: 1,
strokeColor: '#FFF',
strokeColor: '#7F7F7F',
strokeOpacity: 1,
strokeWeight: 1,
// 折线样式还支持 'dashed'
......@@ -704,10 +667,40 @@ export default {
this.map.add([this.current_route]);
//
var marker1 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(120.587506, 31.313787), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor:'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker1.setLabel({
direction:'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>起点</div>", //设置文本标注内容
});
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(120.586825, 31.314543), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor:'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker2.setLabel({
direction:'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>终点</div>", //设置文本标注内容
});
// 新增逃生路线标记
this.safe_route = [marker1, marker2]
......@@ -718,16 +711,32 @@ export default {
this.map.remove(this.safe_route);
},
setTitleLayer() {
//该demo可模拟水印效果
var layer = new AMap.TileLayer.Flexible({
cacheSize: 30,
cacheSize: 50,
opacity: 1,
zIndex: 100,
createTile: function (x, y, z, success, fail) {
// if ((x + y) % 3) {
// fail();
// return;
// }
if (z === 17) {
if (x < 109439 || x > 109441) {
fail()
return;
}
if (y < 53519 || y > 53521) {
fail()
return;
}
}
if (z === 18) {
if (x < 218879 || x > 218882) {
fail()
return;
}
if (y < 107039 || y > 107042) {
fail()
return;
}
}
console.warn(z);
var img = document.createElement('img');
img.onload = function () {
......@@ -738,7 +747,6 @@ export default {
fail()
};
// img.src = `fileHost + '/tilefile/' + zoom + '/${x} + '_' + ${y} + '.png`;
img.src = `images/tiles/${z}/${x}_${y}.jpg`
}
});
......@@ -746,7 +754,7 @@ export default {
this.map.addLayer(layer);
// Canvas作为切片
var layer = new AMap.TileLayer.Flexible({
var layer1 = new AMap.TileLayer.Flexible({
// tileSize: 128,
cacheSize: 300,
zIndex: 200,
......@@ -766,7 +774,7 @@ export default {
}
});
layer.setMap(this.map);
layer1.setMap(this.map);
// 只显示相应区域，移动会回到选定范围
// this.lockMapBounds()
......@@ -775,21 +783,31 @@ export default {
setSpotLayer() { // 设置景点图层
this.removeToiletLayer()
this.removeActivityLayer()
this.removePublicLayer()
// 加载地图标记
this.loadSpotMaker()
},
setToiletLayer() { // 设置景点图层
this.removeSpotLayer()
this.removeActivityLayer()
this.removePublicLayer()
// 加载厕所标记
this.loadToiletMaker()
},
setActivityLayer() { // 设置活动图层
this.removeSpotLayer();
this.removeToiletLayer()
this.removePublicLayer()
// 加载活动标记
this.loadActivityMaker()
},
setPublicLayer() { // 设置公共图层
this.removeSpotLayer();
this.removeToiletLayer()
this.removeActivityLayer()
// 加载公共标记
this.loadPublicMaker()
},
removeSpotLayer() { // 删除景点标记
this.map.remove(this.spotInfo);
},
......@@ -799,6 +817,9 @@ export default {
removeActivityLayer() { // 删除活动标记
this.map.remove(this.activityInfo);
},
removePublicLayer() { // 删除公共标记
this.map.remove(this.publicInfo);
},
// 限制地图范围
lockMapBounds() {
// var bounds = this.map.getBounds();
......@@ -821,7 +842,9 @@ export default {
zoom;
console.warn(text);
// 点击空白处 关闭弹框
if (this.showInfoWindow) {
this.$refs['infoWindow'].close()
}
},
setWalkRoute() {
//步行导航
......@@ -847,17 +870,20 @@ export default {
this.walk_route.clear();
this.show_walk_route = true;
},
setNavLayer(index) { // 选择地图图层显示
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
if (index === 0) {
if (key === 'spot') {
this.setSpotLayer()
}
if (index === 1) {
if (key === 'toilet') {
this.setToiletLayer()
}
if (index === 2) {
if (key === 'activity') {
this.setActivityLayer()
}
if (key === 'public') {
this.setPublicLayer()
}
},
handleSafeRoute(status) { // 打开/关闭逃生路线线
if (status) {
......@@ -917,9 +943,10 @@ export default {
.amap-marker-label {
padding: 0.25rem 0.5rem;
width: auto;
border: 1px solid #72400b;
border: none;
border-radius: 2px;
background: rgba(255, 255, 255, 0.8);
background: rgba(86, 65, 23, 0.8);
color: white;
}
.amap-marker {
......