ReferenceError: AMap is not defined

Normally, the script should be placed after the body, but when the page is refreshed after the map is introduced into the body, an error is reported:

ReferenceError: AMap is not defined

Because when you load your app, you call AMap, so what is AMap? Of course not defined error.

So we need to introduce:

<script language="javascript" SRC = "http://webapi.amap.com/maps?v=1.4.15&key= you applied key&plugin = AMap. ControlBar Map3D, AMap. DistrictSearch" > < / script >Copy the code

Put it between head and body.

2. Selection of Amap application Web side and Web service

Web services:

Web side:

For the first time, look at this Web service so much content, of course it is it, in fact not.

My understanding is:

The Web end is the interface to load Autonavi map, some simple positioning, display;

A Web service is a map service that needs to be invoked, such as searching for peripheral details.

And what I’m going to do is I’m going to load the map, and I’m going to position some points, and I’m going to get the coordinates and I’m going to add some markers, so on the Web side of course.

3. Using Amap remark binding click events

The problem code

<div id="test" style="display:none;" >< demo-test ref="infoTest"></demo-test> < div> let map = null let markers = [ this for (let i = 0; i < dataJson.points.length; I++) {let onemark = new AMap. Marker ({icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', the position: [dataJson.points[i].longitude, dataJson.points[i].latitude], title: dataJson.points[i].name, topWhenClick: true }) onemark.on('click', self.clickRemark) // AMap.event.addListener(onemark, 'click', self.clickRemark) markers.push(onemark) } clickRemark (val) { let self = this console.log(self.$refs.infoTest, 111) console.log(self.$refs.infoTest.$el, 222) } destroyed () { if (map) { map.destroy() map = null } }Copy the code

The phenomenon of

Refresh the page to come in, click the event is normal, can get the DOM node for rendering.

Route jump in again, click event exception, can not get the DOM node for rendering.

However, dom nodes exist.

However, the print DOM in the click method is undefined.

Big head…

Analysis of the

Whether you use clickRemark() in the click binding to retrieve the DOM via $refs or by id;

The same problem exists whether the $nextTick function prints or setTimeout() is used to delay printing.

The clickRemark() function prints normally, so binding the click function is a problem.

Even if amap.event.addListener (onemark, ‘click’, self.clickremark) is used instead, the phenomenon is the same.

The results of

And then I thought, yes, it does, no, it doesn’t, so what’s the difference between markers?

Print the markers, it’s adding arrays!

Refresh the current page markers as []. The redirect markers come in and append each time, and the objects are repeated, so clickRemark is confused when clicked.

Drunk drunk, sure enough.

lesson

Global variables, remember! Pin! Destroyed!

On the other hand, single-page applications first look at whether they need to always exist as global variables. Global variables are usually not destroyed.

In general, non-permanent variables that can be managed by vue should be handed over to vue and hung on to vue.