《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地图包

   • 参考：https://angular.io/docs/js/latest
   • 不存在

3. 是否ionic2自带google地图包

   • 参考：http://ionicframework.com/docs/v2/
   • 不存在

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的引入

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

• 参考地址：http://lbs.amap.com/api/javascript-api/guide/quickstart/
• key申请：注册成为高德开发者，申请appkey

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