HTML引用高德英文地图

HTML高德英文地图引用

<div class="map01wrap">
	<h3 class="maptl">高德英文地图引用</h3>
	<div id="dituContent01" class="map"></div>
	<script src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script>
	<script src="http://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	 <script>
		//初始化地图
		var map = new AMap.Map('dituContent01', {
		  resizeEnable: true,
		  center: [116.397472,39.909179],
		  zoom: 14,
		  lang: "en" //可选值：en，zh_en, zh_cn
		});
		  // 构造点标记
		var m3 = new AMap.Marker({
			  position: [116.397472,39.909179],
			  icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
		});
		map.add(m3);
	
		//绑定radio点击事件
		var radios = document.querySelectorAll("#lang input");
		radios.forEach(function(ratio) {
		  ratio.onclick = setLang;
		});
		function setLang() {
		  map.setLang(this.id);
		};
		
		//通过map.setStatus方法动态设置地图状态
		map.setStatus({
		  showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
		  resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
		  dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
		  keyboardEnable: false,//地图是否可通过键盘控制，默认为true
		  doubleClickZoom: true,// 地图是否可通过双击鼠标放大地图，默认为true
		  zoomEnable: true, //地图是否可缩放，默认值为true
		  rotateEnable: true// 地图是否可旋转，3D视图默认为true，2D视图默认false
		});
		
	</script>
</div>

CSS样式：

/* 高德英文地图 */
.map01wrap{width: 1200px;margin: 100px auto;}
/* maptl */
.maptl{font-size: 34px;color: #333333;text-align: center;margin-bottom: 30px;}
/* map */
.map{width: 100%;height: 400px;}