02, mapa de alta moral

listo

1, los valores de clave de registro de aterrizaje:

https://lbs.amap.com/api/webservice/guide/create-project/get-key

2, en la aplicación de consola de gestión, crear una aplicación, agregue la clave:

https://lbs.amap.com/dev/key/app

3, la documentación de ayuda:

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

Crear un mapa

de manera sincrónica para crear un mapa

//引入地图js
<script type = "text / javascript" src = "https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e"> </ script>

Mapa del recipiente se proporciona a la anchura y la altura //
<style type = "text / CSS">
#container {width: 100%; altura: 600px;}
</ style>

// necesidad de introducir un recipiente para el mapa

// crear un mapa, y el mapa se introduce en el identificador de recipiente contenedor
<script type = "text / JavaScript">
nuevo nuevo AMap.Map ( 'contenedor');
</ Script>

Crear un mapa de forma asíncrona

// crear un mapa, y el mapa se introduce en el identificador de recipiente contenedor 
<Script> 
window.init = función () {
 　　nueva nueva AMap.Map ( 'contenedor' ); 
}
 </ script> 

// Mapa js introducidos, y los js de devolución de llamada a la parte superior del init 
<script del type = "text / javascript" src = "https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=init&callback=init"> </ script> // crear un mapa, y el mapa se introduce en el identificador de recipiente contenedor <style type = "text / CSS"> 
#container {width: 100% ; altura: 600px;}
 </ style> // necesidad de introducir un recipiente para el mapa 
<div id = "contenedor"> </ div>

Crear un mapa de dos modo asíncrono

// cargar la estructura de la página, crear un mapa, y el mapa de la introducción del recipiente contenedor ID

window.onload = function () {
var map = new AMap.Map ( 'contenedor');
}

// importa mapa JS, JS y el proceso de carga de devolución de llamada a la cima

var url = 'https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=onload';

// crear un guión, y asignado al atributo src url
var = JSAPI document.createElement ( 'script');
jsapi.charset = 'UTF-8.';
Jsapi.src = url;

// Añadir la parte posterior etiqueta script generado para la cabeza
document.head.appendChild (JSAPI);
</ script>

Mapa de configuración inicial

Establecer el mapa y centro de nivel (modo de inicialización)

mapa var = new AMap.Map ( 'contenedor', {zoom: 11, centro de: [120,30]});

Ver mapa nivel / punto central

console.log (map.getZoom ()); // Mostrar en el mapa el nivel actual 
console.log (map.getCenter toString () ().); // mapa actual punto central

Ajuste el / punto central (la interacción del usuario) Nivel de mapa

 // establecer el nivel de mapa 
 var jibie = document.getElementById ( 'jibie' );
  var queren = document.getElementById ( 'queren' ); 
 queren.onclick = función () { 
 map.setZoom (jibie.value);    // obtener el texto caja dentro de los niveles digitales 
 <div id = "CC"> 
 <input type = "número" ID = "jibie" /> 
 <tipo de botón = "button" id = "queren"> confirmar </ botón> 
 </ div> / / centro de conjunto de mapas 
la setTimeout ( función () { 
map.setCenter ([ 122,33 ]) 
},5000 ) // establecer el nivel y el punto central de 
la setTimeout ( función () {




map.setZoomAndCenter ( 11, [120,30 ]) 
}, 5000)

mapa Eventos

// vista local del movimiento de disparo 
map.on ( 'la MoveEnd', función () {})   

// después del cambio de nivel de mapa gatillo 
map.on ( 'ZoomEnd', función () {})

Ver el actual punto central administrativa

var cc = document.getElementById ( 'CC' ); 
map.on ( 'MoveEnd', función () { 

map.getCity ( función (info) { 
cc.innerText = "地图中心位置为:" + info.province + '' + info.city + '' + info.district ; 
console.log (info); 
})

 <div id = "cc"> 
12345 
</ div>

Ajuste la corriente de punto central administrativa

var Que = document.getElementById ( 'que' );
var Diqu = document.getElementById ( 'Diqu' ); 
que.onclick = función () { 
map.setCity (diqu.value); 

<div id = "Xingzheng"> 
<input type = nombre de "texto" = "" id = "Diqu" /> 
<botón id = "que">确认设置botón </> 
</ div>