添加point-label组件

docs/examples/components/index.js

@@ -1,5 +1,6 @@
 import Map from './map';
 import Marker from './marker';
+import PointLabel from './point-label';
 import TrafficLayer from './traffic-layer';
 import InfoWindow from './infowindow';
 import Graphy from './graphy';
@@ -38,6 +39,8 @@ const examples = (
     <TrafficLayer />
     <h2>驾车组件<a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/driving-route.js">示例代码</a></h2>
     <DrivingRoute />
+    <h2>PointLabel<a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/point-label.js">示例代码</a></h2>
+    <PointLabel />
   </div>
 )
 

docs/examples/components/point-label.js

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import {Map, PointLabel} from '../../../src'
+import {simpleMapStyle} from './mapstyle'
+
+export default class App extends Component {
+    render() {
+        return <Map center = {{
+                lng: 116.404556,
+                lat: 39.91582
+            }} 
+            style={{
+                height: '500px'
+            }} 
+            zoom = '12' 
+            mapStyle={simpleMapStyle}>
+            <PointLabel data={[
+                {
+                    name: '阜成门',
+                    index: 1,
+                    color: 'red',
+                    isShowNumber: true,
+                    numberDirection: 'right',
+                    point: {
+                        lng: 116.35629191343,
+                        lat: 39.923656708429
+                    }
+                },
+                {
+                    name: '东大桥',
+                    index: 2,
+                    color: 'red',
+                    point: {
+                        lng: 116.45165158593,
+                        lat: 39.922979382266
+                    }
+                },
+                {
+                    name: '复兴门',
+                    index: 3,
+                    color: 'red',
+                    point: {
+                        lng: 116.3566138544,
+                        lat: 39.907146730611
+                    }
+                },
+                {
+                    name: '国贸',
+                    index: 4,
+                    color: 'red',
+                    point: {
+                        lng: 116.46007926258,
+                        lat: 39.908464623343
+                    }
+                },
+                {
+                    name: '青年路',
+                    index: 5,
+                    color: 'red',
+                    point: {
+                        lng: 116.5174653022,
+                        lat: 39.923132911536
+                    }
+                },
+                {
+                    name: '宋家庄',
+                    index: 6,
+                    color: 'red',
+                    point: {
+                        lng: 116.4283725021,
+                        lat: 39.84602609593
+                    }
+                },
+                {
+                    name: '西直门',
+                    index: 7,
+                    color: 'red',
+                    point: {
+                        lng: 116.3555775438,
+                        lat: 39.940171435273
+                    }
+                },
+                {
+                    name: '苏州街',
+                    index: 8,
+                    color: 'red',
+                    point: {
+                        lng: 116.30623351961,
+                        lat: 39.975748497825
+                    }
+                },
+                {
+                    name: '团结湖',
+                    index: 9,
+                    color: 'red',
+                    point: {
+                        lng: 116.46174509945,
+                        lat: 39.933704360624
+                    }
+                },
+                {
+                    name: '人民大学',
+                    index: 10,
+                    color: 'rgb(51, 153, 255)',
+                    point: {
+                        lng: 116.32148092791,
+                        lat: 39.967049268766
+                    }
+                }
+            ]}/>
+        </Map>
+    }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bmap",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "react-bmap",
   "main": "lib/index.js",
   "contributors": [

src/components/point-label.js

@@ -0,0 +1,78 @@
+/**
+ * @file 文本标注组件
+ * @author kyle([email protected])
+ */
+
+import React from 'react';
+import { render } from 'react-dom';
+import Component from './component';
+import DraggingTip from '../overlay/DraggingTip';
+
+export default class App extends Component {
+
+    constructor(args) {
+        super(args);
+        this.state = {
+        };
+    }
+
+    /**
+     * 设置默认的props属性
+     */
+    static get defaultProps() {
+        return {
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        this.initialize();
+    }
+
+    componentDidMount() {
+        this.initialize();
+    }
+
+    componentWillUnmount() {
+        this.destroy();
+    }
+
+    destroy() {
+        this.props.map.removeOverlay(this.marker);
+        this.marker = null;
+    }
+
+    initialize() {
+
+        var map = this.props.map;
+        if (!map) {
+            return;
+        }
+
+        this.destroy();
+
+        if (this.props.autoViewport) {
+        }
+
+        if(this.props.autoCenterAndZoom) {
+            //map.setViewport([position],this.props.centerAndZoomOptions);
+        }
+
+        if (this.props.data) {
+            this.props.data.forEach(function (item, index) {
+                var tip = new DraggingTip({
+                    isShowTipArrow: true,
+                    map: map,
+                    numberDirection: item.numberDirection,
+                    isShowNumber: item.isShowNumber,
+                    point: item.point,
+                    name: item.name,
+                    index: item.index !== undefined ? item.index : index + 1, 
+                    color: item.color,
+                    change: function() {}
+                });
+                tip.show();
+            });
+        }
+    }
+
+}

src/index.js

@@ -48,3 +48,8 @@ export {default as MapvLayer} from './components/mapv-layer';
  * 服务组件
  */
 export {default as DrivingRoute} from './components/driving-route';
+
+/**
+ * PointLabel组件
+ */
+export {default as PointLabel} from './components/point-label';

src/overlay/DraggingTip.js

@@ -0,0 +1,52 @@
+import Tip from './Tip.js';
+
+function DraggingTip(options) {
+    this.options = options;
+    var map = options.map;
+    var point = options.point;
+    this.point = point;
+    var name = options.name;
+
+    this.map = map;
+    var tip = this.tip = new Tip(options);
+    var icon = new BMap.Icon("http://huiyan-fe.github.io/tools/gis-drawing/static/images/drag.png", new BMap.Size(25, 25), {
+        imageSize: new BMap.Size(25, 25)
+    });
+    var marker = this.marker = new BMap.Marker(this.point);
+    marker.setIcon(icon);
+    marker.setShadow(icon);
+    var self = this;
+    marker.addEventListener('dragging', function () {
+        self.point = marker.point;
+        tip.setPosition(marker.point)
+        options.change && options.change();
+    });
+    marker.enableDragging();
+}
+
+DraggingTip.prototype.show = function () {
+    this.map.addOverlay(this.marker);
+    this.map.addOverlay(this.tip);
+    if (this.options.isShowTipArrow === false) {
+        this.tip.hideArrow();
+    }
+}
+
+DraggingTip.prototype.hide = function () {
+    this.map.removeOverlay(this.marker);
+    this.map.removeOverlay(this.tip);
+}
+
+DraggingTip.prototype.setNumberLeft = function () {
+    this.tip.setNumberLeft();
+}
+
+DraggingTip.prototype.setNumberRight = function () {
+    this.tip.setNumberRight();
+}
+
+DraggingTip.prototype.hideNumber = function () {
+    this.tip.hideNumber();
+}
+
+export default DraggingTip;