如何在web风暴中将谷歌地图API整合到角度js项目中 [英] How to integrate google maps API in angular js project on web storm

问题描述

有人可以引导我通过在webstorm中的angularjs项目中包含和集成JavaScript谷歌地图api的过程。通常我通过使用简单的html文件完成了这项工作，但是当我尝试在angularjs项目中包含相同的Google Maps API和代码时，地图视图不会呈现。谢谢，我会非常乐意为您提供帮助。

解决方案

这是示例如何将google地图集成到您的angularjs项目中

javascript：

  angular.module（'myApp'，[]）。 
指令（'myMap'，function（）{
 //指令链接函数$ ​​b $ b var link =函数（范围，元素，attrs）{
 var map，infoWindow; 
 var markers = []; 
 
 //地图配置
 var mapOptions = {
 center：new google.maps.LatLng（50，2），
 zoom：4，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 scrollwheel：false 
}; 
 
 //初始化映射
函数initMap （）{
 if（map === void 0）{
 map = new google.maps.Map（element [0]，mapOptions）; 
} 
} 
 
 //放置一个记号
函数setMarker（地图，位置，标题，内容）{
 var marker; 
 var markerOptions = {
 position：position， 
地图：地图，
标题：标题，
图标：'https：//maps.google.c om / mapfiles / ms / icons / green-dot.png'
}; 
 
 marker = new google.maps.Marker（markerOptions）; 
 markers.push（marker）; //将标记添加到数组
 
 google.maps.event.addListener（marker，'click'，function（）{
 //关闭窗口如果未定义
 if（infoWindow ！== void 0）{
 infoWindow.close（）; 
} 
 //创建新窗口
 var infoWindowOptions = {
 content：content 
 }; 
 infoWindow = new google.maps.InfoWindow（infoWindowOptions）; 
 infoWindow.open（map，marker）; 
}）; 
} 
 
 //显示地图并放置一些标记
 initMap（）; 
 
 setMarker（地图，新google.maps.LatLng（51.508515，-0.125487），'伦敦'，'只是一些内容'）; 
 setMarker（地图，新google.maps.LatLng（52.370216,4.895168），'阿姆斯特丹'，'更多内容'）; 
 setMarker（map，new google.maps.LatLng（48.856614，2.352222），'Paris'，'此处输入文字'）; 
}; 
 
返回{
 restrict：'A'，
模板：'< div id =gmaps>< / div>'，
替换： true，
 link：link 
}; 
}）; 
  

html：

 < div my-map =>< / div> 
  

css：

  #gmaps {
 width：450px; 
 height：450px; 
} 
  

Can someone please guide me through the process of including and integrating javascript google maps api in angularjs project on webstorm. Generally I have done this by using simple html file, but when I try to include the same google maps api and code in an angularjs project, the view of maps is not rendered. Thanks, I'll be really greatefull for the help.

解决方案

this is an example how to integrate google maps in your angularjs project

javascript:

    angular.module('myApp', []).
directive('myMap', function() {
    // directive link function
    var link = function(scope, element, attrs) {
        var map, infoWindow;
        var markers = [];

        // map config
        var mapOptions = {
            center: new google.maps.LatLng(50, 2),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

        // init the map
        function initMap() {
            if (map === void 0) {
                map = new google.maps.Map(element[0], mapOptions);
            }
        }    

        // place a marker
        function setMarker(map, position, title, content) {
            var marker;
            var markerOptions = {
                position: position,
                map: map,
                title: title,
                icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
            };

            marker = new google.maps.Marker(markerOptions);
            markers.push(marker); // add marker to array

            google.maps.event.addListener(marker, 'click', function () {
                // close window if not undefined
                if (infoWindow !== void 0) {
                    infoWindow.close();
                }
                // create new window
                var infoWindowOptions = {
                    content: content
                };
                infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                infoWindow.open(map, marker);
            });
        }

        // show the map and place some markers
        initMap();

        setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'London', 'Just some content');
        setMarker(map, new google.maps.LatLng(52.370216, 4.895168), 'Amsterdam', 'More content');
        setMarker(map, new google.maps.LatLng(48.856614, 2.352222), 'Paris', 'Text here');
    };

    return {
        restrict: 'A',
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link
    };
});

html:

<div my-map=""></div>

css:

#gmaps {
width: 450px;
height: 450px;
}

这篇关于如何在web风暴中将谷歌地图API整合到角度js项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！