地图

.eslintrc.js

@@ -5,5 +5,6 @@ module.exports = {
   globals: {
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
     page: true,
+    AMap: true,
   },
 };

config/config.js

@@ -479,7 +479,7 @@ export default {
 
   proxy: {
     '/api/': {
-      target: 'http://192.168.0.84:8080/',
+      target: 'http://localhost:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

package.json

@@ -56,6 +56,7 @@
     "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-amap": "^1.2.8",
+    "react-amap-plugin-autocomplete": "0.0.4",
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.8.6",

src/pages/building/list/add/amap.css

@@ -0,0 +1,401 @@
+html {
+  font-size: 12px;
+}
+.amap-copyright {
+  box-sizing: content-box;
+}
+* {
+  box-sizing: border-box;
+}
+.input-textarea {
+  color: grey;
+  height: 8em;
+  overflow: auto;
+  border-radius: 0.4rem;
+  border: 1px solid #ced4da;
+  margin-bottom: 1rem;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  font-weight: 300;
+  color: #111213;
+}
+hr {
+  margin: 0.5rem 0;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+label {
+  display: inline-block;
+  margin-bottom: 0.4rem;
+}
+label,
+.btn {
+  margin-left: 0;
+  font-size: 1rem;
+}
+button,
+input,
+select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none;
+}
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+input[type=checkbox],
+input[type=radio] {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+}
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7;
+}
+.btn:hover {
+  text-decoration: none;
+}
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+.input-item:last-child {
+  margin-bottom: 0;
+}
+.input-item > select,
+.input-item > input[type=text],
+.input-item > input[type=date] {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+.input-item > select:not(:last-child),
+.input-item > input[type=text]:not(:last-child),
+.input-item > input[type=date]:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-item > select:not(:first-child),
+.input-item > input[type=text]:not(:first-child),
+.input-item > input[type=date]:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-item-prepend {
+  margin-right: -1px;
+}
+.input-item-text,
+input[type=text],
+input[type=date],
+select {
+  height: calc(4.2rem);
+}
+.input-item-text {
+  width: 6rem;
+  text-align: justify;
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  text-justify: distribute-all-lines;
+  /*ie6-8*/
+  text-align-last: justify;
+  /* ie9*/
+  -moz-text-align-last: justify;
+  /*ff*/
+  -webkit-text-align-last: justify;
+  /*chrome 20+*/
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.input-item-text input[type=checkbox],
+.input-item-text input[type=radio] {
+  margin-top: 0;
+}
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+.input-text {
+  line-height: 2rem;
+  margin-right: 2rem;
+}
+.info hr {
+  margin-right: 0;
+  margin-left: 0;
+  border-top-color: grey;
+}
+.info {
+  padding: .75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: .25rem;
+  position: fixed;
+  top: 1rem;
+  background-color: white;
+  width: auto;
+  min-width: 22rem;
+  border-width: 0;
+  right: 1rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+  position: absolute;
+  z-index: 100;
+}
+.code {
+  left: 1.5rem;
+  right: 1.5rem;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  overflow: auto;
+  margin-bottom: 0rem;
+}
+.code .btn {
+  top: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+.code .result {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  bottom: 1rem;
+  position: absolute;
+  top: 5.5rem;
+  right: 1rem;
+  left: 1rem;
+  overflow: auto;
+}
+.code .status {
+  color: #80adff;
+  display: inline-block;
+  font-size: 14px;
+}
+.code h4 {
+  display: inline-block;
+  max-width: 20rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+select,
+input[type=text],
+input[type=date] {
+  display: inline-block;
+  width: 100%;
+  padding: .375rem 1.75rem .375rem .75rem;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
+  background-size: 8px 10px;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+input[type=text],
+input[type=date] {
+  background: #fff;
+  padding: .375rem .75rem;
+}
+select:focus,
+input[type=text]:focus,
+input[type=date]:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
+}
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+select:focus::-ms-value,
+input[type=text]:focus::-ms-value,
+input[type=date]:focus::-ms-value {
+  color: #495057;
+  background-color: #fff;
+}
+/* native toastr */
+.native-toast {
+  position: fixed;
+  background-color: rgba(50, 50, 50, 0.8);
+  border-radius: 33px;
+  color: white;
+  left: 50%;
+  text-align: center;
+  padding: 6px 12px;
+  opacity: 0;
+  z-index: 99999;
+  transition: transform .25s, opacity .25s, top .25s;
+  box-sizing: border-box;
+}
+.native-toast-bottom {
+  bottom: 50px;
+  -ms-transform: translateX(-50%) translateY(50px);
+  transform: translateX(-50%) translateY(50px);
+}
+.native-toast-bottom.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+.native-toast-bottom.native-toast-edge {
+  bottom: 0;
+}
+.native-toast-top {
+  top: 50px;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px);
+}
+.native-toast-top.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+.native-toast-top.native-toast-edge {
+  top: 0;
+}
+.native-toast-center {
+  top: 0;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px);
+}
+.native-toast-center.native-toast-shown {
+  opacity: 1;
+  top: 50%;
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+.native-toast-edge {
+  border-radius: 0;
+  width: 100%;
+  text-align: left;
+}
+@media screen and (min-width: 40rem) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 18rem;
+  }
+}
+/*
+  max-width does not seem to work in small screen?
+*/
+/*@media screen and (max-width: 768px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 400px;
+  }
+}
+
+@media screen and (max-width: 468px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 300px;
+  }
+}*/
+/* types */
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px;
+}
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}

src/pages/building/list/add/amap.less

@@ -0,0 +1,434 @@
+html {
+  font-size: 12px;
+}
+.amap-copyright{
+  box-sizing: content-box
+}
+* {
+  box-sizing: border-box
+}
+.input-textarea{
+   color:grey;
+   height:8em;
+   overflow:auto;
+   border-radius:0.4rem;
+   border:1px solid #ced4da;
+   margin-bottom:1rem;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  font-weight: 300;
+  color: #111213;
+}
+
+hr {
+  margin: 0.5rem 0;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, .1)
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.4rem;
+}
+
+label, .btn {
+  margin-left: 0;
+  font-size: 1rem;
+}
+
+button, input, select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none
+}
+
+[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type=checkbox], input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+}
+
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: .5rem
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor:pointer;
+}
+
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7
+}
+
+.btn:hover {
+  text-decoration: none
+}
+
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+
+.input-item:last-child {
+  margin-bottom: 0;
+}
+
+.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+
+.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0
+}
+
+.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0
+}
+
+.input-item-prepend {
+  margin-right: -1px;
+}
+
+.input-item-text, input[type=text],input[type=date], select {
+  height: calc(2.2rem + 2px);
+}
+
+.input-item-text {
+  width: 6rem;
+  text-align: justify;
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  text-justify: distribute-all-lines;
+  /*ie6-8*/
+  text-align-last: justify;
+  /* ie9*/
+  -moz-text-align-last: justify;
+  /*ff*/
+  -webkit-text-align-last: justify;
+  /*chrome 20+*/
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
+  margin-top: 0
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+
+.input-text {
+  line-height: 2rem;
+  margin-right: 2rem;
+}
+
+.info hr {
+  margin-right: 0;
+  margin-left: 0;
+  border-top-color: grey;
+}
+
+.info {
+  padding: .75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: .25rem;
+  position: fixed;
+  top: 1rem;
+  background-color: white;
+  width: auto;
+  min-width: 22rem;
+  border-width: 0;
+  right: 1rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: absolute;
+  z-index: 100;
+}
+
+.code {
+  left: 1.5rem;
+  right: 1.5rem;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  overflow: auto;
+  margin-bottom: 0rem;
+}
+
+.code .btn {
+  top: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+
+.code .result {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  bottom: 1rem;
+  position: absolute;
+  top: 5.5rem;
+  right: 1rem;
+  left: 1rem;
+  overflow: auto;
+}
+
+.code .status {
+  color: #80adff;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.code h4 {
+  display: inline-block;
+  max-width: 20rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+
+select, input[type=text], input[type=date] {
+  display: inline-block;
+  width: 100%;
+  padding: .375rem 1.75rem .375rem .75rem;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
+  background-size: 8px 10px;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none
+}
+
+input[type=text],input[type=date] {
+  background: #fff;
+  padding: .375rem .75rem;
+}
+
+select:focus, input[type=text]:focus, input[type=date]:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
+  color: #495057;
+  background-color: #fff
+}
+
+
+/* native toastr */
+.native-toast {
+  position: fixed;
+  background-color: rgba(50, 50, 50, .8);
+  border-radius: 33px;
+  color: white;
+  left: 50%;
+  text-align: center;
+  padding: 6px 12px;
+  opacity: 0;
+  z-index: 99999;
+  transition: transform .25s, opacity .25s, top .25s;
+  box-sizing: border-box;
+}
+
+.native-toast-bottom {
+  bottom: 50px;
+  -ms-transform: translateX(-50%) translateY(50px);
+      transform: translateX(-50%) translateY(50px)
+}
+
+.native-toast-bottom.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+      transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-bottom.native-toast-edge {
+  bottom: 0;
+}
+
+.native-toast-top {
+  top: 50px;
+  -ms-transform: translateX(-50%) translateY(-50px);
+      transform: translateX(-50%) translateY(-50px)
+}
+
+.native-toast-top.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+      transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-top.native-toast-edge {
+  top: 0;
+}
+
+.native-toast-center {
+  top: 0;
+  -ms-transform: translateX(-50%) translateY(-50px);
+      transform: translateX(-50%) translateY(-50px)
+}
+
+.native-toast-center.native-toast-shown {
+  opacity: 1;
+  top: 50%;
+  -ms-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%);
+}
+
+.native-toast-edge {
+  border-radius: 0;
+  width: 100%;
+  text-align: left;
+}
+
+@media screen and (min-width: 40rem) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 18rem;
+  }
+}
+
+/*
+  max-width does not seem to work in small screen?
+*/
+
+/*@media screen and (max-width: 768px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 400px;
+  }
+}
+
+@media screen and (max-width: 468px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 300px;
+  }
+}*/
+
+/* types */
+
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px
+}
+
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}

src/pages/building/list/add/amap.wxss

@@ -0,0 +1,401 @@
+html {
+  font-size: 12px;
+}
+.amap-copyright {
+  box-sizing: content-box;
+}
+* {
+  box-sizing: border-box;
+}
+.input-textarea {
+  color: grey;
+  height: 8em;
+  overflow: auto;
+  border-radius: 0.4rem;
+  border: 1px solid #ced4da;
+  margin-bottom: 1rem;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  font-weight: 300;
+  color: #111213;
+}
+hr {
+  margin: 0.5rem 0;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+label {
+  display: inline-block;
+  margin-bottom: 0.4rem;
+}
+label,
+.btn {
+  margin-left: 0;
+  font-size: 1rem;
+}
+button,
+input,
+select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none;
+}
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+input[type=checkbox],
+input[type=radio] {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+}
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7;
+}
+.btn:hover {
+  text-decoration: none;
+}
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+.input-item:last-child {
+  margin-bottom: 0;
+}
+.input-item > select,
+.input-item > input[type=text],
+.input-item > input[type=date] {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+.input-item > select:not(:last-child),
+.input-item > input[type=text]:not(:last-child),
+.input-item > input[type=date]:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-item > select:not(:first-child),
+.input-item > input[type=text]:not(:first-child),
+.input-item > input[type=date]:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-item-prepend {
+  margin-right: -1px;
+}
+.input-item-text,
+input[type=text],
+input[type=date],
+select {
+  height: calc(4.2rem);
+}
+.input-item-text {
+  width: 6rem;
+  text-align: justify;
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  text-justify: distribute-all-lines;
+  /*ie6-8*/
+  text-align-last: justify;
+  /* ie9*/
+  -moz-text-align-last: justify;
+  /*ff*/
+  -webkit-text-align-last: justify;
+  /*chrome 20+*/
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.input-item-text input[type=checkbox],
+.input-item-text input[type=radio] {
+  margin-top: 0;
+}
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+.input-text {
+  line-height: 2rem;
+  margin-right: 2rem;
+}
+.info hr {
+  margin-right: 0;
+  margin-left: 0;
+  border-top-color: grey;
+}
+.info {
+  padding: .75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: .25rem;
+  position: fixed;
+  top: 1rem;
+  background-color: white;
+  width: auto;
+  min-width: 22rem;
+  border-width: 0;
+  right: 1rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+  position: absolute;
+  z-index: 100;
+}
+.code {
+  left: 1.5rem;
+  right: 1.5rem;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  overflow: auto;
+  margin-bottom: 0rem;
+}
+.code .btn {
+  top: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+.code .result {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  bottom: 1rem;
+  position: absolute;
+  top: 5.5rem;
+  right: 1rem;
+  left: 1rem;
+  overflow: auto;
+}
+.code .status {
+  color: #80adff;
+  display: inline-block;
+  font-size: 14px;
+}
+.code h4 {
+  display: inline-block;
+  max-width: 20rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+select,
+input[type=text],
+input[type=date] {
+  display: inline-block;
+  width: 100%;
+  padding: .375rem 1.75rem .375rem .75rem;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
+  background-size: 8px 10px;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+input[type=text],
+input[type=date] {
+  background: #fff;
+  padding: .375rem .75rem;
+}
+select:focus,
+input[type=text]:focus,
+input[type=date]:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
+}
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+select:focus::-ms-value,
+input[type=text]:focus::-ms-value,
+input[type=date]:focus::-ms-value {
+  color: #495057;
+  background-color: #fff;
+}
+/* native toastr */
+.native-toast {
+  position: fixed;
+  background-color: rgba(50, 50, 50, 0.8);
+  border-radius: 33px;
+  color: white;
+  left: 50%;
+  text-align: center;
+  padding: 6px 12px;
+  opacity: 0;
+  z-index: 99999;
+  transition: transform .25s, opacity .25s, top .25s;
+  box-sizing: border-box;
+}
+.native-toast-bottom {
+  bottom: 50px;
+  -ms-transform: translateX(-50%) translateY(50px);
+  transform: translateX(-50%) translateY(50px);
+}
+.native-toast-bottom.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+.native-toast-bottom.native-toast-edge {
+  bottom: 0;
+}
+.native-toast-top {
+  top: 50px;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px);
+}
+.native-toast-top.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+.native-toast-top.native-toast-edge {
+  top: 0;
+}
+.native-toast-center {
+  top: 0;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px);
+}
+.native-toast-center.native-toast-shown {
+  opacity: 1;
+  top: 50%;
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+.native-toast-edge {
+  border-radius: 0;
+  width: 100%;
+  text-align: left;
+}
+@media screen and (min-width: 40rem) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 18rem;
+  }
+}
+/*
+  max-width does not seem to work in small screen?
+*/
+/*@media screen and (max-width: 768px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 400px;
+  }
+}
+
+@media screen and (max-width: 468px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 300px;
+  }
+}*/
+/* types */
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px;
+}
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}

src/pages/building/list/add/components/amap.jsx

@@ -1,20 +1,98 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Map } from 'react-amap';
+import { Map, Marker } from 'react-amap';
+import '../amap.less'
 
 class Amap extends React.Component {
   constructor(props) {
-    super(props)
-    this.state = { coordinates: [] }
+    super(props);
+    this.amapEvents = {
+      created: mapInstance => {
+        console.log('高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
+        console.log(mapInstance.getZoom());
+        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
+          // 实例化Autocomplete
+          const autoOptions = {
+            // city 限定城市，默认全国
+            city: '全国',
+            // input 为绑定输入提示功能的input的DOM ID
+            input: 'amapInput',
+          }
+          const autoComplete = new AMap.Autocomplete(autoOptions);
+          // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
+
+          const placeSearch = new AMap.PlaceSearch({
+            city: '南京',
+            map: mapInstance,
+          })
+          AMap.event.addListener(autoComplete, 'select', e => {
+            // TODO 针对选中的poi实现自己的功能
+            placeSearch.setCity(e.poi.adcode)
+            placeSearch.search(e.poi.name)
+          })
+
+
+          const citySearch = new AMap.CitySearch()
+          citySearch.getLocalCity((status, result) => {
+            if (status === 'complete' && result.info === 'OK') {
+              // 查询成功，result即为当前所在城市信息
+              console.log('当前所在城市：', result)
+              if (result && result.city && result.bounds) {
+                // 当前城市名称
+                // const cityinfo = result.city;
+
+                // 当前城市位置信息
+                const citybounds = result.bounds;
+                // document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
+                // 地图显示当前城市
+                mapInstance.setBounds(citybounds);
+            }
+            }
+          })
+        })
+
+        mapInstance.on('click', e => {
+          const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
+          console.log('坐标位置:', lngLat)
+          this.props.onChange(lngLat)
+        });
+      },
+    };
+    this.markerEvents = {
+      created: markerInstance => {
+        console.log('高德地图 Marker 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
+        console.log(markerInstance.getPosition());
+
+        // 地理坐标位置定位
+        // markerInstance.setPosition();
+      },
+    }
+    this.markerPosition = { longitude: 120, latitude: 30 };
   }
 
   render() {
     return (
-      <div style={{ width: '100%', height: '400px' }}>
-        <Map amapkey="f0d1d4f82432504003ebf46e5e36ff03"/>
-      </div>
+      <>
+        <div style={{ width: '100%', height: '400px' }}>
+          <Map events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03">
+            <Marker position={this.markerPosition} events={this.markerEvents} />
+          </Map>
+          {
+              <div className="info">
+                <div className="input-item">
+                  <div className="input-item-prepend">
+                    <span className="input-item-text" style={{ width: '8rem' }}>请输入关键字</span>
+                  </div>
+                  <input id="amapInput" type="text" />
+                </div>
+            </div>
+            }
+        </div>
+      </>
     )
   }
 }
 
+// f0d1d4f82432504003ebf46e5e36ff03
+
 export default Amap

src/pages/building/list/add/components/base.jsx

@@ -125,7 +125,7 @@ function AddBuilding(props) {
           <Form.Item label="销售状态" hasFeedback>
             {getFieldDecorator('marketStatus')(<Input />)}
           </Form.Item>
-          <Form.Item label="标签" hasFeedback>
+          <Form.Item label="标签" hasFeedback style={{ display: 'none' }}>
             {getFieldDecorator('tags')(
               <Select mode="multiple" placeholder="标签" style={{ width: '1016px' }}>
                 <Option value="未知">未知</Option>
@@ -178,7 +178,7 @@ function AddBuilding(props) {
             {getFieldDecorator('coordinate')(<Input disabled />)}
           </Form.Item>
           <Form.Item label="地图位置" hasFeedback>
-            {(<Amap />)}
+            {getFieldDecorator('coordinate')(<Amap />)}
           </Form.Item>
           <Form.Item label="周边交通" hasFeedback>
             {getFieldDecorator('buildingTransport')(