Using JavaScript and Tencent Maps to implement map satellite layer functions-JS Tutorial-php.cn

Using JavaScript and Tencent Maps to implement map satellite layer functions

WBOY

Release： 2023-11-21 16:17:29

Original

1061 people have browsed it

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.

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>

Copy after login

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

Copy after login

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.

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

Copy after login

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.

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

Copy after login

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>

Copy after login

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!