百度地图的基本使用

2024-02-16 22:08:31

地图实例

1.引入src 添加ak

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=kmFLZ2pDs8Fkk90rHUksNrdtlnM3X8yT"></script>

2.div存放地图（注意设置宽高）

<div class="container"></div>

3.实例化地图

//创建一个地图实例
 var map = new BMapGL.Map("container");
 // 创建一个点
var point = new BMapGL.Point(113.6648, 34.7835);

// 设置缩放与中心点
map.centerAndZoom(point, 17);

地图的控件

      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.addControl(cityCtrl);

      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapType(BMAP_EARTH_MAP);      //开启地球模式

地图的绘制

点标记

      // 添加一个标记
      var marker = new BMapGL.Marker(point);
      // 将标注添加到地图中
      map.addOverlay(marker);

多边线

 var polyline = new BMapGL.Polyline(tempList,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

圆形

 var circle = new BMapGL.Circle(point,1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆

文本标记

内容
  var content = '中国<strong>前端</strong>学习基地';


设置
        var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,
            offset: new BMapGL.Size(10, 20)
        }) 
 map.addOverlay(label);                        // 将标注添加到地图中


样式
        label.setStyle({                              // 设置label的样式
            color: '#f30',
            fontSize: '12px',
            border: '2px solid #f70'
        })

信息窗口

信息窗口
 var infoWindow = new BMapGL.InfoWindow("地址：郑州金水区红旗路东三街", opts);  // 创建信息窗口对象 


事件切换
       marker.addEventListener("click", function(){          
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });

事件

  map.addEventListener("dblclick",function(){}  双击

地图检索

        var local = new BMapGL.LocalSearch(map, {
		renderOptions:{map: map}
        });
                // 执行地图搜索功能
                local.search(text);

API

1.地点输入提示服务
2.通过ip获取当前所在的城市
3.都是通过jsonp方式实现（添加ak）

react-bamp

1.安装

npm i react-bmapgl -S

2.引入js(public/index.html)

 <script
      type="text/javascript"
      src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=QmupPlsMvdPcvHhbaPqPRTMC097Nwrwo"
    ></script>

3.引入组件

import {
  Map,
  Marker,
  NavigationControl,
  InfoWindow,
  Polyline,
  Polygon,
  ZoomControl,
} from "react-bmapgl";

Map

引用获取
ref={ref=>{this.map=ref.map}}
center={{lng: center.lon, lat: center.lat}}
地图中心
zoom="13"
鼠标缩放滚动
enablescrollwheelZoom={true}
鼠标滚动缩放
style={{height:600}}
样式

Marker

position={{lng,alt}}
icon="start"
icon="end"
图标
onClick={this.showInfo}
事件

Polyline 绘线

  path={ new window.BMapGL.Point(item.lon, item.lat)}
              strokeColor="#f00"
              strokeWeight={6}

Polygon 多边形

  path={new window.BMapGL.Point(item.lon, item.lat)}
              strokeColor="#f00"
              strokeWeight={1}
              fillColor="#ff0"
              fillOpacity={0.1}


路径，线条颜色，线条出现，填充颜色，填充透明度

ZoomControl 缩放组件

NavigationControl 导航组件

infoWindow 信息窗口

ref={(ref) => {this.infoWindow = ref.infoWindow;}
position  位置
title  标题
text  文本内容
打开信息窗口
  this.map.openInfoWindow(this.infoWindow, this.map.getCenter());

码农公寓