当前位置：网站首页>Making my footprint map using API
Making my footprint map using API
2022-06-21 13:47:00 【sunonzj】
I saw the footprint map of others' blogs very early , I just thought I'd make one myself , But no relevant technical articles were found . I don't know where to start , Two days ago, I got my idea and started to do it . You can find the material of the map on the Internet or use the open platform of Baidu Gaode to do , There are others jQuery Map plugin , You can also make beautiful and cool maps , But I don't feel like Baidu map ....
I use Baidu map api, So talk about how to use Baidu map to do .
Because I haven't touched before , So I always thought it was very complicated , I didn't take a close look at the official api file .
Finish today , The discovery is very simple . Record some problems encountered .
The word of development follows the official demo Come on , Completely OK Of .
Baidu Maps JavaScript API：http://lbsyun.baidu.com/index.php?title=jspopular3.0
Map example ：http://lbsyun.baidu.com/jsdemo.htm#a1_2
It can be said that it is very detailed , Basically meet the needs . You can also customize the style of the map , Controls, etc. .
But this custom style is a bit annoying , I found that the background color after debugging for a long time still looks good by default . But I don't want to use the default , Just put on a skin .
It is usually to write a static page to make a map first , And then use IFRAME The label refers to the place that needs to be displayed .
Here we need to pay attention to the problem of sub page reception , Here's how I do it ( The map annotation content is the data in the database )：
First of all, the information that needs to be transferred to the front desk in the background list Turn into json Format
List<FootPrint> footPrintList = footPrintService.selectAll(footPrint);
String jsonString = JSON.toJSONString(footPrintList);
JSONArray jsonArray = JSONArray.parseArray(jsonString);
model.addAttribute("footPrintList", jsonArray);Then the foreground uses a hidden field to receive , Pay attention because json There are double quotation marks inside , therefore value You need to use single quotes , Otherwise, there is a problem with the received 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> then IFRAME The child page in the tag passes through the parent page id Take the value and traverse , Compose the data you need .
// Receive the data of the parent page , And traverse the load
var footPrintList = $("#footPrintList", window.parent.document).val(); // The child page gets the element value of the parent page
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++) {
// Change the time millisecond format to the custom format
var unixTimestamp = new Date(packJson[i].creationTime) ;
var commonTime = unixTimestamp.toLocaleString();
// Mark the content displayed by clicking
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'> The article links :<a href='" + packJson[i].aUrl + "'>" + packJson[i].aTitle + "</a></p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // Create a dimension information window object
// Create dimensions based on latitude and longitude
var point = new BMap.Point(packJson[i].longitude, packJson[i].latitude);
addMarker(point, infoWindow);
}Then there is if your website is https The map quotes Baidu api You should also use https.
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=..."></script>Map marker points can trigger events when the mouse moves up , It can also be a click event .
// take click Change it to mouseover That is, when the mouse crosses the time
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
// After the picture is loaded, redraw infowindow
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); // Prevent slow network speed , When the picture is not loaded , The height of the generated information box is smaller than the total height of the picture , Cause the picture part to be hidden
}
});There are also some questions about maps that I won't say much about ,api Documents can be found , Just follow it , The complete code of the following map page ：
<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: " Microsoft YaHei ";
}
// Remove the copyright information at the bottom of the map
.BMap_cpyCtrl {
display: none;
}
// Remove the lower left corner of the map 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> My footprints </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">
// Baidu Maps API function
var map = new BMap.Map("allmap", {
enableMapClick : false
}); // establish Map example
map.centerAndZoom(new BMap.Point(104.933, 35.649), 5); // Initialize map , Set center point coordinates and map level
// Add a map type control
map.addControl(new BMap.MapTypeControl({
mapTypes : [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
var top_left_control = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_TOP_LEFT
}); // top left corner , Add scale bar
var top_left_navigation = new BMap.NavigationControl(); // top left corner , Add default zoom pan control
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.setCurrentCity(" Beijing "); // Set up a map showing the city This item must be set
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
// mark
function addMarker(point, infoWindow) { // Create icon object
var myIcon = new BMap.Icon("images/mapAddress.png", new BMap.Size(32, 32), {
// Specify the positioning position .
// When labels are displayed on the map , The geographical location it points to is at the top left of the distance icon
// Angular offset 10 Pixels and 25 Pixels . You can see that in this case, the location is
// The sharp corner at the lower end of the center of the icon .
anchor : new BMap.Size(10, 25),
// Set picture offset .
// When you need to capture a part from a larger picture as a label icon , you
// You need to specify the offset position of the large drawing , This practice is similar to css sprites Technology is similar .
//imageOffset : new BMap.Size(0, 0 - index * 25) // Set picture offset
});
// Create dimension objects and add them to the map
var marker = new BMap.Marker(point, {
icon : myIcon
});
map.addOverlay(marker);
// take click Change it to mouseover That is, when the mouse crosses the time
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
// After the picture is loaded, redraw infowindow
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); // Prevent slow network speed , When the picture is not loaded , The height of the generated information box is smaller than the total height of the picture , Cause the picture part to be hidden
}
});
}
// Receive the data of the parent page , And traverse the load
var footPrintList = $("#footPrintList", window.parent.document).val(); // The child page gets the element value of the parent page
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++) {
// Change the time millisecond format to the custom format
var unixTimestamp = new Date(packJson[i].creationTime) ;
var commonTime = unixTimestamp.toLocaleString();
// Mark the content displayed by clicking
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'> The article links :<a href='" + packJson[i].aUrl + "'>" + packJson[i].aTitle + "</a></p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // Create a dimension information window object
// Create dimensions based on latitude and longitude
var point = new BMap.Point(packJson[i].longitude, packJson[i].latitude);
addMarker(point, infoWindow);
}
/**
* Fresh blue style (light)
* Night style (dark)
* Red Alert style (redalert)
* Streamlined style (googlelite)
* Midnight blue style (midnight)
* Youth Green style (darkgreen)
* Fresh blue-green style (bluish)
* High end grey style (grayscale)
* Strong border style (hardedge)
* Romantic pink style (pink)
**/
map.setMapStyle({
style : 'grayscale'
}); // Set map style
// A custom set of styles
/* 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>边栏推荐
- Kubernets Rapid Practical fighting and Core Principle Analysis
- Quelle plate - forme à terme est plus sûre. Je vous en prie.
- Atom的一些操作
- Blazor webassembly integrates Ocelot gateway to solve cross domain problems
- Azure applicationinsights integrated in blazor
- ＃＃＃数据库的高可用配置（mysql）
- Memcached (high performance memory object cache)
- Summary of the latest remote deployment O & M tools
- Eureka的TimedSupervisorTask类（自动调节间隔的周期性任务）
- Kubernetes快速實戰與核心原理剖析
猜你喜欢
map. Values() to copy list and ArrayList
C language -- program compilation and linking
Map collection traversal, adding, replacing and deleting elements
Design and implementation of object system in redis
![[in depth understanding of tcapulusdb technology] tcapulusdb construction data](/img/83/200cd9705138583eee6b3db55135ff.png)
[in depth understanding of tcapulusdb technology] tcapulusdb construction data
In the autumn of 2022, from being rejected to sp+, talk about the experience and harvest of YK bacteria in 2021
Iterm2 file transfer with remote server
What is Devops in an article?
应用配置管理，基础原理分析
Repair for a while, decisively reconstruct and take responsibility -- talk about CRM distributed cache optimization
随机推荐
漫谈公网网络延迟
Detailed explanation and examples of common parameters of curl
Talk about the delay of public network
Test the interface between app and wechat applet
Lamp architecture 6 -- MySQL master-slave replication and optimization method
Collection reference type in JS
Review notes of web development technology
Declare war on uncivilized code I
Leetcode height checker
The new plan for national treasures - the exclusive digital collection of the four museums is coming!
[course assignment] floating point operation analysis and precision improvement
Explanation of common mesh generation methods in workbench
C language elementary level (10) type rename typedef
Navigation bar switching, message board, text box losing focus
Blazor webassembly integrates Ocelot gateway to solve cross domain problems
Lamp architecture 4 -- MySQL source code compilation and use
Atguigu---- conditional rendering
Kubernetes快速实战与核心原理剖析
Prepare for the golden three silver four, are you ready? Summary of software test interview questions
Azure applicationinsights integrated in blazor