当前位置:网站首页>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;
边栏推荐
- Detailed explanation of kotlin collaboration lanch
- 发扬连续作战优良作风 全力以赴确保北江大堤安全
- PM should also learn to reflect every day
- Seven challenges faced by data scientists and Solutions
- Huawei PC grows against the trend, and product power determines everything
- 万用表的使用方法
- HarmonyOS-3
- kotlin 语言特性
- HarmonyOS.2
- Kotlin shared mutable state and concurrency
猜你喜欢
AntD checkbox,限制选中数量
【5G NR】5G NR系统架构
Tupu software is the digital twin of offshore wind power, striving to be the first
群晖向阿里云OSS同步
吉时利静电计宽测量范围
Gatling performance test
One click to generate University, major and even admission probability. Is it so magical for AI to fill in volunteer cards?
Hardware development notes (6): basic process of hardware development, making a USB to RS232 module (5): creating USB package library and associating principle graphic devices
MIT-6.824-lab4A-2022(万字讲解-代码构建)
HarmonyOS.2
随机推荐
图扑软件数字孪生海上风电 | 向海图强,奋楫争先
杰理之可能出现有些芯片音乐播放速度快【篇】
《中国数据库安全能力市场洞察,2022》报告研究正式启动
2022质量员-设备方向-通用基础(质量员)考试题及答案
金鱼哥RHCA回忆录:DO447管理项目和开展作业--为ansible剧本创建一个项目
90%的项目经理都跳过的坑,你现在还在坑里吗?
Telecommuting: camping at home office gadgets | community essay solicitation
kotlin 数组、集合和 Map 的使用
Research and development practice of Kwai real-time data warehouse support system
钛星数安加入龙蜥社区,共同打造网络安全生态
杰理之TIMER0 用默认的 PA13 来检测脉宽【篇】
位于相同的分布式端口组但不同主机上的虚拟机无法互相通信
Detailed explanation of kotlin collaboration lanch
HarmonyOS-3
kotlin 语言特性
kotlin 协程上下文和调度器
杰理之开了多种解码格式插卡到播放等待的时间长【篇】
Google waymo proposed r4d: remote distance estimation using reference target
Docker安装redis
Jericho turns on shouting in all modes to increase mic automatic mute [chapter]