js高德地图标点弹窗信息

主要实现的一个效果是什么样的呢？

我要清楚的知道小本本记好，，

主要思路：找经纬度弹出信息 可用默认弹窗和自定义

步骤：注册高德地图开发者 创建，获得密钥和key，

html中需要一个容器一个div给宽高，以下代码

	<div id="mymap">
			
			
			
		</div>

css样式有宽高，

要引入地图，有专门的jsscript需要在html  head中引入

	<script src="https://webapi.amap.com/loader.js"></script>

小本本记，loader

下面是引入地图的一个格式，内容呢是在then（amap）中写，如果东西多了会不好处理容易乱套，所以我用了函数取出amap在外面函数体里面写，这样写会看起来更美观

 window._AMapSecurityConfig = {
    securityJsCode: "0cfa34cb84317b5aba245278ad1c2b28",
  };
  AMapLoader.load({
    key: "c170c54c4a63530c213a6148debedf3d", //申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
		render(AMap)
      
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });

需要的东西在函数体里了

function render(sppr){
		// 初始化地址地点就是那个意思
		// zomm是距离吧就是看的范围
		const map = new AMap.Map("mymap",{
			 zoom: 14, 
			 center:[114.195373,35.14871]
		});
	
 

这里呢zoom是对地图放大缩小的，center是定在这个坐标前大小14的上帝视角

之后添加坐标点，加上点击事件，

这里呢我是用了自定义弹窗，大家可用用默认的，默认有自带的关闭弹窗，自定义是需要自己加的

之后呢需要数据渲染，数据里有几条我们的坐标就有几个

 mymap.on("click",function(){
 		var infoWindow = new AMap.InfoWindow({
 		    isCustom: true,  //执行使用自定义窗体
 		    content: `
			<div id="imms">
				
				<div id="row">
					<p>详细资料</p>
					<span onclick="delet()">x</span>
				</div>
				<div id="flex">
					<div id="img">
					<img src="${data[i].img}" >
				</div>
				<div id="address">
					<p>${data[i].name}</p>
				</div>
				
				</div>
				<div id="tel">
					<p>${data[i].tel}</p>
				</div>
				
			</div>
			
			`,
 		    offset: new AMap.Pixel(36, -65)
 		});
       infoWindow.open(map, mymap.getPosition());
	  
 	})
	
 map.add(mymap);
 }

这里呢就是我写的自定义弹窗比默认的弹窗只是多加了关闭的点击事件