代码编织梦想

1.第一种

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

<div style="width:100%;height:100vh;border:#ccc solid 1px;font-size:12px" id="map"></div>

<script type="text/javascript">

        var map = new BMap.Map("map", {mapType:BMAP_SATELLITE_MAP});

        var point = new BMap.Point(119.305724, 26.092186);

        map.centerAndZoom(point, 18);

        map.addControl(new BMap.NavigationControl());  //tab 地图卫星切换

        map.addControl(new BMap.MapTypeControl());      //tab 地图卫星切换

        var marker = new BMap.Marker(point);

        map.addOverlay(marker);

</script>

2.第二种

<script type="text/javascript">

    //创建和初始化地图函数:

    function initMap() {

      createMap();//创建地图

      setMapEvent();//设置地图事件

      addMapControl();//向地图添加控件

      addMapOverlay();//向地图添加覆盖物

    }

    function createMap() {

      var map = new BMap.Map("map", { mapType: BMAP_HYBRID_MAP });

      map.centerAndZoom(new BMap.Point(107.328895, 33.139306), 15);

      // map.addControl(new BMap.MapTypeControl()); //切换模式

      map.enableScrollWheelZoom();//启用地图滚轮放大缩小

    }

    function setMapEvent() {

      map.enableDragging();

    }

    function addClickHandler(target, window) {

      target.addEventListener("click", function () {

        target.openInfoWindow(window);

      });

    }

    function addMapOverlay() {

      var markers = [

        { content: "新四季广场", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.154179, lng: 107.327817 } },

        { content: "博雅新区", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.163609, lng: 107.324439 } },

        { content: "博雅新居", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.164032, lng: 107.324511 } },

        { content: "胜利新村", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.160587, lng: 107.350742 } },

        { content: "三合镇政府", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.139548, lng: 107.362096 } },

        { content: "博望小学", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.175577, lng: 107.301012 } },

        { content: "江湾社区", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.141241, lng: 107.303168 } }

      ];

      for (var index = 0; index < markers.length; index++) {

        var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);

        var marker = new BMap.Marker(point, {

          icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {

            imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)

          })

        });

        var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });

        var opts = {

          width: 200,

          title: markers[index].title,

          enableMessage: false

        };

        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);

        marker.setLabel(label);

        addClickHandler(marker, infoWindow);

        map.addOverlay(marker);

      };

    }

    //向地图添加控件

    function addMapControl() {

      var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });

      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);

      map.addControl(scaleControl);

      var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });

      map.addControl(navControl);

      var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });

      map.addControl(overviewControl);

    }

    var map;

    initMap();

  </script>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Ygaidi/article/details/127997721

百度地图sdk集成定位,卫星地图-爱代码爱编程

其中两种集成方式基本相同 1.百度地图第三方SDK的开放平台创建应用 2.下载官方的SDK 3.复制到项目的libs目录下 4.但这样工程并不会自动加载libs下的so文件,需配置so文件的路径为该libs路径,关

在echarts中使用百度地图,卫星地图_zh阿飞的博客-爱代码爱编程

在echarts中使用百度地图,卫星地图 <!-- 首先引入百度地图 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2

百度地图样式冲突问题-爱代码爱编程

前段时间做项目需要用到地图显示,于是我这边就选择了百度地图(考虑到之前用过百度地图) 页面使用百度地图步骤还是比较简单的,如下: 首先获取一个ak,具体步骤可以百度页面引入CSS文件 <link href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWi

百度地图设置卫星、矢量模式,球模型和瓦片模型加载-爱代码爱编程

https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=··· 球模型加载地图(放到最远,显示地球) <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak

百度地图api卫星地球模式的调用-爱代码爱编程

百度地图api卫星地球模式的调用 调用百度地图api注意事项 调用百度地图api 下面是百度地图官方给的调用实例 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut

android百度地图标方向,Android百度地图之方向感应和模式更改-爱代码爱编程

本文实例为大家分享了Android百度地图之方向感应和模式更改,供大家参考,具体内容如下 目标效果: 菜单中设置几种模式,点击可查看不同的地图形式,这里随便截几张图。 1.首先要去百度地图网站 http://lbsyun.baidu.com/ 2.注册账号后,点击开发->Android地图SDK->获取密钥,进入后显示如下页面。

android 地图点击禁用,Android app接入百度地图:禁用手势、模式切换、根据经纬度获取位置信息...-爱代码爱编程

嗯,没错,接入百度地图后一般可能要用到的一些功能... 1.开启交通图 mBaiduMap.setTrafficEnabled(true); 2. 模式切换 //卫星地图 mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE); //普通地图 mBaiduMap.setMapType(Baid

android 百度地图切换城市地图,android百度地图:卫星地图普通地图交通地图切换...-爱代码爱编程

在基础地图模式上,增加了普通图和卫星图的切换,以及是否增加交通图的图层。 public class LayersDemo extends Activity { /** * MapView 是地图主控件 */ private MapView mMapView = null; /** * 用MapController完成地图控制 */ p

android3d地图,百度地图Android版 新增卫星图及3D模式-爱代码爱编程

【IT168 资讯】近日,百度地图Android版V2.0正式对外发布。本次升级引入了全新引擎、全新数据并采用全新界面,因此这个版本被称为全新跨代版。它不仅为用户打造更加优质精准的地图检索及浏览感受,同时还有效节省使用地图的流量,使用户能够以最快的速度获取目标地点的每一个细节。 ▲百度地图界面 从太空看世界 百度地图Android版 V2.0

android地图模式,百度地图Android V2.0新增卫星图及3D模式功能-爱代码爱编程

近日,百度地图Android版V2.0正式对外发布。本次升级引入了全新引擎、全新数据并采用全新界面,因此这个版本被称为全新跨代版。它不仅为用户打造更加优质精准的地图检索及浏览感受,同时还有效节省使用地图的流量,使用户能够以最快的速度获取目标地点的每一个细节。   卫星图                                    3D

qml调用百度地图api实现卫星地球模式画路书轨迹-爱代码爱编程

qml调用百度地图api实现卫星地球模式画路书轨迹 总结下类型转换:pro文件中加入依赖的模块引入头文件 websockettransport.hmain文件加入qmlindex.html注意 总结下类型转换: pro文件中加入依赖的模块 这里我对工作中matlab的程序需要实现的功能进行讲解: QT += qml quick we

vue百度地图 一进页面加载卫星图-爱代码爱编程

  <bm-map-type :map-types="mapType" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type> data() { return { mapType:['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP'],

vue使用百度地图3.0,使用javascriptapi版,聚合点,个性化地图切换卫星地图_请叫我欧皇i的博客-爱代码爱编程

        为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScript版的了,话不多说,请看代码 1-第一步肯定是要引入啊,注意,是在vue的public出口文件的index.html中引入,因为我在这用

关于电影的html网页设计-威海影视网站首页-电影主题htm5网页设计作业成品_stu学生网页设计的博客-爱代码爱编程

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计