feats

src/components/amap/PoiAround.js

@@ -1,7 +1,6 @@
 import Taro, { Component } from '@tarojs/taro'
 import { Map } from '@tarojs/components'
-
-const makerIcon = require('@assets/icons/blank.png')
+import icons from './icons'
 
 export default class PoiAround extends Component {
 
@@ -19,34 +18,16 @@ export default class PoiAround extends Component {
   render() {
     const { current } = this.state
     const markers =  (this.props.markers || []).map((marker, index) => {
+      const icon = icons[index].normal
+      const activeIcon = icons[index].active
 
       return {
         id: marker.id,
         latitude: marker.latitude,
         longitude: marker.longitude,
-        iconPath: makerIcon,
-        width: 30,
-        height: 30,
-        alpha: 0.7,
-        // title: index + 1,
-        // label: {
-        //   content: index + 1,
-        //   // borderRadius: 1000,
-        //   color: '#fff',
-        //   bgColor: '#f00',
-        //   textAlign: 'center',
-        // },
-        callout: {
-          content: index + 1 > 9 ? `${index + 1}` : `0${index + 1}`,
-          borderRadius: 30,
-          borderWidth: 2,
-          borderColor: '#BB9C79',
-          padding: 5,
-          color: current === marker.id ? '#fff' : '#BB9C79',
-          bgColor: current === marker.id ? '#BB9C79' : '#fff',
-          textAlign: 'center',
-          display: 'ALWAYS',
-        },
+        iconPath: current === marker.id ? activeIcon : icon,
+        width: 56,
+        height: 56,
       }
     })
 
@@ -57,7 +38,7 @@ export default class PoiAround extends Component {
         markers={markers}
         longitude={this.props.longitude}
         latitude={this.props.latitude}
-        onCalloutTap={this.handleTap}
+        onMarkerTap={this.handleTap}
         style={this.props.style}
       />
     )

src/components/amap/icons.js

@@ -0,0 +1,105 @@
+
+const icons = [
+  {
+    normal: require('@assets/icons/amap/nums/number1.png'),
+    active: require('@assets/icons/amap/active_nums/number1.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number2.png'),
+    active: require('@assets/icons/amap/active_nums/number2.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number3.png'),
+    active: require('@assets/icons/amap/active_nums/number3.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number4.png'),
+    active: require('@assets/icons/amap/active_nums/number4.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number5.png'),
+    active: require('@assets/icons/amap/active_nums/number5.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number6.png'),
+    active: require('@assets/icons/amap/active_nums/number6.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number7.png'),
+    active: require('@assets/icons/amap/active_nums/number7.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number8.png'),
+    active: require('@assets/icons/amap/active_nums/number8.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number9.png'),
+    active: require('@assets/icons/amap/active_nums/number9.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number10.png'),
+    active: require('@assets/icons/amap/active_nums/number10.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number11.png'),
+    active: require('@assets/icons/amap/active_nums/number11.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number12.png'),
+    active: require('@assets/icons/amap/active_nums/number12.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number13.png'),
+    active: require('@assets/icons/amap/active_nums/number13.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number14.png'),
+    active: require('@assets/icons/amap/active_nums/number14.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number15.png'),
+    active: require('@assets/icons/amap/active_nums/number15.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number16.png'),
+    active: require('@assets/icons/amap/active_nums/number16.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number17.png'),
+    active: require('@assets/icons/amap/active_nums/number17.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number18.png'),
+    active: require('@assets/icons/amap/active_nums/number18.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number19.png'),
+    active: require('@assets/icons/amap/active_nums/number19.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number20.png'),
+    active: require('@assets/icons/amap/active_nums/number20.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number21.png'),
+    active: require('@assets/icons/amap/active_nums/number21.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number22.png'),
+    active: require('@assets/icons/amap/active_nums/number22.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number23.png'),
+    active: require('@assets/icons/amap/active_nums/number23.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number24.png'),
+    active: require('@assets/icons/amap/active_nums/number24.png'),
+  },
+  {
+    normal: require('@assets/icons/amap/nums/number25.png'),
+    active: require('@assets/icons/amap/active_nums/number25.png'),
+  },
+]
+
+export default icons;