\u9ad8\u5fb7\u5730\u56fe - DIY\u6211\u7684\u5730\u56fe<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \r\n <style>\r\n \/* \u6838\u5fc3\u4fee\u6539\uff1a\u79fb\u9664\u56fa\u5b9a\u5bbd\u9ad8\uff0c\u6539\u4e3a\u81ea\u9002\u5e94 *\/\r\n body { \r\n margin: 0; \r\n font: 13px\/1.5 \"Microsoft YaHei\", \"Helvetica Neue\", \"Sans-Serif\"; \r\n min-height: 100vh; \/* \u4fee\u6539\uff1a\u7528\u89c6\u53e3\u9ad8\u5ea6\u66ff\u4ee3\u56fa\u5b9a960px\uff0c\u6491\u6ee1\u5c4f\u5e55\u9ad8\u5ea6 *\/\r\n \/* \u79fb\u9664min-width: 600px; \u907f\u514d\u79fb\u52a8\u7aef\u6a2a\u5411\u6eda\u52a8 *\/\r\n }\r\n \/* \u5730\u56fe\u5bb9\u5668\uff1a\u5168\u5bbd+\u81ea\u9002\u5e94\u9ad8\u5ea6 *\/\r\n .my-map { \r\n margin: 0 auto; \r\n width: 100%; \/* \u4fee\u6539\uff1a\u4ece\u56fa\u5b9a800px\u6539\u4e3a100%\u5168\u5bbd *\/\r\n height: 80vh; \/* \u4fee\u6539\uff1a\u7528\u89c6\u53e3\u9ad8\u5ea6\u8bbe\u7f6e\u5730\u56fe\u9ad8\u5ea6\uff0c\u9002\u914d\u4e0d\u540c\u5c4f\u5e55\uff08\u53ef\u81ea\u884c\u8c03\u6574vh\u503c\uff09 *\/\r\n min-height: 400px; \/* \u65b0\u589e\uff1a\u79fb\u52a8\u7aef\u6700\u5c0f\u9ad8\u5ea6\uff0c\u907f\u514d\u5730\u56fe\u8fc7\u77ee *\/\r\n } \r\n .my-map .icon { \r\n background: url(\/\/a.amap.com\/lbs-dev-yuntu\/static\/web\/image\/tools\/creater\/marker.png) no-repeat; \r\n } \r\n .my-map .icon-cir { height: 31px; width: 28px; } \r\n .my-map .icon-cir-red { background-position: -11px -5px; }\r\n \/* \u5730\u56fe\u6838\u5fc3\u5bb9\u5668\uff1a100%\u7ee7\u627f\u7236\u7ea7\u5c3a\u5bf8 *\/\r\n .amap-container{\r\n height: 100%;\r\n width: 100%; \/* \u65b0\u589e\uff1a\u786e\u4fdd\u5730\u56fe\u5bb9\u5668\u5bbd\u5ea6100% *\/\r\n }\r\n #mapContainer { \/* \u65b0\u589e\uff1a\u5730\u56fe\u6e32\u67d3\u5bb9\u5668\u5f3a\u5236100%\u5bbd\u9ad8 *\/\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .myinfowindow{width: 240px;min-height: 50px;}\r\n .myinfowindow h5{ \r\n height: 20px; \r\n line-height: 20px; \r\n overflow: hidden; \r\n font-size: 14px; \r\n font-weight: bold; \r\n width: 220px; \r\n text-overflow: ellipsis; \r\n word-break: break-all; \r\n white-space: nowrap; \r\n }\r\n .myinfowindow div{ \r\n margin-top: 10px; \r\n min-height: 40px; \r\n line-height: 20px; \r\n font-size: 13px; \r\n color: #6f6f6f; \r\n }\r\n \/* \u65b0\u589e\uff1a\u79fb\u52a8\u7aef\u4fe1\u606f\u7a97\u9002\u914d\uff0c\u907f\u514d\u6ea2\u51fa *\/\r\n @media (max-width: 768px) {\r\n .myinfowindow {\r\n width: 180px; \/* \u79fb\u52a8\u7aef\u7f29\u5c0f\u4fe1\u606f\u7a97\u5bbd\u5ea6 *\/\r\n }\r\n .myinfowindow h5 {\r\n width: 160px;\r\n }\r\n .my-map {\r\n height: 70vh; \/* \u79fb\u52a8\u7aef\u8c03\u6574\u5730\u56fe\u9ad8\u5ea6 *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"wrap\" class=\"my-map\">\r\n <div id=\"mapContainer\"><\/div>\r\n <\/div>\r\n <script src=\"\/\/webapi.amap.com\/maps?v=1.3&key=e07ffdf58c8e8672037bef0d6cae7d4a\"><\/script>\r\n <script>\r\n !function(){\r\n var infoWindow, map, level = 18,\r\n center = {lng: 113.857494, lat: 22.892713},\r\n features = [{\"icon\":\"cir\",\"color\":\"red\",\"name\":\"\u5927\u6e7e\u533a\u5927\u5b66\u5317\u4e8c\u95e8\",\"desc\":\"\u5927\u6e7e\u533a\u5927\u5b66\u5317\u4e8c\u95e8\",\"lnglat\":{\"Q\":22.892713125272078,\"R\":113.85749408930542,\"lng\":113.857494,\"lat\":22.892713},\"offset\":{\"x\":-9,\"y\":-31},\"type\":\"Marker\"}];\r\n\r\n function loadFeatures(){\r\n for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){\r\n data = features[i];\r\n switch(data.type){\r\n case \"Marker\":\r\n feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),\r\n zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,\r\n content: '<div class=\"icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'\"><\/div>' });\r\n break;\r\n case \"Polyline\":\r\n for(j = 0, jl = data.path.length, path = []; j < jl; j++){\r\n\t\t\t\t\t\t\tpath.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));\r\n\t\t\t\t\t\t}\r\n feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,\r\n strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });\r\n break;\r\n case \"Polygon\":\r\n for(j = 0, jl = data.path.length, path = []; j < jl; j++){\r\n path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));\r\n }\r\n feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,\r\n strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,\r\n fillColor: data.fillColor, fillOpacity: data.fillOpacity });\r\n break;\r\n default: feature = null;\r\n }\r\n if(feature){ AMap.event.addListener(feature, \"click\", mapFeatureClick); }\r\n }\r\n }\r\n\r\n function mapFeatureClick(e){\r\n if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true,isCustom: false}); }\r\n var extData = e.target.getExtData();\r\n infoWindow.setContent(\"<div class='myinfowindow'><h5>\" + extData.name + \"<\/h5><div>\" + extData.desc + \"<\/div><\/div>\");\r\n infoWindow.open(map, e.lnglat);\r\n }\r\n\r\n map = new AMap.Map(\"mapContainer\", {\r\n center: new AMap.LngLat(center.lng, center.lat), \r\n level: level, \r\n keyboardEnable:true, \r\n dragEnable:true, \r\n scrollWheel:true, \r\n doubleClickZoom:true,\r\n resizeEnable: true \/\/ \u65b0\u589e\uff1a\u5f00\u542f\u5730\u56fe\u81ea\u9002\u5e94\u5bb9\u5668\u5c3a\u5bf8\u53d8\u5316\r\n });\r\n new AMap.TileLayer.Satellite({map: map, zIndex: 1});\r\n loadFeatures();\r\n\r\n map.on('complete', function(){\r\n map.plugin([\"AMap.ToolBar\", \"AMap.OverView\", \"AMap.Scale\"], function(){\r\n map.addControl(new AMap.ToolBar({ruler: true, direction: true, locate: false})); \r\n map.addControl(new AMap.OverView({isOpen: true})); \r\n map.addControl(new AMap.Scale);\r\n });\t\r\n })\r\n \r\n\t}();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u5730\u5740:\u5e7f\u4e1c\u7701\u4e1c\u839e\u5e02\u677e\u5c71\u6e56\u9ad8\u65b0\u6280\u672f\u4ea7\u4e1a\u5f00\u53d1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":49,"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/pages\/57\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/theralab.cc\/index.php\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}