首页 > 其他 > 详细

vue项目引入第三方高德地图实现标点定位

时间:2020-09-29 10:29:51      阅读:520      评论:0      收藏:0      [点我收藏+]

    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);

                    },

  

 

 

 

vue项目引入第三方高德地图实现标点定位

原文:https://www.cnblogs.com/hudunyu/p/13748075.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!