zoukankan      html  css  js  c++  java
  • vue项目引入第三方高德地图实现标点定位

        vue项目中,高德地图使用。

      引入vue中。异步导入vue中。

       gaoDe(key) {
                            window.onApiLoaded = function () {
                                var map = new AMap.Map('container', {
                                    resizeEnable: true,
                                    center: [113.951955, 22.530825],
                                    zoom: 16
                                });
                                
                            }
                            var url = `https://webapi.amap.com/maps? v=1.4.15&key=${key}&callback=onApiLoaded`;    
                            var jsapi = document.createElement('script');
                            jsapi.charset = 'utf-8';
                            jsapi.src = url;
                            document.head.appendChild(jsapi);
                        
            mounted() {
                        this.gaoDe('key');
                    },   
    

      在vue组件中使用,直接写在mouted中会出现AMap未定义的报错!

      目前,个人是使用定时器解决的。

                // 地图接口API
                        mapCom() {
                            let _this = this;
                            window.onLoad = function () {
                                var map = new AMap.Map('mapBox', {
                                    resizeEnable: true,
                                    center: [113.951955, 22.530825],
                                    zoom: 16
                                });
                                // console.log( _this.mapArray);
                                // 渲染坐标
                                // console.log(_this.status==false)
    
                                setTimeout(() => {
                                    if (_this.status == false) {
                                        return;
                                    }
                                    // console.log(_this.mapArray);
                                    _this.mapArray.forEach(item => {
                                        // console.log(item)
                                        var marker = new AMap.Marker({
                                            map: map,
                                            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                                            position: item,
                                            offset: new AMap.Pixel(-10, -30)
                                        });
                                    })
                                }, 1000)
                                // console.log(_this.mapArray);
                                map.plugin(["AMap.ToolBar"], function () {
                                    map.addControl(new AMap.ToolBar());
                                });
                            }
                            var url = `https://webapi.amap.com/maps?v=1.4.15&key=91d89e79a544b9ab37aa0147aec9bd0a&callback=onLoad`;
                            var jsapi = document.createElement('script');
                            jsapi.charset = 'utf-8';
                            jsapi.src = url;
                            document.head.appendChild(jsapi);
    
                        },
    

      

     

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    测试开发趋势 + PyUnit测试框架 + Robot Framework
    python 面经
    持经达变,不固而中
    数据库、网络、Linux面经
    兴趣培养方向
    133天
    Python学习第132天(Django2内容增加)
    Python学习第131天(Django之ORM一对多操作练习)
    Python学习第130天(Django中ORM一对多的增删改查)
    Python学习第129天(ORM单表查询、模糊查询)
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13748075.html
Copyright © 2011-2022 走看看