百度地图的基本使用

2022-01-12 18:03:31 阅读：353 来源： 互联网

地图实例

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

标签：基本,map,缩放,地图,BMapGL,var,new,百度
来源： https://blog.csdn.net/qq_54780978/article/details/122458887

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9