ionic2及ng2谷歌/高德地图控件分析实例

《ionic2及ng2谷歌/高德地图控件分析实例》

创建示例项目

项目地址:https://github.com/driftyco/ionic-conference-app

git clone https://github.com/driftyco/ionic-conference-app
cd ionic-conference-app
npm install
ionic serve

map.js解析

问题

  • google.maps.Map包来自哪里,如何实现的?
  • 如何将map.js迁移至高德地图,以便国内用户使用?

代码展示

// 文件 project/app/pages/map/map.js
onPageLoaded() {
  this.confData.getMap().then(mapData => {
    let mapEle = document.getElementById('map');

    let map = new google.maps.Map(mapEle, {
      center: mapData.find(d => d.center),
      zoom: 16
    });

    mapData.forEach(markerData => {
      let infoWindow = new google.maps.InfoWindow({
        content: `<h5>${markerData.name}</h5>`
      });

      let marker = new google.maps.Marker({
        position: markerData,
        map: map,
        title: markerData.name
      });

      marker.addListener('click', () => {
        infoWindow.open(map, marker);
      });
    });

    google.maps.event.addListenerOnce(map, 'idle', () => {
      mapEle.classList.add('show-map');
    });

  });
}

探索

寻找google地图插件

  1. 查找整个项目,但发现不存在任何googlet地图包引入相关的代码
  cd project/app
  grep -rn "map"
  1. 查找看webpack.config.js,不存在任何google地图包引入

  2. 是否angular2中自带google地图包

  3. 是否ionic2自带google地图包

  4. index.html中引入了googlemaps的api

  <!-- google maps script is loaded last as to not block rendering -->
  <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

注释掉script引入,测试是否影响程序运行,报错

  EXCEPTION: ReferenceError: google is not defined app.bundle.js:34204
  EXCEPTION: ReferenceError: google is not defined

注释后报错,确认google地图插件来自于index页面script的引入

实践——更换地图控件为高德地图

  1. 在index.html添加高德api引入代码
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  1. 参考高德快速入门,重写map.js的OnPageLoaded部分代码
  onPageLoaded() {
  this.confData.getMap().then(mapData => {
    let mapEle = document.getElementById('map');

    let map = new AMap.Map('map', {
      center: mapData.find(d => d.center),
      zoom: 16
    });

报错

  EXCEPTION: TypeError: this.ib(...) is undefined

原因:mapData.find()函数中经纬度格式不正确

  1. 修改正确的OnPageLoaded代码
  let mapEle = document.getElementById('map');

  let cdata = mapData.find(d => d.center);

  let map = new AMap.Map(mapEle, {
   center: [cdata.lng,cdata.lat],
   zoom: 16
  });

报错,但不影响使用

  Firefox can t establish a connection to the server at ws://vdata.amap.com/. maps:1:28148

  The connection to ws://vdata.amap.com/ was interrupted while the page was loading.
  1. Console不报错但是无法显示?CSS样式问题!

注释掉两行调整透明度的样式即可成功

  .map-page #map {
  width: 100%;
  height: 100%;
  //opacity: 0;
  //transition: opacity 150ms ease-in
  }
  1. 继续修复marker和info控件

实践成果——附上完美整合高德地图后map.js的OnPageLoaded()函数

onPageLoaded() {
  this.confData.getMap().then(mapData => {
    let mapEle = document.getElementById('map');

    let cdata = mapData.find(d => d.center);
    let map = new AMap.Map(mapEle, {
      center: [cdata.lng,cdata.lat],
      zoom: 16
    });

    mapData.forEach(markerData => {
            let infoWindow = new AMap.InfoWindow({
                    content: `<h1>标记位置:</h1><p>${markerData.name}。</p>`,
                    offset: new AMap.Pixel(0, -30),
                    size:new AMap.Size(230,0)
            });

            let marker = new AMap.Marker({
                    position: [markerData.lng,markerData.lat],
                    map: map,
                    title: markerData.name
            });

            let clickHandle = AMap.event.addListener(marker,'click', () => {
                    infoWindow.open(map, marker.getPosition());
            });
    });

    AMap.event.addListenerOnce(map, 'idle', () => {
            mapEle.classList.add('show-map');
    });
  });
微信扫一扫交流

作者:ryanemax
微信关注:ryanemax (刘雨飏)
本文出处:https://futurestack.cn/cookbook/frontend/ionic2-googlemap-amap/
授权协议: CC BY-SA 4.0