高德动态地图

1.搭建页面结构

<div class="dataAllBorder02" style="position: relative; overflow: hidden;"><div class="map_title_box" style="height: 6%"><div class="map_title_innerbox"><div class="map_title">全球医院定位地图</div></div></div><div id="map" style="width: 100%;height: 95%;"></div>
</div>

2.注册自己的key

我的应用 | 高德控制台 (amap.com)

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'ae0b638166af91046443075fa4',//自己申请的高德地图key}
</script>

3. 拼接网址

//换成自己的key
<script src="https://webapi.amap.com/maps?v=1.4.15&key=fd4b698a472b7df66c70f02e1e"></script>

4.JS代码

<script>var map = new AMap.Map("map", {pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度viewMode: '2D', //地图模式rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动zoom: 17, //初始化地图层级rotation: 0, //初始地图顺时针旋转的角度zooms: [2, 20], //地图显示的缩放级别范围center: [116.333926, 39.997245] ,//初始地图中心经纬度layers: [new AMap.TileLayer.Satellite(), // 添加卫星图层new AMap.TileLayer.RoadNet() // 默认添加路网图层]});// 添加指南针AMap.plugin('AMap.ControlBar', function () {map.addControl(new AMap.ControlBar({showZoomBar: true,showControlButton: true,position: {left: '15px',top: '10px',}}));});AMap.plugin(["AMap.MapType"],function(){//地图类型切换var type= new AMap.MapType({defaultType:1 //使用2D地图});mapObj.addControl(type);});AMap.plugin(["AMap.Scale"],function(){var scale = new AMap.Scale();mapObj.addControl(scale);});// 添加切换地图类型的控件AMap.plugin(['AMap.MapType'], function () {var mapType = new AMap.MapType({defaultType: 0, // 初始地图类型：卫星图showRoad: true // 是否显示路网图层});map.addControl(mapType);});AMap.plugin("AMap.Geolocation", function () {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,buttonPosition: "RB",buttonOffset: new AMap.Pixel(10, 20),zoomToAccuracy: true,buttonDom: "<div style=\"background-color:#39f;color:#fff;padding:5px;\">定位</div>"});map.addControl(geolocation);geolocation.getCurrentPosition(function (status, result) {if (status === "complete") {onComplete(result);} else {onError(result);}});function onComplete(data) {var lng = data.position.lng;var lat = data.position.lat;console.log("我的位置", lng, lat);searchNearbyPharmacies(lng, lat);}function onError(error) {alert("定位失败");}});function searchNearbyPharmacies(lng, lat) {AMap.plugin(["AMap.PlaceSearch"], function () {var placeSearch = new AMap.PlaceSearch({pageSize: 8,pageIndex: 1,city: "", // 全国范围搜索map: map,panel: "panel"});console.log("开始搜索附近的药店...");var keyword = '药店';// console.log(keyword);placeSearch.searchNearBy(keyword, [lng, lat], 5000, function (status, result) {console.log("处理搜索结果", status);// 处理搜索结果if (status === "complete" && result.info === "OK") {// 成功获取到搜索结果var pharmacies = result.poiList.pois;if (pharmacies.length > 0) {addMarkers(pharmacies);// Add route planning from current location to the first pharmacyvar destination = [pharmacies[0].location.lng, pharmacies[0].location.lat];planRoute([lng, lat], destination);}} else {// 搜索失败console.error("搜索失败：", result.info);}});});}function addMarkers(pharmacies) {for (var i = 0; i < pharmacies.length; i++) {var marker = new AMap.Marker({position: [pharmacies[i].location.lng, pharmacies[i].location.lat],map: map,icon: new AMap.Icon({// image: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",imageSize: new AMap.Size(24, 24)})});}}function planRoute(origin, destination) {// Create a driving route plannervar driving = new AMap.Driving({map: map,panel: "panel"});// Use driving service to plan routedriving.search(origin, destination, function(status, result) {// Check if route planning is successfulif (status === 'complete') {console.log("路线规划成功");} else {console.error("路线规划失败：" + result);}});}// 自动定位并搜索AMap.event.addDomListener(window, 'load', function () {geolocation();});function geolocation() {map.plugin('AMap.Geolocation', function () {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,zoomToAccuracy: true});map.addControl(geolocation);geolocation.getCurrentPosition();// AMap.event.addListener(geolocation, 'complete', function (data) {//     onComplete(data);// });AMap.event.addListener(geolocation, 'error', function (data) {onError(data);});});}</script>