Nokia Here Map Basic Sample Code

Leave a reply

最近想嘗試一下使用Nokia Here Map...
http://developer.here.com/
自從Nokia Lumia Windows Phone 使用 Nokia Here Map 之後
感覺到..他有可能是Google Map的競爭對手…
聽說Nokia Map的SatNav 功能很好…很實用..
所以便想看看難不難用…

像我這樣的人當然是喜歡Copy他的Sample Code..
Load Up 了他的地圖之後再慢慢嘗試他的功能
誰不知..他的教學會是希望使用者跟著文章一路讀一路實習…
Javascript API 的教學文章

不像Google Map 一樣可以直接給你複製貼上便可以試
當我嘗試他的Sample Code時出現了以下的錯誤.做了一會Research 之後才找到解決方法
原來Javascript 的程式碼 放在 Head Tag 上會出垷以下的錯誤信息的
“Uncaught TypeError: Cannot read property ‘ownerDocument’ of null”
Uncaught TypeError Cannot read property 'ownerDocument' of null

在Nokia Here Map 你需要把Javascript 的程式碼放在Body Tag 內

為了方便自己/方便大家

以下就是我整理好的Sample Code
大家可以複製之後改了他的App_ID 和 App_Code便可以使用了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
	<script src="http://js.api.here.com/se/2.5.3/jsl.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		html {
			overflow:hidden;
		}

		body {
			margin: 0;
			padding: 0;
			position: absolute;
			overflow:hidden;
			width: 100%;
			height: 100%;
		}

		#mapContainer {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			position: absolute;
		}
	</style>

</head>
<body>
	<div id="mapContainer"></div>
	<script type="text/javascript">
nokia.Settings.set("app_id", "[YOUR APP ID]");
nokia.Settings.set("app_code", "[YOUR APP CODE]");

var map = new nokia.maps.map.Display(
	document.getElementById("mapContainer"), {
		// Zoom level for the map
		zoomLevel: 10,
		// Map center coordinates
		center: [52.51, 13.4]
	}
);
</script>
</body>
</html>

Hope you find it useful

Leave a Reply