Using JavaScript and Tencent Maps to implement map satellite layer functions

Using JavaScript and Tencent Maps to implement the map satellite layer function

The map satellite layer is a common layer in map applications, which allows users to use satellite View map from perspective. This article will introduce how to use JavaScript and Tencent Map API to implement the map satellite layer function, and provide code examples.

1. Call Tencent Map API

First, introduce the JavaScript file of Tencent Map API in the HTML file, as follows:

<script src="//map.qq.com/api/js?v=2.exp&libraries=convertor"></script>

2. Create a map

Next, create a map instance in the JavaScript file, the code is as follows:

var map = new qq.maps.Map(document.getElementById('map'), {
  center: new qq.maps.LatLng(39.916527,116.397128),
  zoom: 13
});

Here we create a map instance and place it in the HTML file with the ID in the elements of map. The center point and zoom level of the map are also set.

3. Load satellite layer

Next, we need to load the satellite layer and add it to the map. The code is as follows:

var satelliteTileLayer = new qq.maps.TileLayer({
  getTileUrl: function(coord, zoom) {
    return "http://p1.map.gtimg.com/sateTiles/"+zoom+"/"+Math.floor(coord.x/16)+"/"+Math.floor(coord.y/16)+"/"+coord.x+"_"+coord.y+".jpg";
  }, 
  tileSize: new qq.maps.Size(256, 256),
  name: "卫星图"
});
satelliteTileLayer.setMap(map);

Here, we create a satellite layer instancesatelliteTileLayer and use Tencent Map’s satellite layer servicehttp://p1.map.gtimg. com/sateTiles/ to load. At the same time, we set the size and name of the layer and add it to the map.

4. Switch satellite layer

Finally, we can switch the map mode by adding buttons or other interactive methods. The code is as follows:

var mapTypeControl = new qq.maps.MapTypeControl({
  mapTypeIds: [qq.maps.MapTypeId.ROADMAP, qq.maps.MapTypeId.SATELLITE],
  style: qq.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: qq.maps.ControlPosition.BOTTOM_RIGHT
});
mapTypeControl.setMap(map);

Here, we create a map type control object mapTypeControl, and set the map type that can be switched to qq.maps.MapTypeId.ROADMAP and qq.maps.MapTypeId.SATELLITE, and set the control style to a drop-down menu and place it in the lower right corner.

The complete code example is as follows:

  
  
  <script src="//map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
  


  

  切换地图模式
  <script>
    var map = new qq.maps.Map(document.getElementById('map'), {
      center: new qq.maps.LatLng(39.916527,116.397128),
      zoom: 13
    });

    var satelliteTileLayer = new qq.maps.TileLayer({
      getTileUrl: function(coord, zoom) {
        return "http://p1.map.gtimg.com/sateTiles/"+zoom+"/"+Math.floor(coord.x/16)+"/"+Math.floor(coord.y/16)+"/"+coord.x+"_"+coord.y+".jpg";
      }, 
      tileSize: new qq.maps.Size(256, 256),
      name: "卫星图"
    });
    satelliteTileLayer.setMap(map);

    var mapTypeControl = new qq.maps.MapTypeControl({
      mapTypeIds: [qq.maps.MapTypeId.ROADMAP, qq.maps.MapTypeId.SATELLITE],
      style: qq.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: qq.maps.ControlPosition.BOTTOM_RIGHT
    });
    mapTypeControl.setMap(map);

    function toggleMapType() {
      if (map.getMapTypeId() == qq.maps.MapTypeId.ROADMAP) {
        map.setMapTypeId(qq.maps.MapTypeId.SATELLITE);
      } else {
        map.setMapTypeId(qq.maps.MapTypeId.ROADMAP);
      }
    }
  </script>

Using the above code, we can implement a map application with map satellite layer function.

The above is the detailed content of Using JavaScript and Tencent Maps to implement map satellite layer functions. For more information, please follow other related articles on the PHP Chinese website!