百度地圖jsp原始碼(直接複製使用)
阿新 • • 發佈：2019-02-19
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/1/12 Time: 10:08 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>百度地圖</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> </head> <body> <input type="text" id="cityName" value="福州"/> <input type="button" onclick="setCity()" value="查詢" /> <div id="container" style="width:1024px;height:600px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //在container容器中建立一個地圖,引數container為div的id屬性; var point = new BMap.Point(120.2,30.25); //建立點座標 map.centerAndZoom(point, 14); //初始化地圖，設定中心點座標和地圖級別 map.enableScrollWheelZoom(); //啟用滾輪調整大小功能 map.addControl(new BMap.NavigationControl()); //新增控制元件：縮放地圖的控制元件，預設在左上角； map.addControl(new BMap.MapTypeControl()); //新增控制元件：地圖型別控制元件，預設在右上方； map.addControl(new BMap.ScaleControl()); //新增控制元件：地圖顯示比例的控制元件，預設在左下方； map.addControl(new BMap.OverviewMapControl()); //新增控制元件：地圖的縮圖的控制元件，預設在右下方； TrafficControl var search = new BMap.LocalSearch("中國", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //結果呈現設定， map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//標註氣泡內容建立後的回撥函式，有了這個，可以簡單的改一下返回的html內容了。 // alert(html.innerHTML) }//這一段可以不要，只不過是為學習更深層次應用而加入的。 }); function setCity(){ search.search(document.getElementById("cityName").value); } search.search(document.getElementById("cityName").value); </script> </body> </html>