1 overview

The project needs to introduce maps. For the latest Vue3.0, baidu/Autonavi/Tencent maps have not been adapted, only Vue 2.x version:

Currently only Google Maps with Vue3.0:

However, the lack of adaptation does not mean that it cannot be used, the focus of this article is how to use these four maps, no nonsense into the main topic.

2 Google Maps

Steps:

  • To obtainAPI Key
  • The installation
  • use

2.1 getAPI Key

Poke here as prompted:

First click on the first link to create the project:

Enter the project name:

Click here to view your credentials:

Select the API key inside the create credential:

Copy the created key.

2.2 installation

npm install --save vue3-google-map
# or
cnpm install --save vue3-google-map
# or
yarn add vue3-google-map
Copy the code

2.3 the use of

Add the following sample code to the components you want to import:

<template>
	<GoogleMap
	api-key="YOUR_GOOGLE_MAPS_API_KEY"
	style="width: 100%; height: 500px"
	:center="center"
	:zoom="15"
	>
		<Marker :options="{ position: center }" />
	</GoogleMap>
</template>

<script>
import { GoogleMap, Marker } from 'vue3-google-map'

export default {
	components: { GoogleMap, Marker },
	setup() {
		const center = { lat: 40.689247.lng: -74.044502 }
		return { center }
	},
})
</script>
Copy the code

Change the KEY to its own KEY.

If the KEY is ok, you can see the map after running.

The map API is not yet active. Click the link in the prompt to activate it:

Enable:

But here’s another error:

Follow the link prompted by the console to activate:

Once activated, you can see the map.

3 Baidu Map

Steps:

  • To obtainak
  • The installation
  • use

3.1 getak

Ak is similar to Google Map API KEY, click here to register baidu Map developer account, and then create an application:

Notice The application type must be browser, and the domain name limit must be configured. If the domain name is not restricted, enter *.

When created, you can see ak:

3.2 installation

Vue2. X can be installed from NPM/CNPM:

  • vue-baidu-map-v3
  • vue-baidu-map
  • coalbr-vue-baidu-map

Check the documentation for details.

Baidu Map currently has 4 sets of JS apis:

  • JavaScript API GL
  • JavaScript API v2.0
  • JavaScript API v3.0
  • JavaScript API Lite

This is done using the V3.0 API. For this API, the official documentation only provides the way to import 

<script type="text/javascript" src="Http://api.map.baidu.com/api?v=3.0&ak= your key"></script>
Copy the code

The specific process is that index.html in Vue application directly introduces the JS:

3.3 the use of

Create a fixed-width container with the required components:

<div id="container" style="width: 800px; height: 800px"></div>
Copy the code

Create a map in Mounted () :

mounted(){
	var map = new BMap.Map('container')
    var point = new BMap.Point(116.404.39.915)
    map.centerAndZoom(point, 15)
    map.enableScrollWheelZoom(true)}Copy the code

Operation effect:

See the official documentation for more details.

4 Amap

Process:

  • Obtaining an AccountKEY
  • The installation
  • use

4.1 KEY

Autonavi Open Platform account

Create:

Select Add:

Select Web side (JS API), also need domain name limit please enter as prompted:

Once created, you can see the KEY.

4.2 installation

Autonavi JSAPI currently has two versions: V1.4 / V2.0, V1.4 map can only be introduced through

Install JSAPI Loader using NPM/CNPM:

npm i @amap/amap-jsapi-loader --save
# or
cnpm i @amap/amap-jsapi-loader --save
Copy the code

Another way is the traditional

4.3 the use of

Define a container in the required components and determine the height and width:

<div id="container" style="height: 800px; width: 800px;"></div>
Copy the code

The next step is import:

import AMapLoader from '@amap/amap-jsapi-loader';
Copy the code

Setup ()/ Mounted () :

setup(){
    AMapLoader.load({
        "key": "".// The obtained Web developer Key is required when the load is invoked for the first time
        "version": "1.4.15".// Specify the version of JSAPI to load, which is 1.4.15 by default
        "plugins": [].// List of plug-ins to use, such as Scale' amap.scale 'etc
        "AMapUI": {                                         // Whether to load AMapUI
            "version": '1.1'.// AMapUI defaults to 1.1
            "plugins": [].// The AMapUI UI plug-in needs to be loaded
        },
        "Loca": {// Whether to load Loca
            "version": '1.3.2'                              // Loca version, default 1.3.2
        },
    }).then((AMap) = >{
        var map = new AMap.Map('container', {
            zoom:11./ / level
            center: [116.397428.39.90923].// Center point coordinates
            viewMode:'3D'                                   // Use 3D view
        });
    }).catch(e= > {
        console.log(e); })},Copy the code

Change the value to your own KEY. The example effect is as follows:

See the official documentation for more details.

5 Tencent Map

The steps are similar:

  • Registered account
  • The installation
  • use

5.1 Registering an Account

Click here to register an account:

Create KEY:

5.2 installation

Tencent Map also has two versions at present: V1 /v2. Here we take V2 as an example.

Tencent Map is similar to Baidu Map, only provides 

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KEY"></script>
Copy the code

Change it to your own KEY.

5.3 the use of

Create container for component:

<div id="container" style="width: 800px; height: 800px"></div>
Copy the code

Mounted ()

mounted(){
	var myLatlng = new qq.maps.LatLng(39.90923.116.397428)
    var myOptions = {
        zoom: 8.center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP
    }
    var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}
Copy the code

Example effects:

Appendix: Coordinate system transformation

There are mainly three coordinate systems in China:

  • WGS84: a geodetic coordinate system widely used todayGPSThe coordinate system used
  • GCJ02: Also known as Mars coordinate system/national Bureau of Surveying and Mapping coordinate system, the Chinese State Bureau of Surveying and Mapping formulated the geographic information system coordinate system, isWGS84The coordinate system after the coordinates are encrypted
  • BD09: Baidu coordinate system, inGCJ02On the basis of encryption again

The coordinate system used by various maps is as follows:

  • Google Map, Autonavi Map, Tencent Map:GCJ02
  • Baidu Map:BD09
  • Google Maps abroad,osmMap, such as:WGS84

There are two open source libraries (3.1K / 1.8K STAR) recommended for coordinate system transformation when the coordinate system is inconsistent:

Stamp here or use here.

If you think the article looks good, please like it.

At the same time, welcome to pay attention to wechat public number: Lingzhi Road.