preface

Now there are many types of navigation map, such as baidu, tencent map, Google maps, and so on, because must apply to the company’s projects, so at the beginning of the project we will be from all aspects to reasonably select a conform to the requirements of navigation map, to avoid in the future development, because the accuracy of the map or effectiveness is not high enough, appear all sorts of problems, If the information cannot be updated in real time, the map display is wrong, etc., then spare time to change the map, which will not only consume time and energy, but also take up our precious time.


This section solves the problem

This article starts with the following aspects. If you have already developed various navigation maps in depth, you can skip it.

  • How many kinds of coordinate systems are used in maps at home and abroad?
  • Why choose Amap to build maps?
  • Autonavi map native SDK simple use
  • How to use Amap in vUE project?


The reference coordinates of domestic and foreign maps

First, let’s take a look at the development coordinates of the current navigation map.

At present, there are three kinds of map reference systems at home and abroad:



  • WGS84 coordinate system (geodetic system)



  • Gcj-02 Mars coordinate system (CnSA coordinate system)



  • Bd-09 Baidu coordinate system

Baidu coordinates are in Mars coordinates for secondary encryption, only specific companies will use. The positioning of the map itself is biased, Baidu has been edited twice above, and the error has been amplified once again. At present, only baidu map uses this standard.



Of course, there are other coordinate systems, such as CGCS2000 coordinate system (national geodetic coordinate system), Sogou coordinate system (sogou map special), tuba coordinate system (Tuba map) and so on, because the scope of these maps is not very large, I will not introduce one.



Three coordinate system transitions



Here is a small test, randomly selected a location for positioning, from the longitude and latitude shown by each map can be seen subtle differences, the difference between Google Map and Tencent Autonavi can be said to be omitted, but Baidu map compared to the other three, there is a significant gap, Latitude and latitude deviate from the third and second decimal places respectively.



To sum up, three kinds of coordinate system the data relative to the true location of contrast, baidu coordinates deviation is opposite bigger, Mars coordinates is better, so it’s best to choose to Mars coordinates for reference to develop navigation map, such as gold, tencent map, etc., if the project is to locate request is not high, can consider to choose baidu map.


The reason for the selection of Amap

Amap is a sub-project of Alibaba. After all, dachang projects are different, and its utilization rate and project update speed are self-evident. Of course, for other digital map suppliers, it is also the most familiar with China’s road conditions, covering more than 200 countries and regions around the world, has rich map drawing capabilities, 7 categories of 44 map elements can be customized drawing… These are official languages, for our development, easy to use, efficient, fast update is the absolute truth, the most important is a map can be used in the Web, Android and ios three terminals, real-time update map data, that is already very good.

In terms of GPS positioning, as mentioned above, AMap uses the Mars coordinate system, and the favorability rating increases again.


The application of autonavi’s native SDK


The preparatory work

You need a key, which is a key, and you can apply for it for free on amap’s open platform.


The key value of each port in Amap is completely different, which can be divided into many types: Ios platform, Andriod platform, Web side (JS API), Web services, wechat small program, WHEN I was doing the project, I thought there was only one key value. After drawing the ground for a long time, I found the reason why the page was blank. After asking the backend brother, I realized that I had always used the key value of the App side. So here’s the key! Be sure to ask which platform they’re giving you the key for.


The next step is to mindlessly introduce related dependency files, starting with the introduction of an official stylesheet in index.html.

<! -- Style sheet --> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />Copy the code


If you need to do mobile development, add a ViewPort setting to the head TAB of your index. HTML page so that the width of the page automatically fits the width of the phone screen for best rendering performance. The initial scale of the page is set to 1, and users cannot adjust the scale.

<meta name="viewport" content="Initial - scale = 1.0, the user - the scalable = no"> Copy the code


Draw a simple map

First we need to understand the complete life cycle of a map object, which is mainly divided into three parts: creation, existence and destruction, namely:

  • Creating a map object
  • Map loading completed
  • Destroying map objects


To create a map object, you need a div as the container for the map and a unique ID attribute.

Note: div must indicate width and height, otherwise the map will not display; Page can create multiple containers, create multiple maps


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



You then need to import the officially specified JS file inside the body.

<! Create map --> <script SRC ="To the key value of the https://webapi.amap.com/maps?v=1.4.13&key= application"></script> <! -- import official js file --> <script SRC ="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>Copy the code


To build a simple Map, it is necessary to construct an instance of Map class and set certain initialization parameters to set the initial state of the Map, such as Map hierarchy, center point, view mode, etc. For more Map parameters, please refer to the Autonavi Open Platform document. Here only a few simple and necessary attributes are introduced.


 var map = new AMap.Map('container', {
   resizeEnable: trueZoom :11, // Initialize the map level center: [116.397428, 39.90923], // Initialize the map center point viewMode:'3D'// use 3D view});Copy the code


When the map object is created, the page starts loading the map resource. When the map is loaded, a complete event is triggered. If you want to execute some function to load the rest of the page, you need to execute it in the complete function.


map.on('complete'.function(){// Map block is triggered after loading});Copy the code


The map is destroyed if you call the destroy method. Once this method is executed, the map object is unregistered, freeing memory and emptying the map container we just created.


map.destroy( );Copy the code


The renderings are as follows:



The VUE project uses Amap


Now Scott maps of the official document, introduces how to use only the native js, using the method, but in the vue, wandered the world, if it’s written in the native js to page, you over, but predecessors have trod the pit, rolling out the way to us, so with a pen, you can easily find a component, to easily solve the problem.


Vue-amap is amap component based on vue 2.x and autonavi. It has its own development documentation, which is different from other widgets created by individuals. The documentation and usage rate are quite good, and it can cover most scenes without autonavi’s native SDK. It may be necessary to introduce the Godard native SDK for support.


Therefore, it is a very good component for beginners who are not familiar with the official development documents of Autonavi, because we do not need to care about the specific operation of the map, just need to understand the structure of vuE-AMAP component.


Simple use of VUE-AMAP components


1. Install vuE-AMAP


npm install -S vue-amapCopy the code


2. Import components


First of all, it is necessary to introduce vuE-AMap components in main.js, initialize components, selectively introduce relevant plug-ins in the plugin array, and specify the version number of the SDK for the introduction of AmAP to facilitate compatibility with different vUE versions


import VueAMap from 'vue-amap';
Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: 'Applied key value',
  plugin: ['AMap.Autocomplete'.'AMap.PlaceSearch'.'AMap.Scale'.'AMap.OverView'.'AMap.ToolBar'.'AMap.MapType'.'AMap.PolyEditor'.'AMap.CircleEditor'.'AMap.Geolocation'],
  v: '1.4.4'
});Copy the code


3. Build the base map


Build a simple map object, only need to introduce el – amap label, and specify the map container ID (vid) is ok, you also can set the other static properties (and only can initialize configuration, does not support response type) and dynamic properties (support response type), and locate in the center of the map to add tags, convenient user recognition site.


<el-amap class="amap-box" :vid="'amap-vue'"></el-amap>Copy the code


Generally, when drawing custom maps, users will be asked to search for place names. Therefore, the search label el-amap-search-box needs to be added to the map, where the search function can be set up to match relevant places in the map and give corresponding data after the user enters the keywords.


<el-amap-search-box
                    :search-option="searchOption"
                    :on-search-result="onSearchResult"
                    ></el-amap-search-box>Copy the code


4. The effect picture is as follows:



summary

Amap open platform for beginners, in-depth research time still need more, choose a stable and still updated components, is a good choice, this choice mainly depends on personal, if you have better ideas, I will continue to share with you here.


/ Personal introduction /

2 years of software development experience, understand Vue/react/Jquery/javasript/PHP, have certain research on vue/Jquery, welcome QQ exchange 1187851948