当前位置：网站首页>使用api制作我的足迹地图
使用api制作我的足迹地图
2022-06-21 13:43:00 【sunonzj】
很早的时候看到别人博客的足迹地图，就想着自己也搞一个，但是没找到相关的技术文章。不知道从何下手，前两天有了思路就做了起来。可以网上找地图的素材也可以用百度高德的开放平台做，还有一些其他的jQuery地图插件，也可以做出很漂亮很酷炫的地图，不过感觉没有百度地图这样的。。。。
我是用的百度地图api，所以说说怎么利用百度地图来做。
因为之前没接触过，所以一直觉得很复杂，也没有仔细看官方的api文档。
今天做完，发现很简单啊。记录一些遇到的一些问题。
开发的话照着官方给的demo来，完全OK的。
百度地图JavaScript API：http://lbsyun.baidu.com/index.php?title=jspopular3.0
地图示例：http://lbsyun.baidu.com/jsdemo.htm#a1_2
可以说是很详细了，基本满足需求。还可以自定义地图的样式，控件等。
不过这个自定义样式有点烦，我调试半天背景色啥的发现还是默认的看的顺眼。但是又不想用默认的，就随便套了个皮肤。
一般是先写个静态页面做地图，然后用IFRAME标签引用到需要展示的地方。
这里需要注意的就是子页面接收值得问题，我是这样做的(地图标注内容是数据库中的数据)：
首先在后台将需要传到前台的list转化为json格式
List<FootPrint> footPrintList = footPrintService.selectAll(footPrint);
String jsonString = JSON.toJSONString(footPrintList);
JSONArray jsonArray = JSONArray.parseArray(jsonString);
model.addAttribute("footPrintList", jsonArray);然后前台使用一个隐藏域接收，注意因为json里面有双引号，所以value需要使用单引号，不然接收的值有问题。
<input type="hidden" id="footPrintList" name="footPrintList" value='${footPrintList}' />
<IFRAME src="https://www.zjhuiwan.cn/zjblog/show.html"
style=" margin: 1px 0 0 1px;width: 1000px;height:480px;"
scrolling=yes ALLOWTRANSPARENCY="true"></IFRAME> 然后IFRAME标签里的子页面通过父页面id取值然后遍历，组成自己需要的数据。
// 接收父页面的数据，并遍历加载
var footPrintList = $("#footPrintList", window.parent.document).val(); //子页面获取父页面元素取值
var packJson = JSON.parse(footPrintList);
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
};
for (var i = 0; i < packJson.length; i++) {
//将时间毫秒格式改为自定义格式
var unixTimestamp = new Date(packJson[i].creationTime) ;
var commonTime = unixTimestamp.toLocaleString();
//标注点击显示的内容
var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" +packJson[i].fName+" "+ commonTime+ "</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://www.zjhuiwan.cn/blogImg/" + packJson[i].iUrl + "' width='140' height='105' title='" + packJson[i].fName + "'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + packJson[i].description + "...</p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>文章链接:<a href='" + packJson[i].aUrl + "'>" + packJson[i].aTitle + "</a></p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建标注信息窗口对象
//根据经纬度创建标注
var point = new BMap.Point(packJson[i].longitude, packJson[i].latitude);
addMarker(point, infoWindow);
}然后还有就是如果你网站是https的话地图引用百度api的时候也要用https。
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=。。。"></script>地图标记点可以是鼠标移上去触发事件，也可以是点击事件。
//将click改为mouseover即为鼠标滑过时间
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});还有一些关于地图的问题就不多说了，api文档都能够查得到，照着来就是了，以下地图页面的完整代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
//去掉地图底部版权信息
.BMap_cpyCtrl {
display: none;
}
//去掉地图左下角logo
.anchorBL {
display: none;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=xy。。。"></script>
<title>我的足迹</title>
</head>
<body>
<div id="allmap"
style=" overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align: left;">
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap", {
enableMapClick : false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.933, 35.649), 5); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes : [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
var top_left_control = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_TOP_LEFT
}); // 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//标注
function addMarker(point, infoWindow) { // 创建图标对象
var myIcon = new BMap.Icon("images/mapAddress.png", new BMap.Size(32, 32), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor : new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
//imageOffset : new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {
icon : myIcon
});
map.addOverlay(marker);
//将click改为mouseover即为鼠标滑过时间
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});
}
// 接收父页面的数据，并遍历加载
var footPrintList = $("#footPrintList", window.parent.document).val(); //子页面获取父页面元素取值
var packJson = JSON.parse(footPrintList);
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
};
for (var i = 0; i < packJson.length; i++) {
//将时间毫秒格式改为自定义格式
var unixTimestamp = new Date(packJson[i].creationTime) ;
var commonTime = unixTimestamp.toLocaleString();
//标注点击显示的内容
var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" +packJson[i].fName+" "+ commonTime+ "</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://www.zjhuiwan.cn/blogImg/" + packJson[i].iUrl + "' width='140' height='105' title='" + packJson[i].fName + "'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + packJson[i].description + "...</p>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>文章链接:<a href='" + packJson[i].aUrl + "'>" + packJson[i].aTitle + "</a></p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建标注信息窗口对象
//根据经纬度创建标注
var point = new BMap.Point(packJson[i].longitude, packJson[i].latitude);
addMarker(point, infoWindow);
}
/**
*清新蓝风格(light)
*黑夜风格(dark)
*红色警戒风格(redalert)
*精简风格(googlelite)
*午夜蓝风格(midnight)
*青春绿风格(darkgreen)
*清新蓝绿风格(bluish)
*高端灰风格(grayscale)
*强边界风格(hardedge)
*浪漫粉风格(pink)
**/
map.setMapStyle({
style : 'grayscale'
}); //设置地图风格
//自定义的一套风格
/* var styleJson = [{
"featureType": "water",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#ccd6d7ff"
}
}, {
"featureType": "green",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#dee5e5ff"
}
}, {
"featureType": "building",
"elementType": "geometry",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#d1dbdbff"
}
}, {
"featureType": "building",
"elementType": "geometry.stroke",
"stylers": {
"color": "#aab6b6ff"
}
}, {
"featureType": "subwaystation",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"color": "#888fa0ff"
}
}, {
"featureType": "education",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#e1e7e7ff"
}
}, {
"featureType": "medical",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#d1dbdbff"
}
}, {
"featureType": "scenicspots",
"elementType": "geometry",
"stylers": {
"visibility": "on",
"color": "#d1dbdbff"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"weight": 4
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "highway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "highway",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"weight": 2
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "arterial",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "local",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"weight": 1
}
}, {
"featureType": "local",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "local",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "local",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "local",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "local",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"weight": 1
}
}, {
"featureType": "railway",
"elementType": "geometry.fill",
"stylers": {
"color": "#9494941a"
}
}, {
"featureType": "railway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"weight": 1
}
}, {
"featureType": "subway",
"elementType": "geometry.fill",
"stylers": {
"color": "#c3bed433"
}
}, {
"featureType": "subway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff33"
}
}, {
"featureType": "subway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#979c9aff"
}
}, {
"featureType": "subway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "continent",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "continent",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "continent",
"elementType": "labels.text.fill",
"stylers": {
"color": "#333333ff"
}
}, {
"featureType": "continent",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "city",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "city",
"elementType": "labels",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "city",
"elementType": "labels.text.fill",
"stylers": {
"color": "#454d50ff"
}
}, {
"featureType": "city",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "town",
"elementType": "labels.icon",
"stylers": {
"visibility": "on"
}
}, {
"featureType": "town",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "town",
"elementType": "labels.text.fill",
"stylers": {
"color": "#454d50ff"
}
}, {
"featureType": "town",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "poilabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "districtlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "districtlabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#888fa0ff"
}
}, {
"featureType": "transportation",
"elementType": "geometry",
"stylers": {
"color": "#d1dbdbff"
}
}, {
"featureType": "companylabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "restaurantlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "lifeservicelabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "carservicelabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "financelabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "otherlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "village",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "district",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#edf3f3ff"
}
}, {
"featureType": "nationalway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "provincialway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": {
"color": "#cacfcfff"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalway",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "nationalway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "provincialway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "cityhighway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "cityhighway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "highway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "highway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "highway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "nationalway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "nationalway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "nationalway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "provincialway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "8,8",
"level": "8"
}
}, {
"featureType": "provincialway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "8,8",
"level": "8"
}
}, {
"featureType": "provincialway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "8,8",
"level": "8"
}
}, {
"featureType": "cityhighway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "cityhighway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "cityhighway",
"stylers": {
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "6"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "7"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off",
"curZoomRegionId": "0",
"curZoomRegion": "6,8",
"level": "8"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": {
"color": "#8f5a33ff"
}
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "country",
"elementType": "labels.text.fill",
"stylers": {
"color": "#8f5a33ff"
}
}, {
"featureType": "country",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "country",
"elementType": "labels.text",
"stylers": {
"fontsize": 28
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#dfe7e7ff"
}
}, {
"featureType": "provincialway",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "tertiaryway",
"elementType": "geometry.fill",
"stylers": {
"color": "#fbfffeff"
}
}, {
"featureType": "manmade",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "manmade",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "scenicspots",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "scenicspots",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "airportlabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "airportlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "educationlabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "educationlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "medicallabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "medicallabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "companylabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "restaurantlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "hotellabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "hotellabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "shoppinglabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "shoppinglabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "lifeservicelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "carservicelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportationlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportationlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "financelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "entertainment",
"elementType": "geometry",
"stylers": {
"color": "#d1dbdbff"
}
}, {
"featureType": "estate",
"elementType": "geometry",
"stylers": {
"color": "#d1dbdbff"
}
}, {
"featureType": "shopping",
"elementType": "geometry",
"stylers": {
"color": "#d1dbdbff"
}
}, {
"featureType": "education",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "education",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "medical",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "medical",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "transportation",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999ff"
}
}, {
"featureType": "transportation",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "provincialway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "cityhighway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiaryway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiaryway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiaryway",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "fourlevelway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "fourlevelway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "fourlevelway",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "local",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspotsway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "universityway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "vacationway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "roadarrow",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}]
map.setMapStyleV2({styleJson:styleJson}); */
</script>
</body>
</html>边栏推荐
- The new plan for national treasures - the exclusive digital collection of the four museums is coming!
- Write efficient defect reports
- 8. structure
- C＃＆. Net to implement a distributed event bus from 0 (1)
- Lamp architecture 5 - MySQL Cluster and master-slave structure
- Turn to the countdown for coupon issuance! First look at the rules of interstellar pocket donation
- MySQL - table operation
- Apache shardingsphere 5.1.2 release ｜ new driving API + cloud native deployment to create a high-performance data gateway
- Atguigu---- conditional rendering
- MySQL - table constraints
猜你喜欢
Iterm2 file transfer with remote server
What is Devops in an article?
Kube-prometheus grafana安装插件和grafana-image-renderer
Navigation bar switching, message board, text box losing focus
【深入理解TcaplusDB技术】TcaplusDB构造数据
IMU selection, calibration error analysis, AHRS integrated navigation
How to read AI summit papers?
MySQL - table join and join
Setting of Seaborn drawing style
SCCM creates a client collection based on the installed app and periodically pushes application updates
随机推荐
对app和微信小程序进行接口测试
Numpy | insert variable length character array test OK
module ‘selenium. webdriver‘ has no attribute ‘PhantomJS‘
How to read AI summit papers?
服务治理的工作内容
5000 word analysis: the way of container security attack and defense in actual combat scenarios
Automation operation and maintenance 1 - installation and deployment of ansible
Azure applicationinsights integrated in blazor
Convert DICOM format to nii GZ file
Deep understanding of convolution in convolution neural network
Babbitt yuancosmos daily must read: wechat may ban a official account for the first time on the grounds of "involving secondary transactions in digital collections", and the new regulations of the pla
How to guarantee the test coverage
【深入理解TcaplusDB技术】Tmonitor系统升级
17 commonly used o & M monitoring systems
Solution to the problem of long waiting (ttfb) time during web page loading
3. operator
MySQL - transaction management
Questions and answers No. 43: application performance probe monitoring principle PHP probe
Redis学习(1)——概述和常用命令
A blazor webassembly application that can automatically generate page components based on objects or types