百度地圖在web項目中的使用

來源:互聯網
上載者:User


在程式中調用百度地圖:

具體的代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> baidumap </title>  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b92e64ae5622663ceceaccd8ab8eb1"></script> </head> <body>  <div id="bdmap" style="width:500px;height:420px;margin=100px"></div> </body> <script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("bdmap");// 建立Map執行個體map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 建立點座標var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925));  // 建立標註map.addOverlay(marker1);              // 將標註添加到地圖中//建立資訊視窗var infoWindow1 = new BMap.InfoWindow("普通標註");marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});</script></html>

具體的 API 參考:http://developer.baidu.com/map/jsdevelop-2.htm

上面的代碼的標註為預設的,紅色的歎號,如果想自訂標註符號,可以加入下面的代碼,在上面建立點坐


<script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("bdmap");// 建立Map執行個體map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 建立點座標var myIcon = new BMap.Icon("images/4.png", new BMap.Size(59,42), { offset: new BMap.Size(10, 25)}); //自訂標註符號var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925), {icon: myIcon});  // 建立標註map.addOverlay(marker1);              // 將標註添加到地圖中//建立資訊視窗var infoWindow1 = new BMap.InfoWindow("<strong>的發的發的發</strong><br>"+"士大夫是否的範德薩發的發生室<br>"+"電話:6756656767<br>"+"郵編:7878787<br>");marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});</script>





聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.