Angular中嵌入twitter和google maps

1. Angular中嵌入twitter

-1. 解决twitter不加载问题

在index.html中添加
<!-- load twitter -->
  <script>
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));
</script>

-2. 生成embed twitter
生成地址： https://publish.twitter.com/#
copy code and insert it into your website

image.png

2. Angular中使用google maps或者高德地图

-1.申请api key并且引入 image.png

//google
googleMapInit() {
    var myCenter = new google.maps.LatLng(31.1834123658, 121.4375103895);
    var styles = [
      {
        featureType: "administrative",
        elementType: "all",
        stylers: [
          { saturation: -99 }
        ]
      }, {
        featureType: "landscape",
        elementType: "all",
        stylers: [
          { saturation: -99 }
        ]
      }, {
        featureType: "poi",
        elementType: "all",
        stylers: [
          { saturation: -99 }
        ]
      }, {
        featureType: "road",
        elementType: "all",
        stylers: [
          { saturation: -99 }
        ]
      }, {
        featureType: "transit",
        elementType: "all",
        stylers: [
          { saturation: -99 }
        ]
      }, {
        featureType: "water",
        elementType: "all",
        stylers: [
          { saturation: -99 }
        ]
      }
    ];
      var mapProp = {
        center: myCenter,
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        zoomControl: false,
        mapTypeControl: false,
        styles: styles
      };
      var map = new google.maps.Map(document.getElementById("map"), mapProp);
      let content = `<h2>Shanghai</h2>
      <p>Shanghai Xuhui</p>`
      let infowindow = new google.maps.InfoWindow({
        content: content
      })
      var marker = new google.maps.Marker({
        position: myCenter,
      });
      marker.setMap(map);
      marker.addListener('click', function () {
        infowindow.open(map, marker);
      });
  }

//高德
gaodeMapInit() {
    let position = [121.437478, 31.183078]
    var map = new AMap.Map('map', {
      resizeEnable: true,
      zoom: 17,
      center: position
    });
    var marker = new AMap.Marker({
      position: position
    });
    marker.setMap(map);
    var infowindow;
    marker.on('click', function (e) {
      infowindow.open(map, e.target.getPosition());
    })

    var content = []
    content.push(`<b>hello</b>`)
    AMap.plugin('AMap.AdvancedInfoWindow', function () {
      infowindow = new AMap.AdvancedInfoWindow({
        content: `<b>Pixelmatic</b><div class="info-content">
          ShanghaiXuhui<br/>`,
        offset: new AMap.Pixel(0, -30)
      });
      infowindow.open(map, position);
    })
  }