高德地图集成

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。JS API 提供了2D、3D 地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口

高德地图集成的运行效果，如下图所示

VUE 案例

添加区块组件

在页面上添加区块组件，用于显示地图，如下图所示

地图全屏显示的设置方法

• 地图区块高度设置为100%，如上图所示
• 页面组件的自动充满设置为是，如下图所示

显示地图

在页面组件的“初次渲染完成”事件中写代码，显示地图

初次渲染完成事件的 JS 代码如下

let map; // 地图实例对象
let center = [110.353214, 19.950745]; // 定位海口

let onPageReady = async (event) => {
    await initAMap();
    map = new AMap.Map('amapDiv', {
        center: center,
        zoom: 12
    });
    map.setFeatures(['road', 'bg']);
    //显示点标记
    displayCar();
}

initAMap 方法用于加载高德地图 JS API，代码如下，其中的参数 key 请到高德开放平台申请

let initAMap = () => {
    return new Promise(function (resolve, reject) {
        if (window.AMap) {
            resolve();
            return;
        }
        window.onLoad = function () {
            resolve();
        }
        let url = 'https://webapi.amap.com/maps?v=1.4.15&key=2a25c002bb67874654f9d77587a5e168&callback=onLoad';
        let jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
    });
}

初次渲染完成事件的这一句代码 new AMap.Map('amapDiv', {}) 中的 amapDiv 是显示地图区块组件的 id 属性的值

添加点标记

在地图上显示点标记的代码如下

let carData = useData("carData");
let pageData = useData("pageData");

let displayCar = () => {
    // 遍历小汽车数据
    carData.each(({ row }) => {
        let longitude = row.longitude;
        let latitude = row.latitude;
        if (longitude && latitude) {
            let image = getCarIcon();

            let angle = Math.random() * 360;
            let markerContent = '' +
                '<div style="position:absolute;">' +
                '   <img style="width:30px;height:15px;transform:rotate(' + angle + 'deg)" src="' + image + '">' +
                '</div>';

            let marker = new AMap.Marker({
                position: new AMap.LngLat(longitude, latitude),
                offset: new AMap.Pixel(0, 0),
                content: markerContent,
                title: row.travelVehicleId
            });
            // 鼠标滑上去出现车牌号   
            AMap.event.addListener(marker, 'mouseover', function () {
                let infoWindow = new AMap.InfoWindow({
                    content: marker.getTitle(),
                    offset: new AMap.Pixel(10, 20)
                });
                infoWindow.open(map, marker.getPosition());
            });
            // 鼠标点击弹出车辆详情
            AMap.event.addListener(marker, 'click', function () {
                // 车辆数据跳转
                carData.to(row);
                // 显示详情
                pageData.setValue("showInfo", 1);
            });
            // 添加到地图中
            map.add(marker);
        }
    });
}

let getCarIcon = () => {
    let randomNum = Math.floor(Math.random() * 2) + 1;
    let image = '$UI/pcx/map/images/car' + randomNum + '.png';
    return $page.getUIUrl(image);
}

React 案例

添加区块组件

在页面上添加区块组件，用于显示地图，如下图所示

地图全屏显示的设置方法

• 地图区块高度设置为100%，如上图所示
• 页面组件的自动充满设置为是，如下图所示

显示地图

在页面组件的“初次渲染完成”事件中写代码，显示地图

初次渲染完成事件的 JS 代码如下

    constructor(props, context) {
        super(props, context);
        this.map; // 地图实例对象
        this.center = [110.353214, 19.950745]; // 定位海口
    }

    onPageReady = async (event) => {
        await this.initAMap();
        this.map = new AMap.Map('amapDiv', {
            center: this.center,
            zoom: 12
        });
        this.map.setFeatures(['road', 'bg']);
        //显示点标记
        this.displayCar();
    }

initAMap 方法用于加载高德地图 JS API，代码如下，其中的参数 key 请到高德开放平台申请

    initAMap = () => {
        return new Promise(function (resolve, reject) {
            if (window.AMap) {
                resolve();
                return;
            }
            window.onLoad = function () {
                resolve();
            }
            let url = 'https://webapi.amap.com/maps?v=1.4.15&key=2a25c002bb67874654f9d77587a5e168&callback=onLoad';
            let jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        });
    }

初次渲染完成事件的这一句代码 new AMap.Map('amapDiv', {}) 中的 amapDiv 是显示地图区块组件的 id 属性的值

添加点标记

在地图上显示点标记的代码如下

    displayCar = () => {
        let carData = this.comp("carData");
        let pageData = this.comp("pageData");
        // 遍历小汽车数据
        carData.each(({ row }) => {
            let longitude = row.longitude;
            let latitude = row.latitude;
            if (longitude && latitude) {
                let image = this.getCarIcon();

                let angle = Math.random() * 360;
                let markerContent = '' +
                    '<div style="position:absolute;">' +
                    '   <img style="width:30px;height:15px;transform:rotate(' + angle + 'deg)" src="' + image + '">' +
                    '</div>';

                let marker = new AMap.Marker({
                    position: new AMap.LngLat(longitude, latitude),
                    offset: new AMap.Pixel(0, 0),
                    content: markerContent,
                    title: row.travelVehicleId
                });
                // 鼠标滑上去出现车牌号   
                window.AMap.event.addListener(marker, 'mouseover', function () {
                    let infoWindow = new AMap.InfoWindow({
                        content: marker.getTitle(),
                        offset: new AMap.Pixel(10, 20)
                    });
                    infoWindow.open(this.map, marker.getPosition());
                });
                // 鼠标点击弹出车辆详情
                window.AMap.event.addListener(marker, 'click', function () {
                    // 车辆数据跳转
                    carData.to(row);
                    // 显示详情
                    pageData.setValue("showInfo", 1);
                });
                // 添加到地图中
                this.map.add(marker);
            }
        });
    }

    getCarIcon = () => {
        let randomNum = Math.floor(Math.random() * 2) + 1;
        let image = '$UI/pcx/map/images/car' + randomNum + '.png';
        return this.getUIUrl(image);
    }

案例位置

桌面-地图类案例-高德地图.w