vue中异步加载百度地图api及js中调用百度地图API

最新推荐文章于 2024-08-01 08:27:03 发布

爱笑的刚刚

最新推荐文章于 2024-08-01 08:27:03 发布

阅读量2k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/xuewengang/article/details/107639985

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue中加载百度地图

1.创建map.js 文件 js文件名随便

	export default function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
      if (typeof BMap !== 'undefined') {
        resolve(BMap)
        return true
      }
      window.onBMapCallback = function() {
        resolve(BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
        'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

2.需要使用的地方直接import引入

<div class="list" :id="mapId"></div>

import mapfrom './map.js'

data(){
        return{
            mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
            myMap: null,
            slocation:'钟楼' //显示的中心
        }
    },
    mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      loadBMap(你的百度地图的密钥，百度官网申请)
        .then(() => {
          // 百度地图API功能
          this.myMap = new BMap.Map(this.mapId) // 创建Map实例
          this.myMap.centerAndZoom(this.slocation, 15) // 初始化地图,设置中心点坐标和地图级别
          //添加地图类型控件
          this.myMap.addControl(
            new BMap.MapTypeControl({
              mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
            })
          )
          this.myMap.setCurrentCity('西安') // 设置地图显示的城市 此项是必须设置的
          this.myMap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        })
        .catch(err => {
          console.log('地图加载失败')
        })
    },

js中调用百度地图API

全部代码

    <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="http://api.map.baidu.com/api?v=2.0&ak=W1a6ywZFkybedSCHadpRbkz4w5HYfG4R" type="text/javascript" charset="utf-8"></script>
            <style type="text/css">
                    * {
                            margin: 0;
                            padding: 0;
                    }
                    #allmap {
                            width: 100%;
                            height: 700px;
                              position: relative;
                    }
                    #r-result{
                            position: absolute;
                            left: 0;
                            top: 100px;
                            background:red;
                            color: #fff;
                    }
            </style>
    </head>

    <body>
            <div id="allmap"></div>
            <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="搜索位置" style="width:200px;" /></div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            <script type="text/javascript">
                    var map = new BMap.Map("allmap");
                    map.centerAndZoom("钟楼", 15); // 初始化地图,设置中心点坐标和地图级别
                    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
                    map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
                    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                    function G(id) {
                            return document.getElementById(id);
                    }
                    var ac = new BMap.Autocomplete( //建立一个自动完成的对象
                            {
                                    "input": "suggestId",
                                    "location": map
                            });

                    ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
                            var str = "";
                            var _value = e.fromitem.value;
                            var value = "";
                            if(e.fromitem.index > -1) {
                                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                            }
                            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                            value = "";
                            if(e.toitem.index > -1) {
                                    _value = e.toitem.value;
                                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                            }
                            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                            G("searchResultPanel").innerHTML = str;
                    });

                    var myValue;
                    ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
                            var _value = e.item.value;
                            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                            setPlace();
                    });

                    function setPlace() {
                            map.clearOverlays(); //清除地图上所有东西
                            function myFun() {
                                    var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                                    map.centerAndZoom(pp, 18);
                                    map.addOverlay(new BMap.Marker(pp)); //添加标注
                            }
                            var local = new BMap.LocalSearch(map, {    //智能搜索
                                    onSearchComplete: myFun
                            });
                            local.search(myValue);
                    }
            </script>

    </body>