百度地图-初步的地图创建和标识

在使用之前，需要进入官方进行相关的账号申请和开发设置。

官方地址：百度地图开放平台 | 百度地图API SDK | 地图开发

根据以上提示进行申请和设置即可，相关配置都有详细说明。

1、首先在html里面创建地图展示的容器。

    <!--  1. 创建地图容器元素--><div class="bmap" id="container"></div>

2、在js文件中对地图进行创建和初始化，如果是在vue里面，一般是在页面初始化的时候进行加载展示，写在 mounted生命周期函数里面。

可以根据自己对地图的实际需求进行配置。

    // 2. 创建地图示例var map = new window.BMapGL.Map("container");// 3. 设置中心点坐标var point = new window.BMapGL.Point(117.647246, 26.271291);// 4. 地图初始化，同时设置地图展示级别map.centerAndZoom(point, 10);// 5. 开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 6. 添加比例尺控件var scaleCtrl = new window.BMapGL.ScaleControl();map.addControl(scaleCtrl);// 7. 添加缩放控件var zoomCtrl = new window.BMapGL.ZoomControl(); map.addControl(zoomCtrl);// 8. 添加城市列表控件var cityCtrl = new window.BMapGL.CityListControl(); map.addControl(cityCtrl);

3、如果要对地图上某个区域进行区别划分，可以为其加上一层遮盖层，便于视觉观看。具体可以参考官方文档的api，可以对城市，级别，底色，边框颜色，边框粗细进行自定义设置。

    // --- 添加行政区 ---var dist = new BMapGL.DistrictLayer({name: "(某某市)",kind: 2,fillColor: "rgb(172,216,187)",strokeColor: "white",fillOpacity: 1,});map.addDistrictLayer(dist);

4、对地图某个区域进行标注显示。

    var marker = new window.BMapGL.Marker(point); // 创建标注map.addOverlay(marker);

百度地图-初步的地图创建和标识相关推荐

H5 高德、百度、腾讯地图选择导航功能实现
实现效果展示: 地图底图使用的是腾讯地图,实现步骤: 一.在腾讯地图申请密钥key值:申请地址:https://lbs.qq.com/dev/console/application/mine (有账号 ...
浅谈百度地图的简单开发之引入基本地图以及修改地图样式（一）
今天,想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP),基本实现了百度地图的几大核心功能,百度地图中的基本地图,百度地图的定位,百度地图的全景显示,百度 ...
微信JS-SDK之地理位置的获取与在线导航，集成百度地图实现在线地图搜索
原创声明:本文来源于本人另一博客[微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索]原创作品,绝非他处摘取,转载请联系博主本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能 ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
ios 一步一步学会自定义地图吹出框(CalloutView)--(百度地图，高德地图,google地图)
前言在ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的google地图,只提供了这四个属性,如果想添加 ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
百度地图与谷歌地图（常识、区别，更倾向于使用百度地图，纠错信息比谷歌多）...
一. 获取当前地理位置信息的方法在HTML5之前 HTML5 根据IP地址来获取当前的地理位置信息浏览器通过geolocation的API接口来获取当前的地理位置信息,(经纬度) 方法为 ...
使用百度地图API实现地图生成、标记以及标注
首先你需要引入一段javaScript <script type="text/javascript" src="http://api.map.baidu.com/a ...

百度地图-初步的地图创建和标识

百度地图-初步的地图创建和标识相关推荐

最新文章

热门文章