• 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);
    
                        },
    

      

     

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    SQL Server中删除表中重复数据
    [Everyday Mathematics]20150121
    [Everyday Mathematics]20150120
    [Everyday Mathematics]20150119
    [Everyday Mathematics]20150118
    [Everyday Mathematics]20150117
    Hilbert先生旅馆的故事
    调和级数发散的简短证明
    [Everyday Mathematics]20150116
    [Everyday Mathematics]20150115
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13748075.html
Copyright © 2020-2023  润新知