当前位置:网站首页>Baidu map API drawing points and tips

Baidu map API drawing points and tips

2022-06-24 13:58:00 Liz 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: ' Address ',
        	mapContent: ' Magic Castle Balala Wula Wula pineapple mango strawberry Street 2021-04-27 No. Road '
        }
	}

	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);
        }
    }

	 //  Initialize map 
    mapInit = (point) => {
    
        this.map = new BMap.Map('rescMap', {
    
            enableMapClick: false,
        });
        this.map.centerAndZoom(
            new BMap.Point(point),
            15
        );
        this.map.enableScrollWheelZoom(true); // Enable the scroll wheel to zoom in and out , Default disabled 
        this.map.setDefaultCursor("url('bird.cur')"); // Set the default mouse pointer style of the map 
        let marker = new BMap.Marker(point); //  Create annotations 
        this.map.addOverlay(marker);
        marker.addEventListener("click", () => {
    
            this.openMapInfo(point);
        });
    }

	openMapInfo = (point) => {
    
        const {
     mapName, mapContent } = this.state;
        let opts = {
    
            position: point,
            width: 25, //  Information window width 
            height: 10, //  Information window height 
            title: mapName //  Message window title 
        }
        let infoWindow = new BMap.InfoWindow(mapContent, opts);  //  Create information window object 
        this.map.openInfoWindow(infoWindow, point);
    }

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

export default MapStyle;

 Insert picture description here

原网站

版权声明
本文为[Liz Liz]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/175/202206241136073177.html