当前位置:网站首页>百度地图API绘制点及提示信息

百度地图API绘制点及提示信息

2022-06-24 12:59:00 莉兹Liz

import React, {
     Component } from 'react';
import {
     message } from 'antd';
import './index.less';
import httpClient, {
     RESPONSE_OK } from '../../service/httpClient';
import apis from '../../service/config';

class MapStyle extends Component {
    
    constructor(props) {
    
        super(props);
        this.state = {
    
        	mapName: '地址',
        	mapContent: '魔仙堡巴啦啦乌拉乌拉菠萝芒果草莓街2021-04-27号路'
        }
	}

	component() {
    
		this.getInfo();
	}

	getInfo = async () => {
    
		let res = await httpClient.post(apis.mapInfoGet, {
    });
        if(res.code === RESPONSE_OK) {
    
            let point = new BMap.Point(res.result.lng, res.result.lat);
            this.mapInit(point);
            this.openMapInfo(point);
        }
    }

	 // 初始化地图
    mapInit = (point) => {
    
        this.map = new BMap.Map('rescMap', {
    
            enableMapClick: false,
        });
        this.map.centerAndZoom(
            new BMap.Point(point),
            15
        );
        this.map.enableScrollWheelZoom(true); //启用滚轮放大缩小,默认禁用
        this.map.setDefaultCursor("url('bird.cur')"); //设置地图默认的鼠标指针样式
        let marker = new BMap.Marker(point); // 创建标注
        this.map.addOverlay(marker);
        marker.addEventListener("click", () => {
    
            this.openMapInfo(point);
        });
    }

	openMapInfo = (point) => {
    
        const {
     mapName, mapContent } = this.state;
        let opts = {
    
            position: point,
            width: 25, // 信息窗口宽度
            height: 10, // 信息窗口高度
            title: mapName // 信息窗口标题
        }
        let infoWindow = new BMap.InfoWindow(mapContent, opts);  // 创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point);
    }

	render() {
    
		return(<div>
			<div id="rescMap" className='rdl-map-content'></div>
		</div>);
    }
}

export default MapStyle;

在这里插入图片描述

原网站

版权声明
本文为[莉兹Liz]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_40138556/article/details/116197443