react-amap example

公交线路查询插件功能demo

by 15757855224

HTML

<script src="//unpkg.com/[email protected]/dist/react.js"></script>
<script src="//unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="//unpkg.com/[email protected]/dist/react-amap.js"></script>
<div id="app"></div>

SCSS

#app {
  width: 500px;
  height: 400px;
  border: 1px solid #333;
}

Babel + JSX

// 如果是浏览器直接引用 js 资源，
// react-amap 会在全局暴露为一个变量 ReactAMAP
const Map = ReactAMAP.Map

const lineSearchOpts = {
        pageIndex: 1,
        city: '宁波',
        pageSize: 1,
        extensions: 'all'
    };
const position = {
            longitude: '121.624604',
            latitude: '29.85988'
        };
var amap = null;
var LineSearch = null;
const handleLineSearch = (busLineName) => {
    LineSearch.search(busLineName, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            dealWithBusPathResult(result);
        } else {
            alert(result);
        }
    });
}

const dealWithBusPathResult = (data) => {
    console.log('查询到的公交线路数据为：', JSON.stringify(data));
    var lineArr = data.lineInfo;
        var lineNum = data.lineInfo.length;
        if (lineNum == 0) {
        } else {
            for (var i = 0; i < lineNum; i++) {
                var pathArr = lineArr[i].path;
                var stops = lineArr[i].via_stops;
                var startPot = stops[0].location;
                var endPot = stops[stops.length - 1].location;
                if (i == 0) //作为示例，只绘制一条线路
                drawbusLine(startPot, endPot, pathArr);
            
            }
        }
}
const drawbusLine = (startPot, endPot, BusArr) => {
        //绘制起点，终点
        new AMap.Marker({
            map: amap,
            position: startPot, //基点位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
            zIndex: 10
        });
        new AMap.Marker({
            map: amap,
            position: endPot, //基点位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
            zIndex: 10
        });
        //绘制乘车的路线
        busPolyline = new AMap.Polyline({
            map: amap,
            path: BusArr,
            
            strokeColor: "#09f",//线颜色
            strokeOpacity: 0.8,//线透明度
            isOutline:true,
            outlineColor:'white',
            strokeWeight: 6//线宽
      ...