百度地圖api的簡單應用

備忘。
打開后網頁后,在視圖中點標示指定地點(如渡江戰役紀念館)。
效果圖

2016-10-25_233404.png

test.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
        #allmap{height:100%;width:100%;}
        
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MY0EnZEQIURRaFP8quuwWoil7icLAOnw"></script>
    <title>城市名定位</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),16);
    map.enableScrollWheelZoom(true);
    
    // 用經緯度設置地圖中心點
    
            map.clearOverlays(); 
            var new_point = new BMap.Point(117.33645,31.718043);//合肥市渡江戰役紀念館經緯度
            var marker = new BMap.Marker(new_point);  // 創建標注
            map.addOverlay(marker);  // 將標注添加到地圖中
            map.panTo(new_point);  
</script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,202評論 4 61
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,881評論 18 139
  • 小時候的我內向又害羞,每當家里請客吃飯,我都不愿與大人一起上桌吃飯,因為我覺得難為情。雖然很餓,可還是等到客人走后...
    快樂的有錢人閱讀 179評論 2 2
  • 姓名 學號 簡書鏈接 崔曉瑩 32 20171130W8英語復盤日志 李芝星 06 20171...
    106李芝星閱讀 198評論 1 0
  • 最近,總是在對抗自己。兒子生病了,兩晚上我都沒怎么睡,身心疲憊。有時候自己敏感的神經,一件很小的事,一句不愛聽的話...
    peggy_dfc0閱讀 231評論 0 0