当前位置:网站首页>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;

边栏推荐
猜你喜欢
随机推荐
杰理之可能出现有些芯片音乐播放速度快【篇】
杰理之检测 MIC 能量自动录音自动播放参考【篇】
杰理之.睡眠以后定时唤醒系统继续跑不复位【篇】
Use of kotlin arrays, collections, and maps
2022年施工升降机司机(建筑特殊工种)考试试题及在线模拟考试
[AI player cultivation record] use AI to identify what kind of wealth is next door
HarmonyOS-3
杰理之TIMER0 用默认的 PA13 来检测脉宽【篇】
Kotlin coroutine context and scheduler
Rongyun communication has "hacked" into the heart of the bank
一键生成大学、专业甚至录取概率,AI填报志愿卡这么神奇?
初识云原生安全:云时代的最佳保障
Research and development practice of Kwai real-time data warehouse support system
Goldfish rhca memoirs: do447 manage lists and credentials -- create machine credentials for the access list host
发扬连续作战优良作风 全力以赴确保北江大堤安全
杰理之红外滤波【篇】
MIT-6.824-lab4A-2022(万字讲解-代码构建)
Jerry's seamless looping [chapter]
【sdx62】WCN685X IPA注册失败问题分析及解决方案
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)









