Baidu map api development

First, the blog background

Recently, I need to use the Baidu api to make a map to find the function of the house. Follow along to learn how to look at the development document and learn to use this api. (I used to copy the ready-made code directly from Baidu, considering that the work is behind. With the development of document development, Du Niang can no longer find ready-made code), I hope to learn from each other, if the learning style is wrong, please advise.

Second, learning experience

Go to the official development documentation and find that you need to register as a Baidu developer and you need a secret key, so register first.

Ok, I don’t know how to choose here, let’s see what tips api has.
Sure enough, there are tutorials

I am here to referer white list here, read the following explanation, I directly choose not to limit any domain name, that is, * (after all, just learning)

The key was successfully generated

With these looks, you can prepare for development. First look for a tutorial for helloworld. (Here, I will wake up to you, just enter the pit, and learn any language from helloworld. Once helloworld is developed, you are already getting started, but it takes time to work hard to be proficient)

also has ready-made code, written clearly, you can copy and paste directly (during development) can also look down on the code (when learning) what role

I am writing here for the specific code.

<!DOCTYPE html>  
<html>
<head>  
<!--Description: Easy to display mobile platform -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>
 <!--css sets the size of the container so that the map fills the entire browser -->
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
 <!--Introduction of Baidu map api-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nI6URMs9j07NGjGT3Ho2FRaj0NwdFMzx">
 //v2.0 version of the reference method: src="http://api.map.baidu.com/api?v=2.0&ak=your key"
</script>
</head>  
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
 // Create a map instance  
var map = new BMap.Map("container");
 // Create point coordinates  
var point = new BMap.Point(116.404, 39.915);
 // Initialize the map, set the center point coordinates and map level  
map.centerAndZoom(point, 15);
</script>  
</body>  
</html>

There is no wheel zoom effect here, I found the following in the api

Then I added map.enableScrollWheelZoom

Intelligent Recommendation

***WeChat LBS location development + Baidu Map API (location and coordinate conversion)

WeChat public platform development-get user geographic location This article describes how to use the advanced interface on the WeChat public platform to develop functions to obtain the user's ...

Reprinted Baidu Map API secondary development experience sharing

Reprinted From:http://www.cnblogs.com/yiyiBlog/p/5122224.html Recently, I am working on a logistics back-end system. I need to use a map to display the order address. You need to box and select coordi...

Vue scaffolding development + use of Baidu map API (with examples)

learning target: Thoroughly use Baidu Map API in Vue development-How to cite the Society After reading this article I wrote, you must be able to. Project background description: In the past few days, ...

Hbuilder WebApp Development (17) Baidu Map URI API

The use of the company has made a logistics app for the purpose of convenient delivery. When I did, I integrate Baidu map.URI API. This is relatively simple, here I use the address resolutionbaidumap:...

WeChat public number web development is unable to use Baidu Map API

Problem Description: WeChat public account uses the web to develop a map, there will be a problem with the failure of Baidu map API calls, resulting in the unable to load the map page and positioning ...