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

边栏推荐
- Home office should be more efficient - automated office perfectly improves fishing time | community essay solicitation
- Goldfish rhca memoirs: do447 managing projects and conducting operations -- creating a project for ansible scripts
- Kotlin asynchronous flow
- 【sdx62】WCN685X IPA不生效问题分析及解决方案
- Jerry's serial port receiving IO needs to set the digital function [chapter]
- kotlin 共享可变状态和并发性
- The first open source MySQL HTAP database in China will be released soon, and the three highlights will be notified in advance
- Huawei PC grows against the trend, and product power determines everything
- 2022 coal mine gas drainage operation certificate examination questions and simulation examination
- Yyds dry goods counting solution sword finger offer: adjust the array order so that odd numbers precede even numbers (2)
猜你喜欢

首席信息安全官仍然会犯的漏洞管理错误

龙蜥开发者说:首次触电,原来你是这样的龙蜥社区? | 第 8 期

华为 PC 逆势增长,产品力决定一切

Hands on data analysis unit 3 model building and evaluation

如何在物联网低代码平台中进行任务管理?

**Puzzling little problem in unity - light and sky box

**Unity中莫名其妙得小问题-灯光和天空盒
![Jerrys timer0 uses the default pa13 to detect the pulse width [chapter]](/img/4e/de0951c8be5ddd765b15b773c04fa7.png)
Jerrys timer0 uses the default pa13 to detect the pulse width [chapter]

OpenHarmony 1

Tupu software is the digital twin of offshore wind power, striving to be the first
随机推荐
2022 Quality Officer - Equipment direction - post skills (Quality Officer) recurrent training question bank and online simulation examination
2022 construction elevator driver (construction special type of work) examination questions and online simulation examination
这几个默认路由、静态路由的配置部署都不会,还算什么网工!
kotlin 接口 泛型 协变 逆变
Huawei PC grows against the trend, and product power determines everything
Prometheus pushgateway
Goldfish rhca memoirs: do447 managing projects and conducting operations -- creating a project for ansible scripts
Golden age ticket: Web3.0 Security Manual
kotlin 协程 lanch 详解
2022年江西省安全员B证考试题库模拟考试平台操作
Coinbase will launch the first encryption derivative for individual investors
【AI玩家养成记】用AI识别邻居家旺财是什么品种
8 - Format integers and floating point numbers
2022年施工升降机司机(建筑特殊工种)考试试题及在线模拟考试
[AI player cultivation record] use AI to identify what kind of wealth is next door
Developer survey: rust/postgresql is the most popular, and PHP salary is low
源码解析 Handler 面试宝典
Goldfish rhca memoirs: do447 manage lists and credentials -- create machine credentials for the access list host
Seven challenges faced by data scientists and Solutions
Hands on data analysis unit 3 model building and evaluation